颜色转换器 🔒 您的数据不会离开您的浏览器。
HEX ↔ RGB ↔ HSL，附实时预览和取色器。
对比度检查
—
对比度
这是一段用于预览对比度的示例文字。
这是一段用于预览对比度的示例文字。
深浅色阶
点击某一色阶即可将其设为当前颜色。
关于此工具
以任意 CSS 格式粘贴颜色——hex（#1e90ff 或 #19f）、rgb()、hsl() 或如 dodgerblue 的颜色名——即可得到所有格式，一键复制并附实时色板。HEX 是设计工具的导出格式，RGB 是 canvas 和 JS API 的输入格式，HSL 则最适合人类理解（色相、饱和度、亮度）。
转换使用浏览器自身的 CSS 引擎，样式表里合法的写法这里都支持——包括现代语法。100% 客户端运行。
常见问题
我的颜色数据会被发送到任何地方吗？
不会。所有转换、对比度检查和色阶都在你的浏览器本地计算——你输入的任何内容都不会离开你的设备。
HSL 和 HSV 有什么区别？
两者都描述色相和饱和度，但 HSL 的第三个值是“明度”（离黑或白有多近），而 HSV 的第三个值是“亮度”（只关注离黑有多近，顶部始终是最亮）。设计工具的取色器通常用 HSV，而 CSS 惯例通常用 HSL。
为什么我的十六进制颜色码是 8 位而不是 6 位？
多出的一对数字用来表示 alpha（透明度），即 #rrggbbaa。只有当输入颜色的 alpha 通道小于 1 时才会出现——完全不透明的颜色仍是 6 位。
对比度检查下方的 AA 和 AAA 标签是什么意思？
这些是 WCAG 2 的对比度门槛：AA 是大多数网站应达到的最低标准（正文 4.5:1，大字或界面元素 3:1），AAA 是更严格的目标（7:1 / 4.5:1）。绿色标签表示你的前景/背景配色通过了该等级。
OKLCH 是什么？为什么要用它而不是 HSL？
OKLCH 是一种感知均匀的色彩空间——明度或彩度上的相等步长在人眼看来差异也相等，而 HSL 无法保证这一点。它在现代 CSS 中日益流行，用于构建不会出现意外暗斑或浑浊的色阶和渐变。