什么是HEX色码与HSL色值
HEX色码（十六进制颜色码）是RGB颜色模型在Web中的紧凑表示。标准六位格式如#1E90FF，每位十六进制数代表一个0–255的RGB分量：前两位红、中间两位绿、后两位蓝。三位缩写#abc等价于#aabbcc，适用于重复数字对。HEX不携带透明度信息（标准用法），且是人眼不易直接理解的原始RGB记法——改变任意一位数字，红、绿、蓝分量同时变化，难以预测最终视觉效果。
HSL（色相、饱和度、明度）是专为人类感知设计的颜色模型。色相（H）以0–360°表示色轮上的位置：0°红、120°绿、240°蓝。饱和度（S）0–100%表示灰到纯色的程度。明度（L）0–100%表示黑到白。调整明度或饱和度时，色相保持不变，这是设计师快速生成同色系变体的基础。HSL同样不包含alpha通道，始终对应完全不透明颜色。
转换方法：从十六进制到HSL的数学原理
HSL值无法直接从HEX得到，需要先转换为RGB，再应用RGB→HSL算法。
步骤1：HEX转RGB
将每两位十六进制数转换为十进制。例如#4f46e5：
- 红：
4f= 4×16 + 15 = 79 - 绿：
46= 4×16 + 6 = 70 - 蓝：
e5= 14×16 + 5 = 229
结果RGB (79, 70, 229)。
步骤2：RGB归一化
将每个分量除以255得到0–1范围小数：R'=79/255≈0.310, G'=70/255≈0.275, B'=229/255≈0.898。
步骤3：计算HSL
- 最大分量=max(R',G',B')，最小分量=min(R',G',B')，差值Δ=最大-最小。
- 明度L=(最大+最小)/2。
- 若Δ=0，饱和度为0，色相未定义（通常设为0）。
- 否则，饱和度S=Δ/(1-|2L-1|)。
- 色相H：若最大值是R'，H=60°×( (G'-B')/Δ mod 6 )；若最大值是G'，H=60°×( (B'-R')/Δ + 2 )；若最大值是B'，H=60°×( (R'-G')/Δ + 4 )。
本例中最大值B'≈0.898，最小值G'≈0.275，Δ≈0.623，L≈(0.898+0.275)/2≈0.586，S≈0.623/(1-|2×0.586-1|)=0.623/(1-0.172)=0.752→75.2%，H=60°×( (0.310-0.275)/0.623 +4 )=60°×(0.056+4)=243.4°。最终HSL(243°, 75%, 59%)。
本页自动执行此转换，即时显示结果。
为什么HSL比HEX更适合人工作业
前端开发者和UI设计师频繁使用HSL的场景包括：
- 主题系统与变量：用HSL定义CSS自定义属性（如
--primary: hsl(243°, 75%, 59%)），只需修改明度值即可生成hover态、禁用态，无需计算十六进制变体。 - 调色板生成：在色相轮上旋转固定度数（如30°、60°）获得互补、类比配色，始终保持饱和度与明度一致。
- 可访问性调整：WCAG对比度要求下，增加或减小明度值（保持色相不变）可快速获得符合AA/AAA标准的颜色，而HEX直接改数值很难控制亮度变化。
- 暗色模式：将同一色相的明度降低到20%–30%即可得到深色版本，避免手动对比HEX深浅。
HEX的原始RGB表示在这些任务中效率极低：每改变一个数字都会影响三个分量，且十六进制加减并不直观反映亮度高低。
边缘情况与注意事项
无效输入
本页只接受标准六位或三位十六进制码（可带或不带#）。若输入#GGG、12345或red，页面显示错误提示：“Enter a hex color like #4f46e5 or #abc.” 不进行模糊匹配。
三位缩写
#abc自动展开为#aabbcc，例如#fff→#ffffff→白。注意三位缩写不能表示任意颜色，仅当每对分量重复时才等价。
超出可见色域
用户在HSL或LAB、CMYK输入框中填入不可显示的数值时，页面会调整到最接近的可显示颜色。例如HSL色相360°以外的值（如400°）会先取模到0–360再转换；饱和度或明度超过100%被钳位。调整后HEX可能与原始意图略有偏差，这是色域限制的必然结果。
CMYK的局限
页面同时显示CMYK值，但强调这是屏幕估算，基于标准转换公式（RGB→CMY→加上黑色分量），未针对特定印刷机或墨水曲线校正。专业印刷仍需使用ICC配置文件。
无alpha通道
所有转换均假设完全透明（alpha=1）。如果输入包含八位十六进制（如#4f46e5ff），本页会忽略最后两位（无此功能介绍，但应认为未支持）。HSL本身也不支持alpha，如需要透明度应使用HSLA（需单独工具）。
其他颜色空间的一并展示
输入HEX后，页面不仅给出HSL，还同步显示HEX（重新规范化）、RGB（0–255整数）、HSV（色相0–360，饱和度0–100%，明度0–100%）、CMYK（0–100%）、LAB（L0–100，a、b*范围约-128–127）。这些输出可一键复制。其中HSV与HSL的S、V/L维度不同：HSV的明度V定义为最大RGB分量，而HSL的明度L为平均值。相同HEX在HSV中可能有不同视觉表现，设计师需知晓差异。
常见问题（FAQ）
问：六位HEX和三位HEX本质有什么区别？
答：三位缩写是六位的压缩形式，每个通道的数值每两位数相同。例如#a1b2c3不能简写，而#aabbcc可写为#abc。转换结果完全一致。
问：HSL的色相0°和360°是相同颜色吗？
答：是。色相环是循环的，0°和360°都对应红色。本页输出时色相取模360，范围0–359。
问：我输入了#000，HSL输出是什么？
答：#000为纯黑，RGB(0,0,0)。HSL计算中Δ=0，饱和度为0%，明度为0%。色相无意义，工具通常显示0°。
问：页面转换会消耗网络流量吗？
答：不会。所有数学计算在浏览器JavaScript中完成，输入不会上传到任何服务器，可离线使用。
问：为什么CMYK值与专业软件不同？
答：本页采用通用RGB→CMYK算法（不考虑色彩管理），而专业软件会针对特定印刷纸材和油墨配置文件进行转换。此处CMYK仅供屏幕参考，不能直接用于印刷作业。
问：我想从HSL反向得到HEX，这个页面支持吗？
答：本页专门设计为HEX→HSL方向。若需要反向转换，请使用本站的HSL→HEX页面。输入HSL值后自动显示对应HEX及所有其他格式。