颜色格式转换：HEX / RGB / HSL / HSV
在线颜色转换工具：HEX、RGB、HSL、HSV 互转，取色器选色并生成明暗色阶与 CSS 变量，附与黑白文字的对比度检测。浏览器本地转换，不上传数据。
同一种颜色可以用不同格式表达：#185fa5（HEX）适合写进样式表，rgb(24, 95, 165) 便于做数值计算，hsl(210, 75%, 37%) 便于调整明暗与饱和度。设计稿、浏览器开发者工具与 CSS 代码之间经常需要互转。
本工具以取色器或任一格式输入颜色，其余格式实时同步。所有计算在浏览器本地完成，不上传任何数据。
三种格式各自的用途
- HEX：书写最短，是 CSS 与设计稿间传递色值的通用格式；6 位表示 RGB，8 位可附加透明度
- RGB：以红绿蓝三通道数值表示，便于按比例混合、计算平均值等程序化处理
- HSL：以「色相 / 饱和度 / 亮度」描述，调出同一色系的深浅色只需改亮度，做配色方案时最直观
- HSV：与 HSL 相似但亮度定义不同，常见于设计软件与取色面板
为什么设计时推荐 HSL
HEX 与 RGB 都是通道混合的描述方式，把主色变暗 20% 需要重新计算三个通道；而 HSL 只需把 L 值减 20。做按钮的 hover 态、边框与背景的深浅层次时，用 HSL 能保证色相一致、明度均匀，避免出现「同一色系但看起来不像一家人」的问题。
对比度为什么重要
WCAG 无障碍规范要求正文文字与背景的对比度至少达到 4.5:1，大号文字至少 3:1。对比度不足是色彩搭配中最常见的可访问性问题——视觉正常的人也可能在户外强光下看不清。本工具会直接给出该颜色与黑白文字的对比度及是否达标。
常见问题
HEX 可以简写吗？
可以。每两位相同的值可缩写为一位，如 #185fa5 无法缩写，而 #ffffff 可写为 #fff、#aabbcc 可写为 #abc。四位语法的第四位表示透明度。
HSL 的色相为什么是 0–360？
色相表示在色环上的角度位置：0 是红色，120 是绿色，240 是蓝色，360 回到红色。饱和度和亮度使用百分比，0% 饱和度就是灰色。
对比度多少才够用？
WCAG AA 级要求正文 4.5:1、大号文字 3:1；AAA 级更严，要求正文 7:1。仅作为装饰的图形与边框不受此约束。
为什么 RGB 值与设计软件不一致？
常见原因是色彩空间不同。设计软件可能使用 Display P3 等广色域空间，而网页默认按 sRGB 渲染，同一套数值在不同空间下视觉表现有差异。跨工具协作时请确认统一的色彩配置。