图片取色与调色板
在浏览器本地为单张图片取色，复制 HEX/RGB/CSS，提取 2-32 个代表色调色板，并通过 CSS 变量或 JSON 导出；支持 HEIC/HEIF 输入。
拖放图片到这里或点击选择
支持 PNG / JPEG / WebP / AVIF / HEIC / HEIF
文件数
0 / 1
总大小
0 bytes / 25 MB
单文件上限
25 MB
图片取色与调色板导入一张图片点击预览取色，并复制 HEX/RGB/CSS选择调色板数量（4/6/8/12/16/24/32）提取代表色导出 CSS 变量或 JSON
快速开始
1
2
3
4
5
常见使用场景
设计稿/海报取色
提取主色与辅助色用于配色方案
主题/设计系统
导出 CSS 变量或 JSON 用于项目
组件配色
为按钮、标签、图表等提取匹配色
品牌统一
从品牌素材中提取标准色板
取色与调色板选项
颜色数量：2-32，常用 8/12；照片/渐变建议 16-32
预设按钮：4/6/8/12/16/24/32 一键切换
排序方式：按量化样本数量从高到低排列，最常见的颜色在前
颜色右侧数字：表示下采样调色板图像中的量化样本数量
导出契约：CSS 变量使用:root --color-1 命名；JSON 为每个颜色列出 index/hex/css/rgb/count。
使用建议
先用 8/12 看整体效果，再根据需要增加到 16/24/32
落地到项目时建议将 --color-1 改成语义化名称（如 --color-primary）
大图提取时保持页面前台，避免浏览器节流导致变慢
限制与兼容性
调色板提取会自动下采样以提升性能，结果为代表色。
精度说明：点击取色来自最长边最高 2,048 px 的预览 Canvas；调色板提取使用 256 px 采样。
HEIC/HEIF 仅作为输入；本地解码可能失败，必要时请先转为 PNG/JPEG。
Alpha 处理：CSS 可输出 rgba(...)；HEX/RGB 不包含 alpha；JSON 通过 css 字段保留 alpha 表达。
输入边界：不支持 URL 导入、剪贴板导入、屏幕取色器或浏览器扩展流程。
颜色边界：不提供 HSL/CMYK/Pantone/LAB/OKLCH 转换、对比度检查或 WCAG 矩阵。
导出边界：不提供 Tailwind/SCSS/ASE/Figma/Procreate 色板导出。
隐私与安全
图片取色和调色板提取在浏览器中完成。源图片在本工具打开期间保留在页面内存中。调色板数量设置可能保留在浏览器存储中；启用 WebDAV 同步时，该设置可能按你的设置同步。选中颜色、调色板、错误信息和预览缩放 / 平移数据是运行态复查状态，存在期间也可能通过 WebDAV 状态 schema 同步。图片文件默认不会同步；只有你明确启用附件同步时，它才可能进入 WebDAV 附件同步。CSS/JSON 调色板导出只在下载时生成，不作为单独结果保存。在共用设备上，按需清空图片、取色结果、调色板、已保存设置和站点数据。
常见问题
一般 UI：8 或 12；极简图标：4-6；照片/渐变：16-32。可用预设快速对比。
点击取色是在预览 Canvas 上单点采样；调色板是对 256 px 采样图进行量化后的代表色，强调整体主色趋势。
取色和调色板提取在浏览器中完成。图片在工具打开期间保留在页面内存中。调色板数量设置可能保留在浏览器存储中，并在启用时通过 WebDAV 同步；取色结果、调色板和预览状态存在期间也可能作为运行态状态同步。图片文件只有在你明确启用附件同步时才会进入 WebDAV 附件同步。
点击取色会显示 HEX、RGB 和 CSS 格式。调色板可导出 CSS 变量和 JSON，JSON 包含 index、hex、css、rgb、count 字段；HSL、CMYK、Pantone、LAB、OKLCH、ASE、Figma 色板导出不在此工具范围内。