HEX 转 RGB 怎么转？一文学会颜色代码互相转换

一、颜色代码的三种常见格式

网页和设计工具里能见到的颜色写法，来来回回就三种。先把它们的"长相"认全，后面换算起来才不慌。

三者可以互相换算，任意知道一种写法，就能推出另外两种。其中 HEX 和 RGB 之间的转换最简单，是纯粹的进制换算；HEX 和 HSL 之间则要绕一道中间步骤。

二、HEX 与 RGB 的换算原理

先说结论：HEX 的每两位，对应 RGB 的一个通道。#FF6B35 拆开就是 FF、6B、35 三组，分别算出十进制值，就是 rgb 的三个数字。

十六进制怎么转成十进制

十六进制是逢十六进一，除了 0 到 9，还借用 A 到 F 表示 10 到 15。转换方法是：高位数字乘以 16，加上低位数字。拿 6B 举例：6 × 16 + 11 = 107。就这么简单。

把 #FF6B35 三个通道完整算一遍：

所以 #FF6B35 等于 rgb(255, 107, 53)。反方向也成立：RGB 转 HEX 时，把每个通道的十进制值除以 16，商是高位、余数是低位，再把商和余数按十六进制写出来即可。255 ÷ 16 商 15 余 15，写成 FF。

写代码时，一行就能转

在 JS 里与其手写换算，不如用浏览器内置的解析能力，一行搞定：

// HEX 转 RGB
const n = parseInt('#FF6B35'.slice(1), 16);
const r = (n >> 16) & 255;   // 255
const g = (n >> 8) & 255;    // 107
const b = n & 255;           // 53

三、HSL 是怎么来的

HSL 和 HEX 之间没有直接的进制关系，它换了整套坐标系。HEX/RGB 回答的是"屏幕上三种光各打多少"，HSL 回答的是"这是什么颜色、有多纯、有多亮"。三个字母的含义：

• H（Hue）色相：0 到 360 的角度值，对应色环上的一圈。0° 是红，120° 是绿，240° 是蓝，转一圈回到红。
• S（Saturation）饱和度：百分比。100% 是最纯的颜色，越低越接近灰色，0% 就是不带色相的灰。
• L（Lightness）亮度：百分比。0% 是黑，100% 是白，50% 是该色相的"标准亮度"。

同一颗 #FF6B35 写成 HSL 是 hsl(14, 100%, 61%)——一个偏橙的红色相、完全饱和、亮度中等。从 RGB 换算到 HSL 需要先求三个通道的最大值、最小值再套公式，过程略繁琐，日常没必手算，理解含义就够了。真正要紧的是它的实用价值：想给按钮做一个 hover 状态，在 HSL 下只需把 L 从 50% 改成 42%，颜色深一档但色相不变，比在 RGB 里盲调三个数字靠谱得多。

四、常用颜色速查表

下面这些颜色在设计里出场率很高，把三种写法放在一张表里，需要时直接对照。

五、用在线工具一键转换

换算原理值得搞懂，但天天对着色值表手算就没必要了。我们网站的在线颜色转换工具支持 HEX、RGB、HSL 任意输入、即时互转，输入一个格式，其他格式同步给出结果，不用点任何转换按钮。

另外两个顺手的姿势：一是 Chrome DevTools 里点开任意颜色值，可以在 HEX/RGB/HSL 之间直接切换显示；二是浏览器装一个取色插件，看到页面上的颜色随手就能吸出来。配合屏幕取色工具，从"看到颜色"到"拿到三种格式"只要几秒。