颜色预览
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
工具说明
关于颜色转换器
Color Converter 用来在 HEX、RGB、HSL 和 HSV 之间换算色值，适合前端样式、设计标注和主题变量整理。
输入 #4f46e5、rgb(...) 或 hsl(...) 后，工具会归一化为常用格式，并显示可复制的结果。
如何使用 Color Converter
- 粘贴 HEX、RGB、RGBA、HSL 或 HSLA 色值。
- 点击转换，查看 HEX、RGB、HSL 和 HSV 输出。
- 使用色块预览确认颜色，再复制单个格式或全部格式。
常见使用场景
- 把设计稿里的 HEX 转为 CSS rgb() 或 hsl()。
- 根据 HSL 调整明度和饱和度，快速试出 hover 色。
- 整理主题 token 时统一大小写和格式。
色值格式和注意点
HEX、RGB、HSL 和 HSV 表达的是同一颜色的不同坐标。当前转换保留 RGB 颜色本身，RGBA/HSLA 输入中的 alpha 会被接受但不会在输出中保留。
- 3 位 HEX 会展开为 6 位 HEX。
- RGB 通道必须在 0 到 255 之间。
- HSL 的 S/L 使用百分比，H 会按 0 到 360 度循环。
- HSV 常用于取色器，HSL 更常用于 CSS 主题微调。
颜色转换常见问题
- 支持 HEX to RGB 和 RGB to HEX 吗？
- 支持。输入 HEX 会得到 RGB/HSL/HSV，输入 RGB 也会得到 HEX/HSL/HSV。
- 为什么 alpha 没有输出？
- 这个工具当前聚焦不透明颜色的格式换算，RGBA/HSLA 的 alpha 会被忽略。
- 颜色会上传吗？
- 不会。解析、转换和复制都在浏览器本地完成。
颜色转换与可读性
格式转换不会自动保证对比度。用于按钮、正文或链接前，仍要在真实背景上检查 WCAG 对比度、品牌一致性和暗浅色状态。
CSS 颜色格式选择指南
同一个颜色可以写成 HEX、RGB、HSL 或 HSV，但不同格式适合不同维护场景。
- 设计交付和静态 token 常用 HEX，短且稳定。
- 需要透明度或动态拼接时，CSS rgb() / hsl() 更方便。
- 做 hover、active、浅深变体时，HSL 的 hue、saturation、lightness 比直接改 RGB 更容易控制。
上线前的颜色可访问性检查
颜色转换只保证数值等价，不保证文字可读、状态清晰或对比度达标。
- 正文和按钮文字要在真实背景上检查 WCAG 对比度。
- 不要只靠颜色表达错误、成功或禁用状态，还要有文字、图标或形状差异。
- 品牌色用于链接或 focus ring 时，要同时检查 hover、active、disabled 和高亮状态。