颜色格式的定义与取值范围

下面先说明颜色转换的定义与基本规则，再给出示例和常见问题。

颜色格式的定义与取值范围

颜色转换是在 HEX、RGB、HSL、HSV、CMYK 等颜色表示方式之间换算同一种颜色。网页和屏幕显示常用 HEX、RGB、HSL，设计软件常用 HSV（HSB），印刷则使用 CMYK。

• HEX 可写 3 位缩写：#F53 等于 #FF5533
• RGB 范围 0–255，HSL 的 S、L 为百分比
• 色相 0° 为红，120° 为绿，240° 为蓝
• HSL 的 L=50% 时颜色最“纯”，L=100% 为白
• CMYK 各分量为 0–100%

示例

输入：橄榄色 #808000 作为背景色

转换结果：与白字对比度 4.20:1，与黑字对比度 5.01:1

说明：相对亮度 0.200；WCAG 要求正文对比度至少 4.5:1，建议配黑字。

常见误区

• 误区：HSL 和 HSV 是一回事——两者的亮度定义不同，同一颜色数值不同
• 误区：CMYK 换算结果就是印刷色——实际需要使用 ICC 色彩配置文件转换
• 误区：#FFF 和 #FFFFFF 不一样——3 位写法是每位重复，两者相同
• 误区：颜色越鲜艳越好看——还要考虑对比度和整体搭配

与相关概念的区别

HEX 和 RGB 表达同样的信息，HEX 更短；HSL 更符合人对颜色的直觉，适合做明暗变化；HSV/HSB 是设计软件取色器常用的模型；CMYK 用于印刷，色域比 sRGB 小，部分鲜艳颜色无法印出。

JavaScript 示例

下面是用 JavaScript 实现的写法，可以按需要修改：

function hexToRgb(hex) {
  const n = parseInt(hex.slice(1), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
console.log(hexToRgb('#FF5733')); // [255, 87, 51]

本站的颜色转换器工具可以直接在网页中使用，无需安装，适合快速得到和核对结果。

常见问题

【HSL 和 HSV 有什么区别？】两者色相相同，但 HSL 的亮度 100% 是白色，HSV 的明度 100% 是该色相最亮的颜色。

【为什么同一个颜色在两台屏幕上不一样？】显示器的色域、校准和亮度不同会造成差异。

【文字和背景的对比度多少合适？】WCAG 要求正文至少 4.5:1，大号文字至少 3:1。

文中示例可以在本站对应工具中核对。

标签： 颜色 颜色转换