# 颜色转换器

在 HEX、RGB、HSL、HWB 和 OKLCH 之间转换颜色，检查它与背景的 WCAG 对比度，还能由它生成 Material 3 色调调色板。

https://codeknife.dev/zh/yanse-zhuanhuanqi/

## 功能

在 HEX、RGB、HSL、HWB 和 OKLCH 之间转换颜色，检查它与背景的 WCAG 对比度，并由它生成 Material 3 色调调色板。所有处理都在浏览器中完成。

## 使用方法

1. 用 hex（`#36c`、`#3366cc`）或 `rgb()`、`hsl()`、`hwb()`、`oklch()` 输入颜色。
2. 选择**转换**、**对比度**或**调色板**。选择对比度时会出现背景色输入框。
3. 复制或下载结果，或发送到其他工具。

## 示例

`#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 个色调。背后的颜色库只在你选择此模式时才加载。