为什么 HSL 的亮度和眼睛看到的明暗对不上？

因为 HSL 的亮度只是最大与最小通道的简单平均，不是人眼视觉的模型。hsl(60 100% 50%) 是黄色，hsl(240 100% 50%) 是蓝色，两者都自称 50% 亮度，而黄色看起来大约亮六倍。OKLCH 的亮度是感知意义上的，所以同一个 L 值在不同色相下看起来一样亮。

对比度到底要达到多少？

正文 4.5:1，18pt 或 14pt 粗体以上 3:1，即达到 WCAG AA；7:1 达到 AAA。承载信息的界面控件和图形需要 3:1。低于 3:1 则任何标准都不满足。

可以。当前所有浏览器都支持，对更老的环境用 @supports 或在前面先写一条十六进制声明即可优雅降级。尤其值得为生成色阶而切换过去——用 HSL 生成的色阶，每一档看起来的间距是不均匀的。

在 HEX、RGB、HSL、HWB、OKLCH 之间互转，并检查对比度。

浏览器本地运行图片与颜色 824

永和九年岁在癸丑

颜色取色

hex: #3b82f6
rgb: rgb(59 130 246)
hsl: hsl(217.2 91.2% 59.8%)
hwb: hwb(217.2 23.1% 3.5%)
oklch: oklch(62.3% 0.188 259.8)

永和作为白底上的文字3.68:1

永和作为黑底上的文字5.71:1

读入样式表里可能出现的任意一种颜色记法，给出其余全部记法，并附上与黑色和白色的对比度。之所以包含 OKLCH，是因为它是唯一能让「调亮一点」或「调暗一点」之后看起来仍然是同一个颜色的记法——而这正是 HSL 出了名做不到的：两个 HSL 亮度相同的颜色，看上去的明暗可以差出好几倍。

哪也没去。本工具完全在你的浏览器里运行：你粘贴的文本由页面处理，不会传输到任何服务器，也不会写进任何日志。

当一次运行消耗积分时，会向你自己的历史里保存一行摘要，方便回头查找。摘要记录的是这次运行的形态——大小、数量、你查询的值——而不是你粘贴的内容。

本工具完全免费，不需要登录，也不消耗积分。

为什么 HSL 的亮度和眼睛看到的明暗对不上？: 因为 HSL 的亮度只是最大与最小通道的简单平均，不是人眼视觉的模型。hsl(60 100% 50%) 是黄色，hsl(240 100% 50%) 是蓝色，两者都自称 50% 亮度，而黄色看起来大约亮六倍。OKLCH 的亮度是感知意义上的，所以同一个 L 值在不同色相下看起来一样亮。
对比度到底要达到多少？: 正文 4.5:1，18pt 或 14pt 粗体以上 3:1，即达到 WCAG AA；7:1 达到 AAA。承载信息的界面控件和图形需要 3:1。低于 3:1 则任何标准都不满足。
OKLCH 现在能用在生产环境吗？: 可以。当前所有浏览器都支持，对更老的环境用 @supports 或在前面先写一条十六进制声明即可优雅降级。尤其值得为生成色阶而切换过去——用 HSL 生成的色阶，每一档看起来的间距是不均匀的。

本工具是独立实现，并未打包第三方库。Qix-/color-convert（MIT）在代码层面做的是同一件事——如果你需要在自己的程序里实现它，从那里开始，而不是调用一个网页。