颜色转换器
在 HEX、RGB、HSL、HWB 和 OKLCH 之间转换颜色，检查它与背景的 WCAG 对比度，还能由它生成 Material 3 色调调色板。
代码示例
可直接复制到你自己的项目中。每个示例只使用该语言的标准库，因此无需安装任何东西。
const foreground = '#3366cc'
const background = '#ffffff'
const luminance = (hex) => {
const [r, g, b] = [1, 3, 5].map((start) => {
const channel = parseInt(hex.slice(start, start + 2), 16) / 255
return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
})
return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)
// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))功能
在 HEX、RGB、HSL、HWB 和 OKLCH 之间转换颜色，检查它与背景的 WCAG 对比度，并由它生成 Material 3 色调调色板。所有处理都在浏览器中完成。
使用方法
- 用 hex（
#36c、#3366cc）或rgb()、hsl()、hwb()、oklch()输入颜色。 - 选择转换、对比度或调色板。选择对比度时会出现背景色输入框。
- 复制或下载结果，或发送到其他工具。
示例
#3366cc 即 rgb(51 102 204)、hsl(220 60% 50%)、hwb(220 20% 20%) 和 oklch(0.5325 0.1679 262.29)。它在白色上的对比度为 5.36:1，满足普通文字的 AA，但不满足 AAA。
须知
- 比值遵循 WCAG 2：先由线性 sRGB 求相对亮度，再算（较亮 + 0.05）/（较暗 + 0.05）。结果截断到两位小数，绝不会进位成“通过”。
- AA 要求普通文字 4.5:1、大号文字 3:1；AAA 要求 7:1 和 4.5:1。
- 数值会先取整到完整的 8 位通道，所以每一行描述的都是同一种 hex 颜色。超出 sRGB 的 OKLCH 颜色会被限制到最接近的可显示颜色。
- 调色板保留基准色的色相和彩度，并像 Material 3 一样列出 0、10、20 … 90、95、99、100 色调。
- 不支持颜色名称和 alpha 通道。
它能读取哪些颜色写法？
hex（#36c 或 #3366cc）以及 CSS 函数 rgb()、hsl()、hwb() 和 oklch()，数值之间用空格或逗号分隔。不支持颜色名称和透明度。结果以每种写法给出同一种颜色，并取整到完整的 sRGB 通道。
常见问题
WCAG 要求多大的对比度？
AA 要求普通文字 4.5:1，大号文字和界面组件 3:1；AAA 要求 7:1 和 4.5:1。比值只舍去不进位，所以 4.49 不算通过。
OKLCH 是什么，为什么用它？
OKLCH 在一个让相等步长看起来同样不同的色彩空间里，用明度、彩度和色相描述颜色。它适合构建色阶，也适合在不让色相漂移的情况下调整明度。
调色板模式做什么？
它生成 Material 3 色调调色板：保留基准色的色相和彩度，列出从 0（黑）到 100（白）的 13 个色调。背后的颜色库只在你选择此模式时才加载。