文章
面向网页的颜色工具：hex、调色板与无障碍
为网站挑选颜色看起来很简单，直到你面对用不同方式描述同一事物的 hex 代码、RGB 三元组和 HSL 角度。本文解释这些格式之间的关系，如何把一种品牌色变成一套可用的调色板，以及如何确保结果对色觉不同的人依然易读。
hex、RGB 和 HSL 描述的是同一种颜色
屏幕上的颜色由红、绿、蓝三种光混合而成。hex 表示法把这三个通道写成一个六字符的代码，例如 #2563eb，其中每两个字符为一个通道，取值从 00 到 ff。RGB 把同样的三个数字写成 0 到 255 的十进制，更易读，但并没有多说什么。HSL 采用另一种视角：它用色相（在色轮上从 0 到 360 度的位置）、饱和度（颜色有多鲜艳）和明度（离白或黑有多近）来描述一种颜色。当设计师想微调一种颜色时往往会选用 HSL，因为提高明度或移动色相是一次直观的改动，而不是三个相互牵连的数字。转换器让你在三者之间来回切换，于是你可以用一种格式读取一个值，再用另一种格式使用它。
把一种颜色变成一套调色板
单单一种品牌色往往不够。一套可用的调色板通常需要一个主色、一两个强调色，以及一组用于文字和背景的中性灰。颜色之间的关系遵循色轮上的简单规则：互补色彼此相对，类似色彼此相邻以营造平和感，三色组把三种颜色均匀分布，在不冲突的情况下形成对比。配色工具把这些规则应用到你的起始色上，并给出对应的 hex 代码，于是你不必手算角度。如果你已经有一张你喜欢其氛围的图片，调色板提取工具会从中读出主导颜色，这是以照片或标志为基础来搭建站点的快捷方式。
对比度与色盲
在你屏幕上好看的调色板，仍可能让读者看不清。大约每十二名男性中有一人、每两百名女性中有一人存在某种形式的色觉缺陷，最常见的是难以区分红色和绿色。如果你提示错误的唯一信号是绿色按钮上的红色文字，这些读者就会错过它。解决办法不是避免使用颜色，而是绝不只依赖颜色：把它和图标、标签或形状搭配起来，并在文字与其背景之间保持足够的明度对比。色盲模拟器会显示你的调色板在常见色觉类型下的样子，于是你能在上线之前发现问题，而不是等收到投诉之后。
在浏览器里完成这一切
这些步骤都不需要服务器。转换一个 hex 代码、生成一套配色、从图片中读取颜色以及模拟色盲，都是浏览器瞬间就能处理的小型计算。当你取色的图片是一份尚未发布的设计或一个客户的标志时，这一点很重要：使用这里的工具，文件留在你的设备上，什么都不会上传。你能得到与在线服务相同的结果，而无需交出作品。颜色转换器、配色生成器、调色板提取工具和色盲模拟器都在本地运行，页面加载完毕后即使离线也以同样的方式工作。
OKLCH 与更宽广的色彩空间
Hex、RGB 和 HSL 描述的颜色都在 sRGB 色域范围内，这是屏幕多年来一直使用的标准。新型显示器能呈现更多颜色，CSS 现在可以通过 color() 函数和 Display P3 色彩空间来访问这些颜色，从而加入 sRGB 无法表示的鲜艳绿色和红色。更根本的变化是 OKLCH，它将颜色写成亮度、饱和度和色相的组合，能够更准确地反映人眼对亮度的实际感知。在 HSL 中，同样设定 50% 亮度的黄色和蓝色看起来差别极大：黄色显得明亮，蓝色显得暗沉。而在 OKLCH 中，固定亮度值、仅改变色相时，视觉感知到的亮度保持一致。这使得构建调色板时，只需锁定一个数值就能让每个色阶达到相同的对比度目标，而不必逐一手动调整每种颜色。
本文涉及的工具
常见问题
hex 和 RGB 有什么区别？
它们是书写同一种颜色的两种方式。hex 把红、绿、蓝三个通道打包成一个十六进制的六字符代码，而 RGB 把同样的三个通道列成从 0 到 255 的十进制数字。#ff0000 和 rgb(255, 0, 0) 是完全相同的红色。hex 紧凑，在 CSS 和设计文件中很常见，RGB 一眼看上去更易读，而在两者之间转换不会改变颜色本身的任何东西。
我怎么知道我的颜色对色盲用户是否易读？
把你的调色板放进色盲模拟器，它会把你的颜色重新绘制成具有每种常见色觉类型的人所看到的样子。留意那些会塌缩成同一色调的搭配，尤其是红色和绿色。最稳妥的习惯是绝不把颜色当作唯一的提示：用文字、图标或图案来支撑它，并在前景与背景之间保持清晰的明度差异，这样即使色相没有传达出来，含义也能留存。