颜色格式转换器
用原生颜色选择器选色或粘贴 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。
相关主题指南
相关工具
HSL 颜色选择器
拖动色相、饱和度、亮度、alpha 滑块选色 — 复制 HEX、RGB、HSL 或 Tailwind 任意值。
颜色 0 0
随机颜色生成器
以 HEX、RGB 或 HSL 批量生成随机颜色 —— 选择数量，一键复制任意值，并即时重新生成以获取设计灵感。
随机 0 0
OKLCH 颜色选择器
在感知均匀的 OKLCH 空间（明度 · 色度 · 色相）中选色 —— 并查看每个选择是否落在 sRGB 显示色域内。
颜色 0 0
CSS color-mix() 预览 (插值空间对比)
对比现代 CSS color-mix() 函数在不同插值空间 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) 下如何混合两种颜色 — 实时色卡、计算 hex、每个空间的完整渐变条以及可复制的 CSS。
颜色 0 0
波长转颜色（nm → sRGB）
把光的波长（380–780 nm，可见光）转换为近似的 sRGB 颜色，附可点击的彩虹渐变条，以及来自真实太阳光谱的 Fraunhofer 吸收线参考表。
颜色 0 0
CMYK ↔ RGB 颜色转换器（印刷色空间）
在屏幕用 RGB/hex 与印刷用 CMYK 百分比之间相互转换，支持 Simple、GCR（灰成分替换）和 UCR（底色去除）三种黑版生成策略，提供分色通道预览和总墨量读数。
颜色 0 0