颜色转换器 - HEX、RGB、HSL 颜色代码互转

颜色转换器在 HEX、RGB 与 HSL 之间互转，用于写 CSS 主题、对齐设计稿标注，或把设计软件里复制的色值改成代码可用的写法。HEX 与 RGB 是同一颜色的两种表示（都基于 sRGB），HSL 按色相、饱和度、亮度描述，调「同色系深浅」时比直接改 HEX 直观得多。

配色时常被忽略的是可读性：文字与背景的对比度需要达到 WCAG 的最低要求（正文 4.5:1、大字号 3:1），否则在暗光环境或低质量屏幕上很难看清。工具按相对亮度算出对比度并建议配黑字还是白字，这也是国内不少平台的内容审核与无障碍检查会看的一项。

这个工具解决你的问题了吗？

使用步骤

粘贴任意一种色值：#rrggbb、#rgb 缩写、rgb(51, 102, 153) 都可以。
同时得到 HEX / RGB / HSL 三种输出，每行可单独复制，色块实时预览。
看对比度数值与建议文字色：4.5:1 以上可放心用于正文，低于 3:1 建议换色。
需要同色系深浅时改用 HSL 输出，只调 L 值即可保持色相不变。

计算原理与示例

支持的输入格式

在输入框粘贴任意一种格式：#rrggbb、#rgb 缩写、rgb(r, g, b) 均可。

输出的三种格式

三种格式（HEX/RGB/HSL）同时输出，每行可单独复制；色块即时预览。

对比度与无障碍标准

对比度建议基于 WCAG 相对亮度计算：≥ 4.5:1 才满足正文无障碍标准，工具会推荐对比更高的文字颜色。

代码示例

CSS 把色值用成设计令牌

:root {
  --brand: #336699;          /* HEX */
  --brand-rgb: 51 102 153;   /* 便于拼透明度 */
}

.btn {
  background: rgb(var(--brand-rgb));
  color: rgb(255 255 255 / 0.9);
}

JavaScript HEX 与 RGB 互转

// HEX → RGB
const toRgb = (hex) => {
  const h = hex.replace("#", "");
  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  return [0, 2, 4].map((i) => parseInt(v.slice(i, i + 2), 16));
};
toRgb("#369"); // [51, 102, 153]

// RGB → HEX
const toHex = (r, g, b) =>
  "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("");
toHex(51, 102, 153); // "#336699"

常见问题

HEX 和 rgb() 是同一种东西吗？

是。#336699 与 rgb(51, 102, 153) 表示完全相同的颜色（0x33=51、0x66=102、0x99=153）。HEX 紧凑适合设计稿，rgb() 可加透明度通道（rgba），按场景选用。

HSL 有什么用？

HSL（色相/饱和度/亮度）更符合人眼直觉：想做一套「同色系深浅」按钮，固定 H 和 S 只改 L 就行；#369 的 HSL 是 hsl(210, 50%, 40%)，把 L 调到 60% 就得到浅蓝。调色远比在 RGB 里凑数直观。

对比度多少才算达标？

WCAG 2.1 标准：正文文字对比度 ≥ 4.5:1（AA 级），大号文字 ≥ 3:1。低于 4.5:1 时工具会自动推荐黑字或白字中更易读的一种。

#369 这种三位 HEX 是什么意思？

三位写法是六位写法的缩写，每一位重复一次：#369 等于 #336699，即 R = 0x33、G = 0x66、B = 0x99。只有当每个通道的两位相同时才能缩写（如 #AABBCC 可写成 #ABC），#ABCDEF 则不能缩。

带透明度的颜色怎么写？

常用两种写法：#RRGGBBAA（后两位表示透明度，FF 为完全不透明），或 rgba(r, g, b, a)，其中 a 取值范围 0~1。例如 #33669980 约等于 50% 透明。现代 CSS 也支持 8 位 HEX 写法。

HEX 和 RGB 数值怎么互转？

HEX 每两位一组依次对应 R、G、B，把它们从十六进制转成十进制即可，如 #336699 → (0x33, 0x66, 0x99) = (51, 102, 153)；反向则把十进制转成十六进制后补齐两位再拼接。本工具会自动完成双向转换。

对比度 4.5 : 1 是哪条标准要求的？

出自 WCAG 2.1：普通字号正文要求对比度至少 4.5 : 1（AA 级），大号文字（18pt 以上或 14pt 加粗）可放宽到 3 : 1，AAA 级则要求 7 : 1。做无障碍设计时，正文和按钮文字都应满足对应级别。

延伸阅读

#336699 是什么颜色？HEX、RGB、HSL 与对比度

来自本站原创文章，讲清这个工具背后的算法与口径。