如何使用颜色转换
- 在输入框中输入或粘贴颜色，也可以用取色器选取。只要是浏览器能识别的 CSS 颜色都可以：带或不带 # 的十六进制代码（
#2563eb、2563eb、简写的#f80，或带透明度的 8 位代码）、rgb()和hsl()值，以及tomato这样的颜色名称。 - 表格会把同一种颜色显示为 HEX、RGB、HSL、HSV/HSB 和 CMYK。点击所需格式旁边的复制即可。
- 在文字对比度（WCAG）中，两个方块分别展示该颜色上的白色文字和黑色文字，并给出对比度和达到的无障碍等级。
- 浅色调与暗色调以当前颜色为中心，从浅到深排列九个色块。点击色块即可把它设为当前颜色。
颜色格式说明
- HEX：用两位十六进制数（00–FF）分别表示红、绿、蓝。在
#ff8800中，红色 FF = 255，绿色 88 = 136，蓝色 00 = 0。三位代码是把每一位重复一次，所以#f80是同一种颜色。再加第四组数字表示不透明度，#2563eb80约为 50% 不透明。 - RGB：用 0–255 的十进制数表示同样的三个通道，例如
rgb(255, 136, 0)。屏幕通过混合红、绿、蓝三种光来显示颜色，所以 0, 0, 0 是黑色，255, 255, 255 是白色。 - HSL：色相（色环上的 0–360°，0 为红，120 为绿，240 为蓝）、饱和度和亮度。保持色相不变、只调亮度，就能得到更浅或更深的颜色，便于手动调整。亮度 100% 时一定是白色。
- HSV / HSB：色相、饱和度和明度（亮度），大多数设计软件的取色器都采用这种模型。饱和度和明度都为 100% 时就是纯色，而在 HSL 中，同样的纯色位于亮度 50%。
- CMYK：印刷使用的青、品红、黄、黑四色油墨。这里的数值来自简单的数学换算；实际印刷效果取决于纸张、油墨和色彩配置文件，准确的数值请向印刷厂确认。
示例
- 默认的蓝色
#2563eb等于rgb(37, 99, 235)、hsl(221, 83%, 53%)、hsv(221, 84%, 92%)和cmyk(84%, 58%, 0%, 8%)。它上面的白色文字对比度为 5.17:1（AA），黑色文字为 4.06:1（仅大号文字达到 AA）。 - 橙色按钮：
#ff8800上的白色文字只有 2.39:1，不达标；黑色文字则有 8.77:1（AAA）。这就是亮橙色和黄色背景通常搭配深色文字的原因。 - 灰色文字：
#777777与白色的对比度为 4.48:1，略低于正文所需的 4.5:1；深一级的#767676为 4.54:1，可以达标。 - 用一种颜色生成配色：
#2563eb的浅色调从#d3e0fb到#5182ef，暗色调从#1e4fbc到#07142f。每一级多混入 20% 的白色或黑色，便于统一挑选背景色、边框色和鼠标悬停色。
对比度结果的含义
《Web 内容无障碍指南》（WCAG 2）把对比度定义为两种颜色相对亮度之比，范围从 1:1（同一种颜色）到 21:1（白底黑字）。各等级含义如下：
- AAA：7:1 及以上，是正文的增强级要求。
- AA：4.5:1 及以上，是正文的最低要求。
- 仅大号文字达到 AA：3:1 到 4.5:1 之间，只适用于大号文字，即 18 磅（24px）及以上，或 14 磅（约 18.7px）及以上的粗体。
- 不达标：低于 3:1。
WCAG 还要求图标、输入框边框等重要的图形元素至少达到 3:1。在亮度公式中，绿色的权重远大于蓝色，所以纯黄色看起来很亮，纯蓝色看起来很暗。对比度按不透明的颜色计算，会忽略透明度。
小贴士
- 用 HSL 或 HSV 挑选颜色，再把 HEX 或 RGB 复制到 CSS 或设计文件中。所有格式表示的都是同一个 sRGB 颜色。
- 检查各种状态（正常、悬停、禁用）的对比度；不要只靠颜色传达含义，比如只用红色表示错误，请同时加上文字或图标。
- HSL 数值会四舍五入为整数，再转换回来时某个通道可能相差 1。需要完全一致时，请复制 HEX。
- HEX 的每一位都是十六进制数，
EB怎样变成 235 可以用进制转换器查看。如果还要设计深色模式，可以在屏幕分辨率页面查看当前浏览器是否偏好深色模式。
常见问题
HEX 和 RGB 有什么区别？
只是写法不同：HEX 用十六进制写出 0–255 的三个数值，RGB 用十进制。
为什么印出来的颜色和屏幕上不一样？
屏幕是发光显示的，能呈现一些油墨无法再现的鲜艳颜色。印刷厂会按自己的印刷机和纸张使用相应的配置文件进行转换，所以这里的 CMYK 数值只能作为起点。
可以输入较新的 CSS 颜色格式吗？
只要浏览器支持，就可以输入 hwb()、oklch() 等格式。颜色会被转换为表格中的标准 sRGB 数值，超出该范围的颜色会被截取到最接近的值。
达到 AA 就够了吗？
大多数无障碍政策和法规以 AA 级为准。AAA 更严格，但正文文字往往也能做到；对比度越高，在强烈阳光下看屏幕的人也越容易阅读。