图片画布
等待上传
还没有载入图片
DROP AN IMAGE
把图片拖进来，或选择文件
点击图片任意位置读取颜色，原图不会上传。
#000000
提示：缩放或放大页面后，点击位置会按图片原始坐标重新计算。
LOCAL / CANVAS 图片不离开浏览器
把图片里的
好颜色拎出来。
上传一张图，点哪里取哪里。HEX、RGB、HSL 一次看齐；再让 k-means 帮你找出画面真正的 5 色主调。
- 01 点击即取
- 02 5 色主调
- 03 本地处理
COLOR INDEX05 SAMPLES
胭脂
#E0445F琥珀
#F2B84B青瓷
#2EC4B6深松
#1F5C56墨蓝
#20252CPICK像素 → 色号
01 / 取色工作台
上传、点按、拿走颜色
支持 JPG、PNG、WebP。大图会自动缩放显示，但取色仍读取原图像素。
01原始像素取色点击位置实时换算
02三种色值HEX / RGB / HSL
03k-means 主调按覆盖比例排序
02 / 使用步骤
怎么用
不用注册，不用上传，三步拿到可用色号。
- 01
放入一张图
把 JPG、PNG 或 WebP 拖进画布，也可以点“选择图片”或打开示例图。图片只在当前浏览器中读取。
- 02
点击取色
在图片上点任意位置，右侧立即显示 HEX、RGB、HSL；点下三个“复制”按钮即可带走色值。
- 03
提取主色并导出
点“提取主色调”查看 5 个代表色。解锁高级版可得到 10 色，并复制或下载 CSS 变量。
03 / 常见问题
常见问题
关于准确性、隐私、主色算法与导出的说明。
在线图片取色会上传我的图片吗？
不会。图片通过本地文件选择或拖放读取，显示、点按取色、主色调分析和 CSS 生成都在浏览器 Canvas 中完成，原图不会发送到服务器。页面只记录匿名的访问与工具使用事件。
HEX、RGB 和 HSL 应该选哪个色值？
HEX 和 RGB 适合网页、应用界面与大多数设计软件；HSL 更直观地表达色相、饱和度和明度，适合手动调整同色系。页面会同时显示三种格式，并按需复制。
主色调提取是怎么计算的？
工具先把图片缩小成适合分析的像素样本，再用 k-means 聚类寻找具有代表性的颜色，并按覆盖比例排序。免费版显示 5 色，邀请解锁后显示 10 色。它适合快速建立配色方向，不等同于人工精修取色。
为什么取到的颜色和肉眼看到的不完全一样？
照片可能包含压缩噪点、渐变、半透明边缘或屏幕色彩管理差异。先放大图片再点击更稳定的纯色区域，通常能得到更准确的代表色；想把握整张图的氛围，可以结合主色调结果一起判断。
CSS 变量下载后怎么使用？
高级功能会生成以 --color-01 到 --color-10 命名的 :root 变量块，并提供复制与下载 theme.css。把内容放进项目样式文件，或在 CSS 中通过 var(--color-01) 引用即可，名称也可以继续手动修改。
PREMIUM / COLOR KIT
解锁完整配色包
- 01主色调由 5 色扩展到完整 10 色
- 02生成
:rootCSS 自定义属性 - 03复制 CSS 文本到设计或开发项目
- 04下载独立的 theme.css 文件
邀请 2 位好友打开你的链接即可永久解锁（记录在本浏览器）。没有订阅、没有付款，图片始终不上传。