图片主色提取与配色方案
先从图里挑出一组主色，再把其中任意一个当基准色，按色轮关系展开成整套配色。
选图、粘贴或拖进来。带透明背景的图会跳过全透明像素，不会多出一块黑。所有计算都在本机完成。
导出
:root {
--brand-1: #0c6b4d;
--brand-2: #6b0c2a;
}怎么用
先选一张图（品牌物料、产品照片、风景照都可以），右边会列出提取到的颜色和各自占比。找到想要的那个色，点「当基准色」，下面立刻会按选定的色轮关系展开成整套配色。每个色块都标了和白色的对比度，达到 4.5:1 的才能拿来放正文。最后选一种导出格式复制走。
只想拿几个色值就走：把「格式」选成 HEX 列表。要接到项目里：选 CSS 变量或 Tailwind 配置片段，前缀填你的品牌名。
配色这件事的常识
为什么用中位切分而不是 k-means。k-means 要反复迭代、结果受初始中心影响，同一张图跑两次可能给出不同答案，在浏览器里还容易卡顿。中位切分是一次性的划分：每次挑最长边从中位数切开，结果完全确定，并且只需要统计一遍直方图。对「从照片里挑几个主色」这种需求，两者效果差别肉眼看不出来。
占比低于 0.5% 的颜色会被丢掉。照片里总有很多只占几十个像素的杂色，如果全留下列表会变得又长又没用。默认把面积不到 0.5% 的颜色过滤掉，想找画面里的点缀色（比如一小块红色招牌）就把门槛调到 0.1% 以下，或者把颜色数量调大。反过来，只要主色调就把数量调到 3、门槛调到 2%。
色轮配色在 HSL 里算会有偏差。HSL 的色相不是感知均匀的：同样加 30 度，从黄色往绿色偏的变化看起来远不如从蓝色往紫色偏那么明显，明度 50% 的黄色也远比明度 50% 的蓝色更亮。所以生成出来的配色要人工再看一眼，尤其是三角和四角这种大跨度方案。真要严谨应该换 OKLCH，但对做界面来说 HSL 已经够用。
配色好看不等于能用。每个色块下面都标了它配白色和配黑色的对比度。WCAG AA 要求正文达到 4.5:1，大字和图形元素 3:1。很多看着舒服的莫兰迪色系对比度只有 2:1 出头，直接把文字放上去在强光下的屏幕上是看不清的。做界面时应该先定对比关系，再在满足对比度的前提下挑具体色值。
提取主色前先想清楚图的用途。带大片纯色背景的商品图，主色永远是那块背景，这时候应该调大颜色数量，从第 2、第 3 位开始看。反过来，想给一张风景照做主题配色，就该用少量颜色让整体氛围浮出来。同一张图调不同的颜色数量得到的是完全不同用途的清单，没有唯一正确的答案。
色值都是 sRGB，别直接搬去印刷。浏览器读到的像素是解码后的 sRGB 值，这里输出的十六进制也是 sRGB。印刷用的是 CMYK，色域并不重合，尤其是鲜艳的青色和绿色，在纸上根本印不出来，转换后必然变暗。做印刷物料时这些色值只能当参考，最终要以打样为准。