颜色格式转换
粘贴任意 CSS 格式的颜色，即可得到其他所有格式以及对比度。
粘贴 HEX、rgb()、hsl()、hwb() 或 CSS 颜色名称，或选取一种颜色
浅色和深色
数值
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- 仅为近似值。印刷颜色取决于油墨和纸张，请向印刷厂索取准确数值。
- OKLCH
- oklch(52.35% 0.1965 267.75)
- 最接近的 CSS 名称
- royalblue
对比度（WCAG）
该颜色的文字在各背景上的效果。普通文字需要 4.5:1 达到 AA、7:1 达到 AAA；大号文字（18pt，或 14pt 粗体）需要 3:1 和 4.5:1。
白色背景
大号文字
敏捷的棕色狐狸跳过了懒狗
5.71:1
- AA 普通 通过
- AAA 普通 未通过
- AA 大号 通过
- AAA 大号 通过
黑色背景
大号文字
敏捷的棕色狐狸跳过了懒狗
3.68:1
- AA 普通 未通过
- AAA 普通 未通过
- AA 大号 通过
- AAA 大号 未通过
#ffffff 背景
大号文字
敏捷的棕色狐狸跳过了懒狗
5.71:1
- AA 普通 通过
- AAA 普通 未通过
- AA 大号 通过
- AAA 大号 通过
如何使用 颜色转换
输入颜色
粘贴 HEX 代码、rgb()、hsl()、hwb() 或 tomato 这样的名称，或用取色器选取颜色。
复制所需格式
输入时所有格式都会实时更新。点击对应按钮复制任意格式，或为大号复制按钮设置常用格式。
检查对比度
查看在白色、黑色以及你所选背景上的 WCAG 对比度，并显示普通文字和大号文字的 AA 与 AAA 结果。
为什么选择 Utils365
识别任意 CSS 颜色
3、4、6 和 8 位 HEX，旧的逗号语法或新的空格语法的 rgb() 和 hsl()，hwb()，百分比，色相单位，以及全部 148 个颜色名称。
也支持现代格式
获取用于设计系统和广色域 CSS 的 OKLCH、用于取色器的 HWB 和 HSV，以及用于半透明颜色的带透明度 HEX。
内置无障碍检查
对比度严格遵循 WCAG 2，绝不会向上取整变成通过，所以 4.49:1 不会被当作 4.5:1。
浅色和深色
色块下方有五级更浅和五级更深的颜色。点击其中一个即可设为当前颜色。
常见问题
HEX 和 RGB 有什么区别？
颜色本身没有区别。两者都用 0 到 255 表示红、绿、蓝。HEX 把每个值写成两位十六进制数，所以 rgb(58, 91, 217) 就是 #3a5bd9。HEX 更短，rgb() 更易读、更方便手动调整。
什么是 HSL？
色相、饱和度和亮度。色相是色轮上的位置，以度为单位（0 为红色，120 为绿色，240 为蓝色），饱和度表示鲜艳程度，亮度从 0% 的黑色到 100% 的白色。用它很容易写出某个颜色更浅、更深或更柔和的版本。
为什么 CMYK 与打印出来的颜色不一致？
屏幕混合的是光，打印机混合的是油墨，结果取决于油墨、纸张和打印机配置文件。这里显示的 CMYK 使用简单的标准公式，请把它当作参考起点，并向印刷厂索取准确数值。
什么是 WCAG 对比度？
衡量两种颜色亮度差异的指标，从 1:1（相同）到 21:1（白底黑字）。WCAG AA 要求普通文字至少 4.5:1、大号文字至少 3:1；AAA 要求 7:1 和 4.5:1。
什么是 OKLCH？
一种较新的 CSS 颜色写法，按亮度、色度和色相表示，基于人眼对颜色的感知。改变亮度时色相看起来保持不变，因此在设计系统和色阶中很受欢迎。
颜色名称是怎么得出的？
如果颜色与 148 个 CSS 颜色名称之一完全一致，就显示该名称。否则显示视觉上最接近的名称，方便用文字描述颜色。