配色工具 · 取色器与配色生成
选定颜色即可一览 HEX、RGB、HSL、HSB(HSV)、CMYK 色值，点击即可复制。在色轮上选择互补、类似、三角、四角或单色等配色规则，工具会自动生成协调的五色方案。同时可检查背景与文字的 WCAG 对比度，并以红色盲、绿色盲、蓝色盲或黑白模式预览，确认色觉异常者也能区分。喜欢的配色可保存在本浏览器中。
颜色 工具
选定颜色即可查看五种色值格式，再从色轮规则中选择即可获得协调配色。
- 在取色器中选色即可得到 HEX、RGB 等 5 种色值，点击色值即可复制。
- 在配色推荐中选择规则（互补、类似、三角…），相配的 5 种颜色与文字对比度（WCAG）判定会一起更新。
- 例如：选好品牌色，点“互补”规则后复制为 CSS 变量，就能直接粘贴到样式表中。
配色推荐 在色轮上选择规则，五个协调色会随之变化
色觉预览
已保存的配色 仅保存在本浏览器中
尚未保存任何配色。点击上方的“保存此配色”开始。
常见问题
HSB 和 HSV 有区别吗？
两者是同一个概念。 HSB(Hue·Saturation·Brightness)是 Adobe 使用的名称，
HSV(Value)是同一模型的另一个名称，本工具将两者视为相同。它与 HSL 不同——HSL 的 L（亮度）在 50% 时为纯色，而 HSB 的 B 在 100% 时才是纯色。
配色规则（互补、类似等）以什么为依据？
色轮上的 色相角度为基准。互补色位于基准色对面（180°），类似色在两侧 30°，三角配色间隔 120°，四角配色间隔 90°。单色配色保持同一色相，只改变饱和度与明度，与 Adobe Color 的规则相同。
如何解读 WCAG 对比度分数？
这是两种颜色的亮度比。正文文字需要 4.5 以上（AA），大字与标题需要
3.0 以上即可舒适阅读。7.0 以上为 AAA，非常清晰。计算时以配色中的第一个颜色为背景，其余颜色为文字。
色觉预览准确吗？
直接套用 Machado 等人（2009）整理的色觉转换矩阵，属于 近似模拟。色弱程度因人而异，无法完全重现“看到的样子”，但用来判断
两种颜色是否仍可区分已经足够。红绿色弱最常见，约占韩国男性的 5%，并排使用绿色和红色的配色请务必检查一次。
黑白模式下也能区分的话，就是不只依赖颜色的安全配色。预览只改变屏幕上的显示，复制和保存的 HEX 值始终是原色。
找不到“从屏幕取色”。
只有在浏览器支持 EyeDropper API时才会出现（桌面版 Chrome、Edge 等）。不支持时按钮会隐藏，直接粘贴 HEX 值即可。
保存的配色在其他设备上能看到吗？
看不到。本站不在服务器上保存数据。已保存的配色和最后使用的颜色
仅保存在此处，无痕窗口或其他设备中不可见。
相关工具
已复制