设计师和开发者必备的RGB、HSL及十六进制颜色代码双向转换工具，精准输出标准格式。
工具用的顺手吗？
你的反馈能帮助我们做得更好
概览
了解工具能解决的问题、计算或处理逻辑，以及数据边界。
RGB 用红、绿、蓝三个通道描述 sRGB 颜色，本工具把每个通道限定为 0～255 的整数。HEX 是同一组通道的十六进制写法，例如 #FF0000 与 rgb(255, 0, 0) 都表示红色。HSL 则用色相 H、饱和度 S、亮度 L 表达颜色：H 是色环角度，S 表示从灰色到高饱和颜色的程度，L 从黑色经过中间亮度到白色。它们是同一颜色的不同坐标表达，不是三种互不相关的颜色。
页面提供 RGB、HSL 两组滑块、HEX 输入、颜色预览、常用颜色和系统取色器。改动任一 RGB 通道会同步刷新 HEX、预览与 HSL；改动 HSL 滑块则会反向生成 RGB 与 HEX。默认颜色是 #3B82F6，重置会回到该值。
在标准 HSL 计算中，先把 R、G、B 归一化到 0～1，并令 Cmax 为三者最大值、Cmin 为最小值、Δ = Cmax − Cmin。亮度取最大值与最小值的中点；饱和度由通道差值相对于亮度的位置决定；色相依据最大通道落在红、绿或蓝的哪一段计算。
L = (Cmax + Cmin) / 2
S = 0（当 Δ = 0）；否则 S = Δ / (1 − |2L − 1|)
H 以角度表示，S 与 L 通常以百分比表示。
当 S 为 0 时，颜色位于灰阶轴上，改变 H 不会改变颜色；此时色相没有实际作用。H 为 0° 与 360° 位于色环同一点。工具滑块采用 H 0～360、S 0～100%、L 0～100%，步长均为 1。
预览区显示当前不透明颜色及六位大写 HEX。RGB 区可复制 rgb(R, G, B)；HSL 区既可逐项复制，也可复制形如 H: 0°, S: 100%, L: 50% 的标签式结果；“复制全部”会同时带上 RGB、HEX 与当前 HSL 数值。HSL 的复制结果不是现成的 CSS hsl() 声明，如需写入样式，应自行整理为 hsl(H S% L%)，并先按“须知”核对数值口径。
指南
按步骤完成操作，并通过示例核对输入与结果。
已有设计色值时，把六位 HEX（例如 #FF0000）填入 HEX 输入框；只有通道值时，分别拖动 R、G、B 滑块。输入被识别后，预览和另一侧数值会立即同步。
先看预览色块，再核对 HEX 和 RGB 是否与原始标注一致。以 #FF0000 为例，页面显示 RGB 为 255、0、0，当前 HSL 区显示 H 0°、S 100%、L 50%。灰色 #808080 则显示 RGB 128、128、128，H 0°、S 0%、L 50%。
需要网页 RGB 写法时复制 RGB 区结果；需要设计标注时可复制 HEX；需要保存全部通道时使用“复制全部”。分享当前状态时，页面会以当前 HEX 作为可恢复的颜色参数。
需要围绕一个颜色调节色相、饱和度或亮度时，可直接拖动 H、S、L 滑块。每次变化都会重新计算 RGB、HEX 与预览。一个容易复算的例子是把 H 设为 120°、S 设为 100%、L 设为 25%，页面会得到 RGB 0、128、0 和 HEX #008000。若只想快速试色，也可点击常用颜色色块或打开系统取色器；调整后再复制最终需要的格式。
连续比较多个方案时，建议记录 HEX 或 RGB 作为主值，因为这两种输出在本页都是整数通道，便于逐项复核。HSL 方向的口径差异和往返误差见“须知”。
场景
查看这项工具在不同工作与生活流程中的用法。
拿到 HEX 品牌色或界面色后，输入色值并复制对应的 rgb(...)，同时保留 HEX 方便与设计稿逐字核对。若项目需要 CSS HSL，应根据标准口径再次确认饱和度。
在交互界面或移动端原型配色时，可固定色相并调整 S、L，观察预览如何变化，再以生成的 HEX 或 RGB 保存候选色。这样比逐个猜测三个 RGB 通道更便于控制调色方向。
设计与开发使用不同格式时，可把双方给出的颜色先还原为相同的 HEX/RGB 数值。复制全部结果可用于短记录，但交付前仍应明确采用哪一种格式与是否包含透明度。
问答
集中解答高频疑问与容易混淆的问题。
正确换算时不会，它们只是同一 sRGB 颜色的不同表示方式。HEX 直接编码 RGB 通道，HSL 则换用色相、饱和度和亮度坐标；显示设备造成的观感差异不属于格式换算。
不是。两者都使用色相和饱和度，但第三个分量分别是亮度 L 与明度/值 B/V，饱和度的计算口径也不同。不能只把字母 L 改成 B 或 V。
因为 S 为 0 时，灰色不受色相影响，H 实际上没有作用。页面用 0° 作为数值显示；把灰色的 H 改成其他角度而保持 S 为 0，预览仍是同一灰色。
因为本页复制的是带标签的阅读格式，例如 H: 120°, S: 100%, L: 25%，不是完整函数。写 CSS 时需整理为 hsl(120 100% 25%)，并按下方须知核对该值是否符合目标系统的 HSL 口径。
须知
使用前了解适用范围、结果限制与必要提醒。
当前 RGB→HSL 的饱和度显示与标准 CSS HSL 不完全一致。实测页面在从 RGB/HEX 正向计算时读取的是 HSB/HSV 饱和度，同时读取 HSL 亮度；反向 HSL→RGB 则按 HSL 解释。因此对部分颜色不是对称往返。例如输入
#3B82F6，页面当前显示 H 217°、S 76%、L 60%；按 W3C HSL 公式，四舍五入后的饱和度约为 91%。把页面显示的 217°、76%、60% 再从 HSL 方向换回，会得到#4B87E7，并非原色。需要标准 CSS HSL、设计令牌或自动化数据时，请不要把正向 HSL 结果直接作为最终值，应另行按标准算法校验。
#RRGGBB。输入未被识别时，页面会保留上一次有效转换结果，应以预览和同步后的 RGB 数值判断是否已经生效。推荐
查找相关工具、专题与可用的 API 能力。