颜色代码转换：HEX、RGB、HSL 详解

网页上的颜色可以用多种格式表示。让我们逐一探索。

HEX 颜色

HEX 颜色使用十六进制值：

• 格式: #RRGGBB 或 #RGB
• 范围: 每个通道 00-FF

示例：

• #FF0000 = 红色
• #00FF00 = 绿色
• #0000FF = 蓝色
• #FFF = 白色（简写）

RGB 颜色

RGB 使用红、绿、蓝值：

• 格式: rgb(r, g, b) 或 rgba(r, g, b, a)
• 范围: 每个通道 0-255
• Alpha: 透明度 0-1

示例：

• rgb(255, 0, 0) = 红色
• rgba(0, 0, 0, 0.5) = 50% 透明黑色

HSL 颜色

HSL 使用色相、饱和度、亮度：

• 色相: 0-360（色轮角度）
• 饱和度: 0-100%
• 亮度: 0-100%

示例：

• hsl(0, 100%, 50%) = 红色
• hsl(120, 100%, 50%) = 绿色
• hsl(240, 100%, 50%) = 蓝色

色轮（色相值）

• 0° = 红色
• 60° = 黄色
• 120° = 绿色
• 180° = 青色
• 240° = 蓝色
• 300° = 品红

转换公式

HEX 转 RGB

const hex = "#FF5733";

const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);

何时使用

• HEX: CSS、设计工具、简洁表示
• RGB: 需要 alpha 透明度时
• HSL: 程序化调整颜色时

使用我们的颜色转换器轻松切换格式。