图片取色与调色板
图片取色与调色板
从图片点击取色，自动提取主色与调色板，支持复制 HEX/RGB 并导出 CSS 变量。支持 PNG、JPG/JPEG、WebP、AVIF、HEIC/HEIF。
拖放图片到这里或点击选择
支持 PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
图片取色与调色板导入图片：拖放或点击选择面板切换：桌面端在右侧面板；移动端点击底部按钮点击取色：在图片上点击任意位置，获取该像素的颜色复制颜色：取色后可复制 HEX/RGB/CSS 格式设置颜色数量：拖动滑块或点击预设（4/6/8/12/16/24/32）提取调色板：点击提取按钮，提取主色列表导出 CSS：调色板提取后可导出 CSS 变量文件导出 JSON：调色板提取后可导出 JSON 数据文件重置：清空当前图片与结果
快速开始
1
2
3
4
5
6
7
8
9
常见使用场景
设计稿/海报取色
提取主色与辅助色用于配色方案
主题/设计系统
导出 CSS 变量或 JSON 用于项目
组件配色
为按钮、标签、图表等提取匹配色
品牌统一
从品牌素材中提取标准色板
取色与调色板选项
颜色数量：2–32，常用 8/12；照片/渐变建议 16–32
预设按钮：4/6/8/12/16/24/32 一键切换
排序方式：按占比从高到低排列，最常见的颜色在前
颜色右侧数字：表示该色在图片中的像素占比
使用建议
先用 8/12 看整体效果，再根据需要增加到 16/24/32
落地到项目时建议将 --color-1 改成语义化名称（如 --color-primary）
大图提取时保持页面前台，避免浏览器节流导致变慢
限制与兼容性
单文件上限 128MB，超大图可能导致卡顿
调色板提取会自动下采样以提升性能，结果为代表色
HEIC/HEIF 解码依赖浏览器支持，失败时请先转为 JPG/PNG
透明像素会被忽略或按实际 RGBA 处理
隐私与安全
所有处理均在您的浏览器内完成，数据不会离开您的设备
常见问题
将导出的 :root { --color-1: ... } 放入全局 CSS，然后用 var(--color-1) 引用。
用于脚本/设计系统复用，例如生成 Design Tokens 或主题配置。每个颜色包含 hex/css/rgb 和 count。
一般 UI：8 或 12；极简图标：4–6；照片/渐变：16–32。可用预设快速对比。
点击取色是单点像素；调色板是从整图量化提取的代表色，强调整体主色趋势。
需要先点击「提取调色板」按钮，提取完成后导出按钮才可用。
默认用原图文件名（去扩展名）+ .palette-颜色数 + .css/.json，并自动清理非法字符。