使用方法
- 输入颜色代码
输入任何格式的颜色代码（HEX、RGB、HSL或CMYK）。
- 查看预览
颜色预览自动显示，直观查看颜色效果。
- 复制转换结果
点击计算按钮，查看所有格式的颜色代码并一键复制。
什么是颜色代码转换？
颜色代码转换是把同一种颜色用HEX、RGB、HSL等不同的表示体系互相转换的操作。显示器屏幕通过混合光的三原色——红、绿、蓝来生成颜色，因此所有颜色最终都可以归结为RGB三个通道的强度。HEX是把这些RGB值压缩成十六进制6位（#RRGGBB）的表示，而HSL则按照人眼感知颜色的方式，用色相环角度、饱和度和亮度重新组织的表示。
为什么需要转换
- 编写CSS — 拿到设计稿的HEX代码后，转换成便于调整透明度的RGB来使用。
- 颜色调整 — 只想稍微降低亮度时，转换成HSL后只需调整一个L值即可。
- 协作 — 让设计师的Figma HEX、开发者的RGB变量和印刷团队的颜色标准保持一致。
无论以哪种格式输入，本转换器都会一次性计算出其余所有格式，并以预览显示实际颜色。
计算公式
HEX → RGB 把十六进制每两位拆开，转换成十进制。
R = parseInt(hex[0:2], 16)，G、B同样计算。例：#FF5733 → FF=255、57=87、33=51 → RGB(255, 87, 51)。
RGB → HSL 先把各通道归一化到0~1，再从亮度开始求。
L = (max + min) / 2S = delta / (2 − max − min)（当L > 0.5时）
其中 delta = max − min。上例中max=1、min=0.2 → L = 0.6 (60%)、S = 0.8/0.8 = 100%、色相角 H ≈ 11°，于是转换为 HSL(11°, 100%, 60%)。
常见问题
HEX和RGB有什么区别？
HEX用十六进制表示颜色（#FF5733），RGB则用0-255范围的十进制表示红、绿、蓝的值（255, 87, 51）。它们是同一种颜色的两种写法。
如何把HEX代码转换成RGB？
把#RRGGBB每两位拆开，将十六进制转换成十进制即可。例如#FF5733中FF=255、57=87、33=51，所以是RGB(255, 87, 51)。每一组代表从00（0）到FF（255）的通道强度。
什么时候用CMYK？
CMYK是混合青、品红、黄、黑墨水的印刷用颜色模型。网页和屏幕使用做加法叠加光线的RGB/HEX，制作印刷品时则转换成做叠加墨水的CMYK。由于两者的色域不同，屏幕上的颜色在印刷时可能略有差异。
HSL颜色模型有什么优点？
HSL由色相（Hue）、饱和度（Saturation）、亮度（Lightness）构成，可以直观地调整颜色。例如只降低亮度（L）值，就能在保持色调的同时轻松做出更暗的变体色，便于制作悬停效果和配色方案。
HSL中的色相（H）、饱和度（S）、亮度（L）各表示什么？
色相（H）是0~360度的色相环角度，0°为红、120°为绿、240°为蓝。饱和度（S）是0~100%的颜色鲜艳度，0%为灰色，100%为最鲜明的颜色。亮度（L）是0~100%的明暗度，0%为黑、100%为白、50%为最纯的颜色。
白色和黑色如何表示？
白色是所有通道都为最大值的#FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%)，黑色是所有通道都为0的#000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%)。灰色系的饱和度（S）为0%，只有亮度（L）不同。
RGB值超出0~255范围会怎样？
每个通道在低于0时会自动修正（clamp）为0，超过255时修正为255，然后再转换成HEX。例如RGB(300, -10, 128)会被处理成RGB(255, 0, 128)，即#FF0080。
可以直接复制转换结果吗？
可以。点击转换后的HEX、RGB、HSL代码即可复制到剪贴板，并通过颜色预览用眼睛确认实际颜色，方便直接粘贴到CSS或设计工具中。
2026年设备规格