颜色预览
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

HEX、RGB、HSL 色彩模式详解

在网页设计和开发中,颜色通常有三种主流表达方式:HEX(十六进制)RGB(红绿蓝)HSL(色相饱和度亮度)。不同场景下可能需要不同格式,本工具帮你轻松互转。

HEX 转 RGB 公式

HEX 色值 `#RRGGBB` 中的每两位十六进制数代表一个颜色通道。转换公式如下(以 `#3b82f6` 为例):

HEX → RGB R = 十六进制 "3b" → 十进制 59
G = 十六进制 "82" → 十进制 130
B = 十六进制 "f6" → 十进制 246
结果:rgb(59, 130, 246)

RGB 转 HSL 公式

将 RGB 值归一化到 0~1,再计算亮度、饱和度和色相。

RGB → HSL R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B'), Cmin = min(R', G', B'), Δ = Cmax - Cmin
亮度 L = (Cmax + Cmin) / 2
饱和度 S = Δ / (1 - |2L - 1|) (如果 Δ≠0,否则 S=0)
色相 H =
 如果 Δ=0 → H=0
 如果 Cmax=R' → H = 60 × ((G'-B')/Δ mod 6)
 如果 Cmax=G' → H = 60 × ((B'-R')/Δ + 2)
 如果 Cmax=B' → H = 60 × ((R'-G')/Δ + 4)
最终 HSL: (H, S%, L%)

HSL 转 RGB 公式

给定 H, S, L,首先计算中间值,再得出 RGB。

HSL → RGB C = (1 - |2L - 1|) × S
X = C × (1 - |(H / 60°) mod 2 - 1|)
m = L - C/2
(R', G', B') =
 如果 H < 60° → (C, X, 0)
 如果 H < 120° → (X, C, 0)
 … 依此类推
最终 R = round((R' + m) × 255), G, B 同理

常见问题

为什么我的 HEX 色值输入后没有反应?

请检查格式是否正确:必须是以 `#` 开头,后跟 6 位十六进制字符(0‑9, A‑F),例如 `#ff0000`。支持缩写格式(如 `#f00`),会自动扩展为6位。

RGB 和 HSL 可以带小数吗?

RGB 数值必须是 0‑255 的整数;HSL 的色相为整数,饱和度和亮度可以是 0‑100 的整数或小数。

什么场景下更适合使用 HSL?

当你需要动态调整颜色的明暗或饱和度时(如 hover 效果、主题切换),HSL 比 HEX/RGB 更符合人类的直觉,可以只修改亮度值而不改变色相。

Color preview
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

HEX, RGB, and HSL Explained

Colors in web development are commonly expressed in three major formats: HEX (hexadecimal), RGB (red‑green‑blue), and HSL (hue‑saturation‑lightness). This tool converts any supported format into all three.

HEX to RGB Conversion

A HEX color like #3b82f6 consists of three pairs: RR, GG, BB. Each pair is a hexadecimal number.

HEX → RGB R = hex "3b" → decimal 59
G = hex "82" → 130
B = hex "f6" → 246
Result: rgb(59, 130, 246)

RGB to HSL Formula

RGB → HSL R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B'), Cmin = min(...), Δ = Cmax - Cmin
L = (Cmax + Cmin) / 2
S = Δ / (1 - |2L - 1|)
H =
 if Δ=0 → 0
 if Cmax=R' → 60×((G'-B')/Δ mod 6)
 if Cmax=G' → 60×((B'-R')/Δ + 2)
 if Cmax=B' → 60×((R'-G')/Δ + 4)
Final HSL: (H, S%, L%)

HSL to RGB Formula

HSL → RGB C = (1 - |2L - 1|) × S
X = C × (1 - |(H/60) mod 2 - 1|)
m = L - C/2
(R', G', B') = … (based on hue sector)
R = round((R' + m) × 255)

FAQ

Why isn't my HEX code working?

Make sure it starts with `#` and is followed by exactly 6 hexadecimal characters (0‑9, A‑F). The 3‑digit shorthand (e.g. `#f00`) is also accepted and automatically expanded.

Can RGB or HSL have decimals?

RGB values must be integers in the 0‑255 range. For HSL, hue is an integer, while saturation and lightness can be decimals or percentages.

When should I use HSL over HEX?

HSL is more intuitive when you need to create color variations — such as lighter/darker shades for hover effects — because you can keep the hue unchanged and only adjust lightness or saturation.