颜色格式转换器
颜色
用原生颜色选择器选色或粘贴 HEX 值，立即看到所有常用 CSS 格式 — HEX、现代空格分隔 RGB、传统逗号 RGB、HSL、HSV、OKLCH（现代 CSS 推崇的感知均匀色彩空间）以及可直接粘贴的 CSS 变量。每个值都有独立的复制按钮。
—
预览
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - CSS 变量
--color: #3B82F6;
使用方法
- 用选择器或粘贴 HEX 值（3 位或 6 位，# 可省略）。
- 所有格式实时更新。
- 用右侧的复制按钮复制需要的格式。
常见问题
- OKLCH 是什么？
- 感知均匀的色彩空间——数值距离与视觉距离一致。现代 CSS 原生支持，Figma 2024+ 等设计工具也在采用，便于得到顺滑的渐变与一致的对比度。
- 为什么有两行 RGB？
- 现代 CSS 用空格分隔 'rgb(59 130 246)'；旧 CSS / 老旧浏览器需要逗号 'rgb(59, 130, 246)'。颜色相同。
- 透明度（RGBA/HSLA）呢？
- 本工具专注不透明色。若需透明度，在现代语法后加 '/ 0.5'（例如 'rgb(59 130 246 / 0.5)'），或使用传统 'rgba(…, 0.5)'。
- HSV 与 HSB 一样吗？
- 一样——HSV（Value）与 HSB（Brightness）只是同一模型的不同名称。CSS 不直接接受 hsv()，样式表请用 HSL。