输入
颜色
结果
HEX#7057FF
RGBrgb(112, 87, 255)
HSLhsl(249, 100%, 67%)

颜色格式转换器

颜色格式转换器支持将 HEX 颜色转换为 RGB、HSL 和 CSS 可用格式,适合前端样式和设计标注处理。

颜色格式转换器是什么

颜色格式转换器用于把 HEX 颜色转换为 RGB、HSL 和 CSS 可用色值。设计标注、组件开发、主题变量整理和颜色调试时,不同工具可能使用不同颜色格式,频繁手算会影响效率。

选择或输入颜色后,页面会同步展示多种格式。HEX 适合静态变量,RGB 常用于透明度组合,HSL 更适合调整色相、饱和度和亮度。工具可以帮助前端和设计在同一颜色语义下快速沟通。

核心功能

  • 支持通过颜色选择器选择 HEX 颜色。
  • 自动输出 HEX、RGB、HSL 等常见 CSS 格式。
  • 结果以卡片形式展示,便于快速扫描。
  • 适合主题色整理、设计还原、样式调试和文档标注。

适用场景

把设计稿中的 HEX 色值转换成 CSS rgb 或 hsl 写法。

整理品牌色、状态色、图表色和组件库主题变量。

调试 hover、active、disabled 等状态时快速确认颜色值。

使用建议

透明度场景可以在 RGB 基础上使用 rgba 或现代 rgb / alpha 写法。

HSL 适合做同色系深浅调整,但最终仍要检查对比度和可读性。

常见问题

HEX 和 RGB 表示的是同一种颜色吗?

是的,它们只是不同表达方式,转换后视觉颜色一致。

HSL 适合做什么?

HSL 更适合按色相、饱和度和亮度调整颜色,便于生成同系列色。