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

网络安全 — 次阅读

三种颜色格式概览

在网页设计和前端开发中，颜色有三种最常用的表示方式：

HEX（十六进制）

用 # 开头的 6 位十六进制数表示颜色，每两位分别代表红、绿、蓝通道（00–FF）。

#FF5733  →  红=255, 绿=87, 蓝=51
#000000  →  黑色
#FFFFFF  →  白色
#3B82F6  →  蓝色（Tailwind blue-500）

适用场景：CSS、HTML 属性值、设计工具（Figma、Sketch）的颜色代码

RGB（红绿蓝）

用 0–255 的整数分别表示红、绿、蓝三个通道，RGBA 额外加一个 0–1 的透明度值。

rgb(255, 87, 51)      → 橙红色
rgba(255, 87, 51, 0.5) → 50% 透明度的橙红色

适用场景：CSS 属性值、需要动态计算颜色值的 JavaScript、图像处理

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

用色相（0–360°）、饱和度（0–100%）和亮度（0–100%）表示颜色，更符合人类对颜色的直觉认知。

hsl(14, 100%, 60%)   → 橙红色
hsl(0, 0%, 0%)       → 黑色
hsl(0, 0%, 100%)     → 白色

适用场景：需要调整颜色深浅变体（如 hover 状态）、主题色系生成、设计系统中的颜色变量

如何在线转换颜色格式

使用 tool.tl 的颜色转换器：

  1. 访问 tool.tl/color-converter
  2. 在任意输入框中输入颜色值（HEX、RGB 或 HSL）
  3. 其他格式自动实时更新，并显示颜色预览
  4. 一键复制任意格式的颜色值

HEX 与 RGB 的换算

HEX 和 RGB 本质上是同一信息的不同表示：

# Python
hex_color = '#FF5733'
r = int(hex_color[1:3], 16)  # 255
g = int(hex_color[3:5], 16)  # 87
b = int(hex_color[5:7], 16)  # 51
print(f'rgb({r}, {g}, {b})')  # rgb(255, 87, 51)

# 反向：RGB 转 HEX
hex_val = '#{:02X}{:02X}{:02X}'.format(255, 87, 51)  # #FF5733

// JavaScript
const toHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('').toUpperCase();
toHex(255, 87, 51);  // '#FF5733'

HSL 的优势：轻松调整明暗

HSL 的最大优势是可以直观地调整颜色深浅而不改变色相。例如，以 Tailwind CSS 蓝色为基础生成一组色阶：

hsl(217, 91%, 90%)  → blue-100（最浅）
hsl(217, 91%, 60%)  → blue-400
hsl(217, 91%, 50%)  → blue-500（基础色）
hsl(217, 91%, 35%)  → blue-700
hsl(217, 91%, 20%)  → blue-900（最深）

只需改变亮度值，即可生成同色系的深浅变体，非常适合设计系统的 token 定义。

常见问题

什么时候用 HEX，什么时候用 RGB？

两者完全等价，主要看使用习惯和上下文。HEX 更简洁，常用于静态颜色；RGB/RGBA 需要处理透明度时更方便；HSL 在需要程序化调整颜色时最易理解和操作。

颜色代码不区分大小写吗？

HEX 颜色代码不区分大小写，#FF5733 和 #ff5733 效果相同。但为了一致性，建议在项目内统一使用大写或小写。

工具是免费的吗？

是的，tool.tl 的颜色转换器完全免费，实时转换，无需注册。