🎨 图片取色器

本地图片三合一取色：① 鼠标吸管，移到哪里取到哪里；② 一键提取 8 个主色调色板（K-Means 聚类算法）；③ 导出 HEX/RGB/HSL + CSS 变量/Tailwind 配置/JSON

🎨

点击或拖入图片开始取色

支持 PNG/JPG/WEBP，所有计算本地完成不上传

{{ hover.hex }} RGB {{ hover.r }},{{ hover.g }},{{ hover.b }}

🌈 一键提取主色调色板 (8 色)

🔄 重新选图

HEX{{ picked.hex }}

RGBrgb({{ picked.r }}, {{ picked.g }}, {{ picked.b }})

HSLhsl({{ picked.h }}, {{ picked.s }}%, {{ picked.l }}%)

位置X: {{ picked.x }} px · Y: {{ picked.y }} px

名称{{ picked.name }}（{{ picked.kind }}）

🌈 主色调色板（按出现频率排序，点击复制 HEX）

RGB {{ c.r }},{{ c.g }},{{ c.b }}

占比 {{ c.pct }}%

📋 导出代码

CSS 变量

Tailwind

JSON

SCSS

📋 复制

{{ exportCode }}

💡 使用场景

UI 设计：从竞品截图/海报/插画里取主色，做设计稿配色参考。
前端开发：从设计稿截图直接取色，生成 CSS 变量/Tailwind 配置，告别"对色器"猜色。
PPT/海报：拿到一张图就能配出和谐的延伸色，做配套素材不串色。
个人爱好：摄影修图调色参考、织毛衣/十字绣配色、绘画板取色。

图片取色器

本地图片三合一专业取色器，UI 设计/前端开发/PPT 配色刚需：① 鼠标吸管实时取色——图片加载后鼠标移到任意位置，浮动小窗实时显示该像素的 HEX + RGB + 60×60 大色块预览；点击即"锁定"该色为当前色，展示 HEX/RGB/HSL 三套坐标 + 取色位置 (X,Y) 像素值 + 最接近的中文颜色名称（黑/白/红/橙/黄/绿/青/蓝/紫/粉/棕/金/银等 15 种），每行可点击复制；② 一键主色提取——K-Means 聚类算法（迭代 8 次）扫描整张图，提取出现频率最高的 8 个主色，按占比降序展示色板（每张色卡显示 HEX、RGB、占比百分比），点击色卡即复制 HEX；③ 一键导出 4 种格式——CSS 变量（:root { --color-1 ... }）/ SCSS 变量 / Tailwind config 扩展（colors.brand1 ...）/ JSON 数组，复制即用。所有计算 Canvas 本地完成，图片不上传任何服务器

本工具由在线小工具大全提供，更多同类工具可在站内查看。