颜色格式详解：HEX、RGB 和 HSL

在网页上，同一种颜色可以有好几种写法 —— #3498db、rgb(52, 152, 219) 和 hsl(204, 70%, 53%) 都是完全相同的蓝色。搞懂每种格式的含义（以及何时该用哪个），会让选色、微调和匹配颜色轻松得多。本指南拆解 HEX、RGB 和 HSL，以及它们之间的关系。

一切从红、绿、蓝开始

屏幕通过混合三种色光来产生颜色：红、绿、蓝。你看到的每一种颜色都是这三个通道的某种组合，每个通道设定为 0（关）到 255（满）的强度。纯黑是 0, 0, 0；纯白是 255, 255, 255。HEX 和 RGB 不过是对这同样三个数字的两种记法。

RGB

RGB 直接给出三个通道的值：

rgb(52, 152, 219)
     R    G    B

它是三者中最易读的，因为这些数字直接对应“红、绿、蓝各有多少”。当你想就通道本身来推敲时很好用。

HEX

HEX 把同样的 0–255 通道值用十六进制（base 16）编码，形式为一个 # 后跟三对：

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

每一对从 00（0）到 ff（255）。HEX 紧凑，而且是大多数设计工具和 CSS 的默认，所以它是你最常复制粘贴的格式。还有一种简写：#39f 通过把每一位翻倍展开为 #3399ff。

HSL

HSL 以人们直觉思考颜色的方式来描述它，用三个不同的轴：

• 色相（Hue）（0–360°）—— 色环上的颜色本身：0° 红，120° 绿，240° 蓝。
• 饱和度（Saturation）（0–100%）—— 有多鲜艳，从灰到纯色。
• 明度（Lightness）（0–100%）—— 有多亮，从黑经过该颜色到白。

hsl(204, 70%, 53%)
    hue  sat  light

HSL 的超能力在于 调整 颜色。想要某颜色更暗的版本？降低明度，保持色相和饱和度不变。想要一套匹配的深浅色？固定色相，只改明度。用 HEX 或 RGB 那样做意味着重新计算全部三个通道；用 HSL 只是一个数字。

Alpha：加入透明度

每种格式都有一个带 alpha 通道的变体，用于不透明度，从 0（完全透明）到 1（完全不透明）：rgba(52, 152, 219, 0.5) 和 hsla(204, 70%, 53%, 0.5)。现代 CSS 还允许一个 8 位 HEX，最后一对是 alpha —— #3498db80 就是 50% 的同一种蓝。

你该用哪个？

• HEX —— 复制一个固定的品牌色，或粘贴进设计工具。紧凑而通用。
• RGB / RGBA —— 当你要就原始通道推敲，或需要简单的透明度时。
• HSL / HSLA —— 当你在 设计 时：构建调色板、悬停/激活深浅色，或凭感觉微调颜色。

好消息是你不必手工转换。我们的 HEX↔RGB 转换器 即时在格式间转换，而 取色器 让你可视化地选一个颜色，一次读出它的 HEX、RGB 和 HSL 值 —— 还能做渐变和调色板。要从图片里取一种颜色？图片取色器 正是干这个的。