如何在 HEX、RGB 和 HSL 之间转换颜色

HEX、RGB、HSL 是 Web 上最常用的三种颜色格式：HEX 简洁适合 CSS，RGB 支持透明度通道，HSL 直观适合调色。NeatForge 颜色转换器 让三者实时同步，改一个另两个立即更新，并复制可直接粘贴到 CSS 的值。

三种颜色格式说明

• HEX：十六进制表示，如 #2563EB，每两位对应 R、G、B（0-255）。3 位简写 #fff 等价于 #ffffff。
• RGB：十进制表示，如 rgb(37, 99, 235)，可选 alpha 通道 rgba(37, 99, 235, 0.5)。
• HSL：色相（Hue，0-360°）+ 饱和度（Saturation，%）+ 亮度（Lightness，%），如 hsl(217, 83%, 53%)。

三者描述的是同一个颜色，只是坐标系不同。HEX 和 RGB 直接对应屏幕发光原理，HSL 更贴近人眼对“色相、浓淡、明暗”的直觉。

各自的使用场景

• HEX 用于 CSS：最简洁，设计工具（Figma、Sketch）默认输出，Tailwind 等框架默认格式。
• RGB 用于透明度：rgba() 是设置半透明颜色最直接的方式（现代 CSS 也支持 #RRGGBBAA 8 位 HEX）。
• HSL 用于设计：调色板生成时只需固定色相、调亮度即可得到同色系深浅，比 RGB 直观得多。

RGB 与 HSL 的区别

RGB 描述“每种原色有多少”，对机器友好但对人不直观——rgb(37, 99, 235) 你很难一眼看出是偏蓝还是偏紫。HSL 描述“什么色相、多浓、多亮”，hsl(217, 83%, 53%) 直接告诉你“蓝色、较饱和、中等亮度”。

要做“同色系 5 个深浅”，HSL 里只需把 L 从 30% 走到 70%；在 RGB 里要分别算 R/G/B 三个通道，麻烦且易错。这也是设计系统（如 Tailwind 调色板）常用 HSL 作为内部表示的原因。

如何转换颜色？

1. 打开 颜色转换器。
2. 输入 HEX 值，或调整 RGB/HSL 数字，或点快速预设。
3. 顶部色块实时预览当前颜色。
4. 用任一格旁边的“复制”按钮取走 CSS 可用值：#2563EB、rgb(37, 99, 235) 或 hsl(217, 83%, 53%)。

输入 #fff 会自动扩展为 #FFFFFF；HEX 无效时 RGB 和 HSL 不会更新，方便你试错而不丢之前的颜色。预设来自 Tailwind CSS 默认调色板，可作为调色起点。

CSS 技巧：color-mix 与透明度

现代 CSS（2023+）支持 color-mix() 函数，可以直接在 CSS 里混合颜色而无需预计算：

.button {
  background: color-mix(in srgb, #2563EB 80%, white);
}

用 HSL 做主题变体也很方便——通过 CSS 自定义属性动态改 --hue，整个色系随之联动。需要透明度时，hsl(217 83% 53% / 0.5) 是现代写法，等价于 hsla(217, 83%, 53%, 0.5)；RGB 同样支持 rgb(37 99 235 / 0.5)。

常见问题

RGB 和 HSL 有什么区别？ RGB 按红绿蓝分量描述颜色，对机器友好；HSL 按色相、饱和度、亮度描述，对人更直观，调色板生成时尤其方便。

3 位 HEX 简写支持吗？ 支持。输入 #fff 会自动扩展为 #FFFFFF，输出始终用 6 位形式以保证最大兼容性。

怎么在 CSS 里加透明度？ 用 rgba(37, 99, 235, 0.5) 或 8 位 HEX #2563EB80，或现代写法 rgb(37 99 235 / 0.5)、hsl(217 83% 53% / 0.5)。

→ 打开免费的颜色转换器