颜色转换器：HEX、RGB、HSL 颜色格式互转指南

工具 — 次閱讀

三种主要颜色格式

HEX（十六进制颜色）

格式：#RRGGBB，三组两位十六进制数分别表示红（R）、绿（G）、蓝（B）通道，取值 00-FF（即 0-255）。

示例：#FF5733 = 红 255、绿 87、蓝 51

最常见于 CSS、设计软件（Figma、Sketch）、品牌色规范文档。

RGB（红绿蓝）

格式：rgb(R, G, B)，三个通道各取 0-255 的整数。

示例：rgb(255, 87, 51)

用于 CSS、Canvas 绘图、图像处理库。支持透明度则使用 rgba(R, G, B, A)，A 取 0-1。

HSL（色相、饱和度、亮度）

格式：hsl(H, S%, L%)

  • H（Hue，色相）：0-360 度的色轮角度，0°=红，120°=绿，240°=蓝
  • S（Saturation，饱和度）：0%=灰色，100%=纯色
  • L（Lightness，亮度）：0%=黑色，50%=正常，100%=白色

示例：hsl(11, 100%, 60%)（等同于 #FF5733）

HSL 是对人类最直觉化的颜色描述方式，调整亮度或饱和度而不改变色调非常方便。

如何在线转换颜色

使用 tool.tl 颜色转换工具：

  1. 打开 tool.tl/color-converter
  2. 输入任意格式的颜色值（HEX、RGB 或 HSL）
  3. 立即得到所有其他格式的等效颜色值
  4. 可视化预览颜色效果

各颜色格式适用场景

格式适用场景优点
HEXCSS、品牌色规范、设计软件简短，复制粘贴方便
RGBCSS、Canvas、图像处理直观，可控透明度（rgba）
HSLCSS 主题、动态颜色调整调整亮度/饱和度不影响色相
CMYK印刷设计匹配印刷机油墨颜色

颜色转换公式

HEX → RGB（手动转换）

将十六进制字符串每两位转换为 10 进制整数：

#FF5733
R = 0xFF = 255
G = 0x57 = 87
B = 0x33 = 51
→ rgb(255, 87, 51)

CSS 中的颜色用法

/* HEX */
color: #FF5733;

/* RGB */
color: rgb(255, 87, 51);

/* RGBA（带透明度，0=透明，1=不透明）*/
color: rgba(255, 87, 51, 0.8);

/* HSL */
color: hsl(11, 100%, 60%);

/* HSLA（带透明度）*/
color: hsla(11, 100%, 60%, 0.8);

/* CSS 变量（现代主题化推荐写法）*/
:root { --primary: #FF5733; }
.button { background: var(--primary); }

设计系统中的颜色管理

在构建设计系统或 UI 主题时，推荐使用 HSL 定义颜色变量，因为可以通过调整 L（亮度）轻松生成深色/浅色变体：

:root {
  --primary-h: 11;
  --primary-s: 100%;
  --primary-l: 60%;

  --primary:      hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 45%);
  --primary-light:hsl(var(--primary-h), var(--primary-s), 80%);
}

常见问题（FAQ）

Q：HEX 三位简写是什么？

A：#RGB 三位 HEX 是 #RRGGBB 六位的简写，每位被展开重复两次：#F53 = #FF5533。只有每个通道两位相同时才可以简写。

Q：颜色透明度怎么表示？

A：在 CSS 中：rgba() 第四个参数（0-1）或 hsla()；八位 HEX（#RRGGBBAA，后两位是透明度，FF=不透明，00=全透明）；或使用 CSS 的 opacity 属性（影响整个元素包括子元素）。

Q：Figma 中的颜色格式是什么？

A：Figma 主要显示 HEX 和 RGB，也支持 HSL 和 HSB（Hue/Saturation/Brightness，与 HSV 相同）。复制颜色时可以选择格式：右键颜色块→「Copy as CSS」「Copy as HEX」等。