颜色转换

HEX↔RGB↔HSL带取色器

加载中…

这个工具有帮助吗？

关于此工具

把HEX颜色代码转换成RGB、HSL数值,并计算白色文字和黑色文字哪个在其上更清晰。还会展示保持相同色相和饱和度、仅明度不同的六档色板,方便挑选设计配色时参考。

使用方法

  1. 点击取色器,或直接输入HEX数值(支持3位和6位)。
  2. RGB、HSL,以及适合CSS变量的记法(空格分隔的R G B)会立即显示在下方。
  3. 点击同一色相的六种明度变体之一,即可切换到该颜色。
  4. 在预览框下方查看白色文字和黑色文字哪个对比度更高,以及具体的对比度数值。

常见问题

这个工具支持哪些颜色格式?
接受HEX(3位或6位)作为输入,转换为RGB、HSL,以及空格分隔的'R G B'记法(用于像rgb(var(--x) / 0.5)这样的CSS变量)。不支持CMYK等印刷用格式。
对比度是怎么计算的?
用WCAG规范中的相对亮度公式算出每种颜色的亮度,再分别与白色、黑色背景配对计算对比度。数值越大,对比度越高,文字也越清晰。
六档明度变体是按什么标准生成的?
保持输入颜色的色相(H)和饱和度(S)不变,仅把明度(L)依次改为90/75/60/45/30/15%,生成六档色板。
输入的颜色值会发送到服务器吗?
不会。所有转换和对比度计算都在浏览器内完成,不会发送到服务器。

类似工具