图片取色与调色板
图片取色与调色板
从图片点击取色，自动提取主色与调色板，支持复制 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 数据文件
- 重置：清空当前图片与结果
📌 常见使用场景
- 设计稿/海报取色：提取主色与辅助色用于配色方案
- 主题/设计系统：导出 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 处理
🔒 隐私与安全
- 所有处理均在您的浏览器内完成，数据不会离开您的设备
❓ 常见问题
导出的 CSS 文件怎么用？
将导出的 :root { --color-1: ... } 放入全局 CSS，然后用 var(--color-1) 引用。
导出 JSON 有什么用？
用于脚本/设计系统复用，例如生成 Design Tokens 或主题配置。每个颜色包含 hex/css/rgb 和 count。
颜色数量选多少合适？
一般 UI：8 或 12；极简图标：4–6；照片/渐变：16–32。可用预设快速对比。
为什么点击取色和调色板颜色不一样？
点击取色是单点像素；调色板是从整图量化提取的代表色，强调整体主色趋势。
为什么导出按钮是灰色的？
需要先点击「提取调色板」按钮，提取完成后导出按钮才可用。
导出的文件名是怎么生成的？
默认用原图文件名（去扩展名）+ .palette-颜色数 + .css/.json，并自动清理非法字符。