颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH、CMYK 颜色代码之间互相转换，还能检查文字与背景的对比度（WCAG）。
1. 输入颜色
粘贴颜色代码，或点击左侧的色块选择颜色。
例如：#FF6B35、rgb(255, 107, 53)、hsl(16, 100%, 60%)、C0 M58 Y79 K0、tomato
2. 转换结果
点右侧的按钮，即可复制成能直接粘贴到 CSS 里的格式。
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK（参考值）
- —
- CSS 颜色名称
- —
3. 检查对比度
按照 WCAG（网页无障碍标准），检查文字和背景的颜色搭配是否易于阅读。
输入的颜色用作
在上方输入颜色后，这里会显示示例。
对比度
—
- 常规文字 AA4.5 : 1 以上—
- 常规文字 AAA7 : 1 以上—
- 大号文字 AA3 : 1 以上—
- 大号文字 AAA4.5 : 1 以上—
大号文字指 18pt（24px）以上，或加粗且 14pt（约 18.7px）以上的文字。
转换在本设备上进行，输入的颜色不会发送到任何地方。
CMYK 是不使用印刷色彩配置（ICC 配置文件）计算出的参考值。交给印刷厂之前，请在设计软件中确认。
觉得好用的话，欢迎分享
使用方法
1. 输入颜色代码
在“颜色代码”栏中输入要转换的颜色代码（例如 #FF6B35）。一边输入，下方“转换结果”中就会显示 RGB、HSL、HSV、OKLCH、CMYK 和 CSS 颜色名称。
在左侧“颜色代码”栏中输入要转换的颜色代码（例如 #FF6B35）。一边输入，右侧“转换结果”中就会显示 RGB、HSL、HSV、OKLCH、CMYK 和 CSS 颜色名称。
2. 选择颜色输入
点按“颜色代码”栏左侧的色块，会打开选色窗口。所选颜色的代码会填入输入栏，结果也随之更新。
点击“颜色代码”栏左侧的色块，会打开选色窗口。所选颜色的代码会填入输入栏，结果也随之更新。
3. 复制结果
点按“转换结果”中“RGB”右侧的按钮，即可复制为 rgb(…) 格式。点按下方的“复制全部结果”，会把所有写法逐行复制。
点击“转换结果”中“RGB”右侧的按钮，即可复制为 rgb(…) 格式。点击下方的“复制全部结果”，会把所有写法逐行复制。
4. 检查对比度
在下方“检查对比度”中，点按“背景颜色”右侧的“黑色”。会显示黑色背景上的文字示例、对比度，以及常规文字和大号文字是否达到 AA、AAA 标准。
在下方“检查对比度”中，点击“背景颜色”右侧的“黑色”。会显示黑色背景上的文字示例、对比度，以及常规文字和大号文字是否达到 AA、AAA 标准。
适用场景
想把设计稿的颜色写进 CSS
粘贴从设计软件复制的 HEX，立刻得到 rgb()、hsl() 以及新的 oklch() 写法。
网页制作、应用开发人员
想确认文字颜色是否易读
只需输入文字和背景的颜色，就能知道对比度以及是否达到 WCAG 的 AA、AAA。
关注无障碍的设计师
想估算屏幕颜色对应的印刷 CMYK
制作传单或名片时，可以大致了解网页上的颜色换成 CMYK 是多少。
制作印刷品的人
想把品牌色整理成多种格式
用“复制全部结果”一次复制从 HEX 到 CMYK 的所有写法，贴到资料或品牌规范里。
宣传、品牌负责人
使用前须知
- CMYK 是计算得出的参考值。符合印刷厂色彩配置（ICC 配置文件）的准确数值，请在设计软件中确认。
- 想从图片中提取颜色时，请使用提取图片颜色。
- 无法转换为 PANTONE 等专色色号或孟塞尔值。
各种颜色代码写法的区别
屏幕上的颜色用光的三原色（红、绿、蓝）的强度来表示。HEX（#FF6B35）和 RGB（rgb(255, 107, 53)）是同一组数值分别用十六进制和十进制写出来的；HSL 和 HSV 则把它换算成“色相、饱和度、明度”，方便人来调整颜色。OKLCH 用接近人眼感受的亮度来表示，容易做出亮度统一的配色，新的 CSS 已开始使用。
CMYK 是印刷油墨（青、品红、黄、黑）的用量。屏幕的颜色是光，印刷用的是油墨，所以无法完全还原同一种颜色。本工具的 CMYK 是用常见公式算出的参考值。对比度用 1～21 表示文字与背景的亮度差，WCAG 规定常规文字 4.5 以上为 AA，7 以上为 AAA。
常见问题
整理了关于颜色代码转换和对比度的常见疑问。
输入的颜色会被发送到别处吗？
不会。转换和对比度计算都只在您设备的浏览器中进行。
可以用哪些写法输入？
可识别 #FF6B35、#F63 这样的 HEX（不带 # 也可以）、rgb()、rgba()、hsl()、hsla()、hsv()、hsb()、oklch()、cmyk()、“C0 M58 Y79 K0”，以及 tomato 这样的 CSS 颜色名称。只输入“255, 107, 53”这样的数字时按 RGB 识别。全角字符也可以。
带透明度（Alpha）的颜色也能转换吗？
可以。输入 #FF6B3580 这样的 8 位 HEX 或 rgba(255, 107, 53, 0.5) 时，HEX 输出 8 位，RGB、HSL、OKLCH 会带上不透明度。HSV 和 CMYK 没有表示不透明度的写法，只输出颜色。
转换成 HSL 再转回来，数值为什么差 1？
和其他网站、设计软件一样，HSL 和 HSV 会四舍五入为整数显示。从取整后的数值转回时，RGB 可能相差 1～2。需要精确数值时，请使用 HEX 或 RGB。
CMYK 的数值可以直接用于印刷吗？
请作为参考使用。实际印刷的颜色会因纸张、油墨和印刷厂的色彩配置（ICC 配置文件）而不同。本工具的数值是用不涉及色彩配置的通用公式计算的。交付印刷前，请在设计软件中或向印刷厂确认。
OKLCH 是什么？
用亮度（L）、彩度（C）、色相（H）表示颜色的写法，特点是接近人眼的感受。只要亮度数值相同，即使色相不同，看起来也差不多亮。在新版浏览器的 CSS 中可以用 oklch() 来写。
用 OKLCH 输入的颜色稍微变了。
OKLCH 可以写出普通屏幕（sRGB）显示不了的鲜艳颜色。遇到这种颜色，会保持亮度和色相不变，把彩度降到能显示的程度。此时输入栏下方会出现提示。
对比度的 AA、AAA 是什么意思？
是网页无障碍标准（WCAG 2）的达标等级。常规文字 4.5 以上为 AA，7 以上为 AAA；大号文字（18pt 以上，或加粗且 14pt 以上）3 以上为 AA，4.5 以上为 AAA。
对比度是 4.49，为什么不显示为 4.5？
为了不让差一点没达到标准的组合显示为“达标”，会保留两位小数、舍去其后的部分来显示，并按这个数值判定。
免费吗？
免费。无需注册，也没有广告。
其他工具
- 消费税计算器（含税⇔税前）
只需输入金额，立即算出税前金额、税额和含税金额。内置日本 10% 和 8%（轻减税率），也可以使用其他税率。
- 年龄计算器（周岁・年龄对照表）
只需选择出生日期，就能算出周岁、虚岁、生肖和距下次生日的天数，还附有按出生年份查看的年龄对照表。
- 日期计算器（几天后・几天前）
从基准日算出几天后、几天前、几个工作日后的日期和星期几，马上就有结果。也可以跳过周末和节假日来计算。
- 时间计算器（工作时长合计）
根据上下班时间和休息算出工作时长并合计。也可以做时间加减，或换算成小数小时。
- AA 制计算器（分摊账单）
只需输入总额和人数，立即算出每人应付多少。支持取整进位、领导多付等按比例分摊，以及由组织者承担零头。
- Unix 时间戳转换（时间戳 ⇔ 日期时间）
把 Unix 时间戳（秒・毫秒）立即转换为 UTC、本机或日本时间的日期时间，也能把日期时间转换为 Unix 时间戳。