HEX、RGB、HSL 怎么互转？颜色取色器的透明度与名称边界

给按钮配色时，设计稿可能写着 #336699，样式表却需要 rgb()；调浅调深时，又希望直接改 HSL 的明度。宝塔拨测的“颜色取色器”把这些表示放在同一页，输入一个色值，就能查看其他字段。使用时要区分三件事：数值表示是否对应、透明度有没有保留、屏幕和印刷最终呈现怎样的颜色。

从一个确定的 HEX 值开始

打开“颜色取色器”，在 HEX 一栏输入 #336699，离开输入框后核对 RGB 和 HSL。本次 RGB 为 rgb(51, 102, 153)，HSL 为 hsl(210, 50%, 40%)，上方色块同步呈现蓝色。

HEX 的六位数字每两位表示一个红、绿、蓝分量。这里 33、66、99 换成十进制就是 51、102、153。RGB 与这个 HEX 值对应的是相同的 sRGB 颜色，改变的是写法。HSL 则按色相、饱和度、明度来表达，更方便围绕同一色相调整配色。

复制时选择目标系统支持的那一栏。普通网页可以使用 HEX 或 RGB；如果某个配置项明确要求六位十六进制，就不要把完整的 hsl(...) 放进去。每栏右侧都有复制图标，复制后也应查看粘贴出来的完整字符串，确认没有混入字段名或遗漏井号。

NAME 不一定是等值替换

同一张图里，NAME 显示为 steelblue，但 CSS 标准里的 steelblue 对应 #4682b4，并不等于输入的 #336699。因此本次名称结果只能当作相近颜色的参考，不能直接代替原始 HEX 来保留精确配色。

需要对齐品牌色、按钮色或设计标注时，保留具体的 HEX 或 RGB 数值。不要因为两个色块看起来接近，就把数值改成一个更好记的英文名称。页面还会显示 HWB 和 LCH；这些字段方便查看不同表示，但接收方是否支持相应语法，仍要在目标页面中核对。

带透明度的输入要另外检查

将 RGB 一栏改为 rgba(51, 102, 153, 0.5)。本次输入框保留了这段字符串，HEX 仍然是六位的 #336699，其他颜色字段也没有显示 alpha 信息。

这一步不能作为“透明度已经在所有格式间保留”的证明。六位 HEX 本身只包含三个颜色分量；CSS 也有包含 alpha 的八位 HEX 写法，但本次页面没有生成对应的八位结果。需要半透明背景时，应在目标样式中保留明确的 alpha，并检查它叠在实际底色上的效果，避免只复制六位 HEX 后得到不透明颜色。

透明度会影响颜色与背景的混合。即使 RGB 分量相同，放在白底、深色底或图片上，视觉结果也会不同。这里的换算数值不能代替目标页面中的实际预览。

CMYK 结果不等于印刷校色

在 CMYK 一栏输入 cmyk(100%, 0%, 0%, 0%)，本次得到 #00ffff、rgb(0, 255, 255)，NAME 为 cyan。

这说明当前工具可以按其模型给出对应数值。页面没有提供打印机、纸张、油墨或 ICC 配置文件选项，因此不能据此判断实物印刷一定呈现屏幕上的颜色，也不要将这里的 cmyk(...) 直接视为所有浏览器都支持的 CSS 写法。

做网页配色时，优先把已核对的 HEX、RGB 或 HSL 放回页面查看；准备印刷素材时，则把颜色值交给支持实际输出配置的设计流程继续确认。屏幕亮度、色彩管理和背景都可能影响观感，取色器解决的是颜色数值的输入与转换。