颜色转换器

使用方法

1. 在任意输入框中输入 HEX 代码（如 #ff5733）、RGB 值或 HSL 值。
2. 其他两种格式会自动更新。
3. 点击 Pick Color 打开系统颜色选择器。
4. 点击输入框旁的 Copy 可将对应格式复制到剪贴板。

关于颜色格式

HEX 是网页中最常用的颜色格式。六位代码如 #1a73e8，用两个十六进制数字分别表示红、绿、蓝通道（00–FF）。

RGB 用十进制数（0–255）表示同样的三个通道，便于程序化调整： rgb(26, 115, 232)。

HSL 代表色相（Hue）、饱和度（Saturation）、亮度（Lightness），是更直观的颜色模型。 色相为 0–360°，饱和度和亮度为百分比：hsl(214, 82%, 51%)。 HSL 非常适合通过调整亮度来生成色阶。

一个颜色的完整换算

以 #1a73e8 为例。每两位十六进制是一个通道：1a = 26，73 = 115，e8 = 232，所以 RGB 是 rgb(26, 115, 232)。

换算 HSL 时，先把三个通道缩放到 0–1，找出最大值（0.910，蓝）和最小值（0.102，红）：

• 亮度 = (最大 + 最小) / 2 = 0.506 → 51%
• 饱和度 = (最大 − 最小) / (2 − 最大 − 最小) = 0.817 → 82%（亮度高于 50% 时用这个公式）
• 色相：蓝色通道最大，色相 = 60 × ((R − G) / (最大 − 最小) + 4) = 214.1 → 214

工具显示 hsl(214, 82%, 51%)。公式与 CSS Color Module Level 4 一致。

限制

• 不支持透明度。 8 位十六进制（#1a73e880）会被判为无效，rgba(26, 115, 232, 0.5) 里的透明度会被忽略。
• HSL 取整。 输入 hsl(214, 82%, 51%) 得到的是 #1c74e9 而不是 #1a73e8，因为取整后的数值已经不能精确指回原色。请以 HEX 值为准。
• 只支持三种格式： HEX（3 位或 6 位，#abc 会展开成 #aabbcc）、RGB 和 HSL，不支持 HSB/HSV、HWB、OKLCH。