使用指南

颜色格式与对比度：从 HEX 到可读的界面配色

理解屏幕颜色格式、WCAG 对比度阈值，以及用调色板建立清晰层级的方法。

JTools 维护者 · 更新于 2026-10-11

HEX、RGB、HSL 和 HSV 都是在屏幕上描述同一组红、绿、蓝光的不同方式。HEX 适合复制到 CSS，RGB 直观表示三个通道，HSL 和 HSV 则更适合在取色器中分别调整色相、饱和度和明暗程度。

CMYK 面向印刷油墨，它和 RGB 不是一一对应的关系。浏览器中的 CMYK 换算可以帮助初步沟通，但印刷成品仍要使用印厂提供的色彩配置文件、纸张和油墨条件确认。

OKLCH 以感知亮度、色度和色相描述颜色，适合构造连续色阶和渐变。某些 OKLCH 值会超出普通 sRGB 显示器的色域，工具会提示此情况或通过降低色度生成可显示的预览。

WCAG 对比度将前景色和背景色的相对亮度进行比较。普通正文通常需要至少 4.5:1，较大的文字至少 3:1；更严格的 AAA 级分别为 7:1 和 4.5:1。透明图层、渐变和图片背景会改变实际结果。

调色板不只用来制造更多颜色。明暗色调用于层级和状态，类似色适合柔和的连续关系，互补色和三色组更适合作为需要强调的少量动作。无论采用哪一种，核心文字与背景都应单独通过对比度检查。