颜色转换器 (HEX, RGB, HSL, CMYK)

设计师必备。快速转换网页和打印的颜色代码。

在HEX、RGB、HSL和CMYK颜色格式之间进行转换。

输入任何颜色代码以获取其在其他格式中的等效值。包括颜色预览和复制按钮。

页面质量说明

  • 步骤与说明会和当前工具行为一起核对。
  • 浏览器限制、文件大小或兼容性差异会在相关位置标明。
  • 除非页面明确说明，否则文件和文本优先在本地浏览器中处理。

颜色格式详解

设计师和开发人员经常说着不同的语言。设计师可能使用 HSL 来进行直观的调色，而开发人员则需要 HEX 代码用于 CSS 或 RGB 值用于后端脚本。

此工具可在以下格式间转换：

  • HEX：网页设计中使用的标准 6 位代码（例如 #FF5733）。
  • RGB：红、绿、蓝数值 (0-255)，常用于数字显示。
  • HSL：色相、饱和度、亮度。最易读的格式，可以轻松创建颜色的“更亮”或“更暗”变体。

即时预览

眼见为实。当您输入时，我们展示颜色的实时大预览，以确保您没有输错。我们还展示文字在背景上的效果，帮助您及早发现可访问性问题。

核心功能

  • 多格式支持: 输入或粘贴十六进制代码、RGB字符串或HSL值，即时查看所有等效格式。
  • 对比度友好的预览: 带有浅色/深色文本覆盖的实时色板可帮助您查看颜色在品牌表面上是否清晰可读。
  • 可复制的令牌: 无需额外格式化或手动编辑即可获取十六进制、RGB、HSL或CSS变量片段。

常见问题

我可以粘贴哪些颜色格式？

支持HEX（#fff或#ffffff）、RGB（rgb(255, 255, 255)）和HSL（hsl(0, 0%, 100%)）。转换器会自动规范化每个输入。

它支持Alpha通道吗？

是的。提供#RRGGBBAA或rgba()/hsla()等格式以保持透明度。输出将反映相同的Alpha。

我可以将颜色重用为CSS变量吗？

是的。转换器生成可直接粘贴的自定义属性片段（例如--brand-color: 34 197 94），以便您可以将其放入Tailwind或原生CSS中。

相关文章

  • Free Color Converter Online: HEX to RGB, HSL, CMYK (2026 Guide)

    Stop guessing css color codes. Use our Color Converter to switch between HEX, RGB, HSL, and more instantly. Whether you are a UI designer ensuring brand consistency with web colors or a developer wrestling with design tokens, accurate color data is critical. But manually calculating these values is a headache. Here is how you can use the Color Converter as your goto color picker utility to str…

浏览完整工具目录