颜色选择器与转换工具

HEX 和 RGB 描述的是字面意义上完全相同的底层数值——要混合多少红、绿、蓝光——只是用两种针对不同用途的不同记法:HEX 把三个通道打包进一个紧凑的六字符字符串,便于作为一个 CSS 值粘贴,或者存进数据库的一列;RGB 则把三个数字分开写出来,当程序需要独立读取或操作每一个通道时更方便。HSL 又用一套完全不同、专门围绕人们实际思考颜色方式构建的坐标系统重新表述同一种颜色——色相(哪种颜色)、饱和度(有多鲜艳)、明度(有多接近白色或黑色)——之所以这样设计,正是因为"让它稍微亮一点"或者"让它柔和一点"在 HSL 里只需要调整一个数字,而在 RGB 里要达到同样的视觉效果,需要同时重新计算全部三个通道。

RGB、HSL 和 HSV 都是描述加色光的不同方式——通过直接发出红、绿、蓝光来产生颜色,这正是每一块屏幕的工作原理。CMYK 描述的是减色——青色、洋红、黄色和黑色油墨吸收某些波长的光,剩下的光从纸张反射出来,这是一个物理上完全不同的过程,能达到的色彩范围也比屏幕能产生的要窄。这正是为什么一个明亮、饱和的 RGB 颜色,尤其是某些鲜艳的蓝色和绿色,经常根本没有精确对应的 CMYK 版本——这种颜色单纯就落在了纸上油墨物理上能够还原的范围之外,这里显示的转换结果,是用标准算术方法得到的最接近的近似值,而不是经过专业色彩管理的精确匹配。一项真正重要的印刷工作,需要一份针对具体印刷机和纸张材质校准过的 ICC 色彩配置文件,这是一个独立的、比通用算术转换更繁复的过程。

WCAG 对比度完全是根据每种颜色的相对亮度计算的——这是一种从 RGB 通道推导出来的感知亮度度量,采用的公式给绿色分量的权重最高,因为人眼对这个波长最敏感——而不是根据两种颜色并排放在一起看起来有多鲜明、多不同。这会产生一种特定的、违背直觉的失败情形:两种饱和度高、看起来明显不同、但整体亮度相近的颜色,比如亮红色背景上的亮橙色文字,彼此之间的亮度对比可能几乎为零,尽管在正常视力看来两者显然是可以区分的,而这样的搭配对视力较弱、有色觉缺陷的人,或者仅仅是在阳光直射下看手机屏幕的人来说,确实会变得难以阅读,甚至完全无法阅读。这个比值衡量的正是对这些读者真正重要的那个对比度维度,即使它和一双视力健全的眼睛对这个配色的第一印象不一致。