主题
颜色工具
设计师给了一张视觉稿，你要在代码里还原那个背景色。或者看到一张好看的海报，想提取它的配色方案用在自己的图上。
打开「颜色工具」看到的初始界面。在浏览器本地完成、数据不离开浏览器，免费。
三件事
图片取色——上传图片，提取主色。
格式互转——HEX、RGB、HSL、HSV 之间换。
命名色对照——查 CSS 标准色名对应的色值。
提取颜色数怎么选
默认 6 个。
- 3~5 个：想要一套能直接用的配色方案。太多反而不知道该用哪个
- 6~10 个：分析一张图的整体色彩构成
- 超过 12 个：意义不大，相近的色会被拆成好几个
提取算法找的是画面中占比最大的几种颜色，所以结果反映的是「这张图主要是什么颜色」，不一定包含你眼睛注意到的那个点缀色。要取特定位置的颜色，用取色器点那个点。
四种色值格式的用途
| 格式 | 长什么样 | 什么时候用 |
|---|---|---|
| HEX | #E53935 | 写 CSS、给设计师，最通用 |
| RGB | rgb(229,57,53) | 需要单独调整某个通道，或要加透明度 |
| HSL | hsl(1,77%,55%) | 要调出一系列同色调的颜色时 |
| HSV | hsv(1,77%,90%) | 设计软件里常见 |
HSL 是最被低估的一个。它把颜色拆成色相、饱和度、亮度三个独立的量，所以「同一个色相做深浅变化」只要改亮度那个数字——这正是做一套配色的常规手法。用 HEX 手工调深浅几乎不可能调准。
一个实用技巧
从图片提取的颜色直接用在文字上，常常对比度不够。拿到色值后要检查文字与背景的对比度：正文需要 4.5:1 以上。
好看的配色不等于可读的配色——很多设计稿翻车在这里。
浏览器本地处理
图片不上传。