在一个面板中将任意颜色转换为所有 CSS 格式(HEX、RGB、HSL、HSV、OKLCH),并带透明度变体。
现代 CSS 提供了十几种方式来编写相同的颜色：#7C3AED、rgb(124, 58, 237)、hsl(262, 83%, 58%)、oklch(55% 0.24 293)，加上每种的 alpha 变体。您经常需要在它们之间进行转换——Figma 设计给您一个 OKLCH，您的代码库使用 HEX，您的主题变量偏好 HSL 用于悬停调整。颜色格式转换器在一个面板中完成所有转换。从本地颜色选择器选择颜色、以任何语法粘贴现有颜色或拖动 RGB 滑块调入一个。每个常见格式同时呈现：HEX（带 alpha）、rgb()/rgba()、hsl()/hsla()、hsv() 和 oklch()——加上一个 CSS 变量片段和计算的亮度值，用于快速对比数学。Alpha 通道从端到端受支持。每个格式都有自己的复制按钮用于一键使用，解析器接受本地颜色名称和 CSS 支持的所有内容。
同时显示 HEX、RGB/RGBA、HSL/HSLA、HSV 和 OKLCH——选择您的目标代码期望的任何格式，无需每次都重新转换。
接受 HEX（#abc 或 #aabbcc 或 #aabbccff）、rgb()/rgba()、hsl()/hsla()、oklch() 和本地颜色名称。粘贴 CSS 支持的任何内容。
处理现代 CSS 中使用的新 OKLCH 格式——感知一致的颜色空间，正在成为新的设计系统默认值。
每个输出都有自己的复制按钮。单击以获取代码所需的确切格式，无需手动选择。
调整红/绿/蓝/Alpha 滑块以微调。当您拖动时，每个格式都实时更新。
在每个格式中都处理透明度：#RRGGBBAA、rgba(...)、hsla(...)。设置一次，随处转换。
Figma 给您一个 OKLCH 或 HSL——粘贴它，复制等效的 HEX 用于您的 Tailwind 配置或 CSS 变量，无需离开浏览器。
拖动滑块以探索阴影，记下 OKLCH 值以获得系统设计系统调色板。
将品牌颜色转换为其 HSL 形式，以便您可以使用 hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) 用于悬停状态。
亮度字段提供 WCAG 对比度计算中使用的原始值——适用于 a11y 数学。
粘贴您正在阅读的 CSS 文件中的 oklch(...)，立即看到它实际产生的颜色。
单击 DevSuite Pro 停靠栏中的颜色格式图标。打开一个面板，显示颜色选择器、十六进制输入和 RGB 滑块。
使用颜色选择器、键入十六进制或粘贴任何 CSS 颜色字符串 (rgb(...)、oklch(...) 等)。颜色立即预览。
下面呈现每个格式：HEX、RGB、HSL、HSV、OKLCH、CSS 变量和亮度。当您调整时，所有格式保持同步。
拖动 R/G/B/A 滑块进行微调。非常适合调入与设计规范匹配的特定阴影。
单击您想要的格式行上的复制——该值以正确的语法落入您的剪贴板中。
