颜色转换

功能特性

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

可视化取色器

实时预览效果

输出 CSS 变量

使用方法

1. 选择一个颜色（也可以点击台面、粘贴 HEX、使用取色器，或按空格键随机）。

2. HEX、RGB、HSL、OKLCH 全部格式双向实时换算。

3. 复制单个值或整段 CSS 变量；切换台面底色，在白、灰、深色环境下审视颜色。

关于这个工具

设计师凭眼睛选颜色，CSS 需要的是字符串，而不同工具使用的格式又各不相同。这个转换器让同一个颜色在 HEX、RGB、HSL 和 OKLCH 之间保持同步：修改任一字段或使用取色器，其余格式立即更新。HEX 和 RGB 描述红、绿、蓝三个通道；HSL 用色相、饱和度、亮度描述颜色，更方便手动调整；OKLCH 是 CSS Color Level 4 中的新感知格式，亮度的等量变化在人眼看来也是均匀的，因此更适合构建一致的配色体系。你可以复制单个值，也可以复制现成的 CSS 自定义属性块，并在白色、灰色或深色背景上预览颜色效果。

常见问题

在 CSS 里应该用哪种格式？

HEX 和 rgb() 所有浏览器都支持，适合固定颜色；想手动微调亮度或饱和度时 hsl() 更方便；oklch() 已被当前主流浏览器支持，由于亮度在感知上均匀，最适合系统化的配色。

为什么 HSL 亮度都是 50% 的颜色，看起来明暗差别很大？

HSL 只是 RGB 的数学重排，并不是人眼视觉模型，所以 50% 的黄色看起来比 50% 的蓝色亮得多。OKLCH 的亮度是按人眼感知设计的，这也是它越来越多地用于设计系统的原因。

为什么转换过去再转回来，数值会有一点点差别？

HEX 和 RGB 以 0 到 255 的整数存储，而 HSL 和 OKLCH 使用小数。换算时的四舍五入可能让某个通道相差一级，肉眼看不出区别。

能从屏幕其他地方取色吗？

在支持 EyeDropper API 的浏览器中（例如桌面版 Chrome 和 Edge），点击吸管按钮即可吸取屏幕上任意像素的颜色。其他浏览器会显示标准的颜色选择器。

CSS 变量块里包含什么？

它把同一个颜色以多种格式列为自定义属性，例如 --color-hex、--color-rgb、--color-hsl 和 --color-oklch，你可以把它们粘贴到 :root 中，按代码需要引用任意一种格式。

功能特性

使用方法

关于这个工具

常见问题

相关工具