色彩实验室 · 本地分析

把任意图片变成真正可用的配色系统

自动提取主色、精确点击取色，再带走可以直接用于开发和设计的色值，而不只是一排好看的色块。

拖入图片，读取它的颜色选择图片Ctrl/⌘ V或按粘贴JPEG、PNG、WebP、AVIF · 仅在本机处理

01 · EXTRACT

自动主色，也保留精确证据

主色适合判断照片的整体视觉语言，但不能代替精确取样。这里同时保留按占比排序的调色板和像素取色器：前者给方向，后者给准确答案。

02 · VERIFY

每个颜色都给出 HEX、RGB、HSL，以及对白色和黑色的对比度。AA 结论使用 WCAG 普通文字 4.5:1 阈值，不靠肉眼猜。

03 · SHIP

复制 CSS 自定义属性或纯 HEX 列表，也可以下载 JSON 与可分享的 PNG 配色卡；所有输出都来自当前编辑后的真实调色板。

从图片里提取颜色，通常是为了**对上**某个东西：让网站主题贴合一张产品照、让幻灯片贴合 logo、让插画贴合一个只给了你 JPEG 而没给十六进制值的品牌。提取出来的色板是这项工作的起点，而「图里有这些颜色」和「该用这些颜色」之间的那道缝，正是需要判断的地方。

JPEG 经过了有损压缩，颜色会有轻微偏移，边缘尤其明显；截图则经过了整条显示管线。如果品牌方公布过十六进制值，那个值胜过任何从图片里取样得到的结果。

基于频次的提取报告的是**覆盖面积最大**的颜色，而在产品照里那通常是无缝背景，不是产品。把色板当成一份候选清单，按角色去挑 —— 背景、强调、文字 —— 而不是直接取排第一的那个。

从同一张照片里取出的两个颜色，明度往往很接近 —— 而这恰恰是文字对比度不达标的典型条件。任何你打算用在正文上的配色，落定之前先去核一下对比度。