颜色转换器
输入十六进制颜色代码，查看其对应的 RGB 和 HSL 值，以及红、绿、蓝各通道的数值。
如何使用此颜色转换器
- 输入十六进制颜色代码
在十六进制颜色代码字段中输入 6 位十六进制代码（例如 FF6B35 或 00FF88）。请省略 # 符号。
- 查看 RGB 数值
红色通道、绿色通道和蓝色通道的结果显示了每个分量的 0–255 数值。
- 查看 HSL 输出
查看 HSL 结果中的色相 (0–360°)、饱和度和亮度 —— 这对颜色调整非常有用。
此颜色转换器的工作原理
此工具将十六进制颜色代码转换为 RGB（红、绿、蓝）和 HSL（色相、饱和度、亮度）表示形式。每个十六进制对映射到一个 8 位通道值（0–255），HSL 转换使用标准色彩空间数学公式。
R = hex[0:2] → 十进制；G = hex[2:4] → 十进制；B = hex[4:6] → 十进制 Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%)。
十六进制 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) —— 纯黑色。
十六进制 FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) —— 纯白色。十六进制 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) —— 中灰色。
- ✓ 输入为有效的 6 位十六进制颜色代码。
- ✓ 此版本不支持 Alpha 通道。
- CMYK 转换需要色彩配置文件，此处不包含。
了解颜色模型
HEX、RGB 和 HSL 是描述同一种颜色的不同方式。HEX 将 RGB 编码为 6 位十六进制字符串：每对字符代表一个 8 位通道 (0–255)。RGB 将相同的值表示为三个数字，即屏幕发出的加法三原色。HSL（色相、饱和度、亮度）是一个圆柱模型：色相是色轮上的角度（0° 为红色，120° 为绿色，240° 为蓝色），饱和度是颜色强度，亮度是明暗程度。设计师在通过编程调整颜色时通常更喜欢 HSL —— 仅改变亮度即可在不改变色相的情况下使颜色变暗或变亮，而调整饱和度则可以改变鲜艳度。
颜色转换的开发者使用场景
开发者在构建设计系统、实现主题、生成调色板和调试 CSS 时会进行颜色转换。设计令牌通常以十六进制存储颜色；转换为 RGB 或 HSL 可以实现运行时计算，例如不透明度叠加或无障碍对比度检查。主题切换器可能需要使用 HSL 从基础颜色派生出更亮或更暗的变体。自动化无障碍工具通过转换颜色来计算亮度和对比度。在调试布局或主题错误时，将十六进制值视为 RGB 或 HSL 有助于识别哪个通道出现了偏差。颜色转换还用于数据可视化、图表库和动态 UI 主题。
常见问题
我可以输入 3 位十六进制代码吗？
目前此工具需要 6 位代码。对于像 F60 这样的 3 位简写，请先将其扩展为 FF6600。
什么是 HSL？
HSL 代表色相、饱和度、亮度。它是描述颜色的另一种方式，一些设计师认为它比 RGB 更直观。