免费工具 RGB转16进制转换：HEX、HSL、CMYK、OKLCH 一次全出
手上的颜色是什么格式就粘什么：#3B6BFF、59,107,255、hsl(225 100% 62%)、VI 手册上的 CMYK，或者设计稿里的 oklch()。所有格式一起换算出来，再按你的背景色预览、算 WCAG 对比度，达不到 4.5:1 时给一个色相不变、刚好达标的颜色。
- 六种格式互转
- WCAG 2.2 对比度
- 本地计算
颜色转换
示例 #3B6BFF 是 TapCub 在线客服页面上举例用的品牌色，背景是白色。可以点色块取色、直接输入任意格式，或者换其它示例。
HEX（#rgb、#rrggbb、#rrggbbaa，# 可省）、rgb()、hsl()、hsv() / hsb()、cmyk()、oklch()、oklab()、CSS 颜色名，或者直接三个数字，比如 59,107,255。全角逗号、全角括号也能认。
用来算对比度和预览，格式同上。
预览
#3B6BFF颜色
16px 正文：这段字看起来清楚吗？
24px 大字标题
在线咨询文字对背景 4.43:1
全部格式
先把 RGB 取整到 0–255 的整数，其它格式都从这个值算，所以每一行描述的都是你复制走的那个 HEX。
| 格式 | 值 |
|---|---|
| HEX（16 进制） | #3B6BFF |
| RGB | rgb(59, 107, 255) |
| HSL | hsl(225.3, 100%, 61.6%) |
| HSV / HSB | hsv(225.3, 76.9%, 100%) |
| CMYK（近似） | cmyk(77%, 58%, 0%, 0%) |
| OKLCH | oklch(58.45% 0.2262 265.83) |
| OKLab | oklab(58.45% -0.0165 -0.2256) |
| RGB（CSS 空格写法） | rgb(59 107 255) |
| 十进制整数 | 3894271 |
| Android ARGB | 0xFF3B6BFF |
WCAG 2.2 对比度
把这个颜色当文字或图标，放在背景上。
- 不达标AA 正文（WCAG 1.4.3）：要求 4.5:1，这一组是 4.43:1。
- 达标AA 大字，24px 或 18.66px 粗体（1.4.3）：要求 3:1，这一组是 4.43:1。
- 不达标AAA 正文（1.4.6）：要求 7:1，这一组是 4.43:1。
- 不达标AAA 大字（1.4.6）：要求 4.5:1，这一组是 4.43:1。
- 达标图标、边框、表单控件（1.4.11）：和相邻颜色要有 3:1，这一组是 4.43:1。
- 建议同一色相、在这个背景上正文能达到 AA 的最接近颜色：#3A6AFD（4.50:1）。只调了 OKLCH 明度。
对比度速查
比值截断、不四舍五入：4.499 显示 4.49，判不达标。
| 组合 | 对比度 | AA 正文 4.5 | 大字 / 图标 3 | AAA 正文 7 |
|---|---|---|---|---|
| 颜色放在背景上 | 4.43:1 | 不达标 | 达标 | 不达标 |
| 颜色上放白字 | 4.43:1 | 不达标 | 达标 | 不达标 |
| 颜色上放黑字 | 4.73:1 | 达标 | 达标 | 不达标 |
color: #3B6BFF;
color: rgb(59 107 255);
color: hsl(225.3, 100%, 61.6%);
color: oklch(58.45% 0.2262 265.83);
--brand: #3B6BFF;分享这组输入：数值写在链接的 # 后面，不会发到服务器。
https://tapcub.com/zh/tools/color-converter
版本 v1.0更新于 更新记录
每一块结果说明什么
同一个颜色的六种写法，以及放在你的背景上看不看得清。
HEX 和 RGB
是同一组 0–255 的三个数。HEX 把每个数写成两位 16 进制：3B = 3 × 16 + 11 = 59。8 位 HEX 最后两位是透明度。
HSL 和 HSV
都是「色相角度 + 两个百分比」。CSS 用 HSL；Photoshop、多数取色器显示的是 HSV（也叫 HSB）。色相相同，另外两个数不同，不能互相照抄。
CMYK
用 CSS Color 5 的简单公式换算出的印刷近似值。真正的印刷色取决于印刷机、纸张和 ICC 色彩配置文件，正式物料以印厂或 VI 手册给的 CMYK 为准，也别指望把它换回来还是同一个 HEX。
对比度
WCAG 比较两个颜色的相对亮度，从 1:1（完全一样）到 21:1（白底黑字）。正文 AA 最低 4.5:1，大字和图标 3:1；不达标时给一个建议色。
和别的工具差 1 很正常：这里先把 RGB 取成整数，再从这个整数算其它格式，所以把表里任何一行粘回来，得到的都是同一个 HEX。
三步
边输入边出结果。
-
1
输入颜色
从 VI 手册、CSS 或设计稿里复制色值，或者点左边的色块取色。格式自动识别，RGB 直接写三个数字就行。
-
2
设置背景
一般是白色或页面底色。检查按钮文字时，背景填按钮颜色，文字颜色填在第一个框。
-
3
复制、检查
从表格或 CSS 块复制需要的格式。正文对比度不到 AA 就试试建议色，再检查一遍。
各种格式怎么换算
全部按 W3C 的 CSS Color 规范和 WCAG 2.2 计算，数值和独立的颜色库 culori 对照过。
- HEX ↔ RGB：每两位 16 进制是一个通道，
值 = 16 × 第一位 + 第二位（A–F 代表 10–15） - HSL、HSV：CSS Color 4 §7 的标准换算，色相是色轮上的角度
- CMYK：
K = 1 − max(R, G, B)，C = (1 − R − K) / (1 − K)，M、Y 同理（CSS Color 5 的简单换算） - OKLCH：先把 sRGB 线性化，用 Björn Ottosson 给的矩阵转成 OKLab，再算
C = √(a² + b²)、h = atan2(b, a) - 对比度：
(L1 + 0.05) / (L2 + 0.05)，L 是相对亮度0.2126 R + 0.7152 G + 0.0722 B（R、G、B 为线性化后的值）
| 对象 | AA | AAA |
|---|---|---|
| 正文 | 4.5:1 | 7:1 |
| 大字（24px，或 18.66px 粗体） | 3:1 | 4.5:1 |
| 图标、边框、焦点框、表单控件（1.4.11） | 3:1 | — |
| Logo、不可用状态的控件 | 不要求 | 不要求 |
#3B6BFF 怎么转 RGB、对比度怎么算
用示例颜色一步一步算。
| 步骤 | 算法 | 结果 |
|---|---|---|
| 拆 16 进制 | 3B · 6B · FF | 3 × 16 + 11 = 59，6 × 16 + 11 = 107，15 × 16 + 15 = 255 |
| RGB | — | rgb(59, 107, 255) |
| 线性化 | (59 ÷ 255 + 0.055) ÷ 1.055 的 2.4 次方，其余同理 | 0.0437、0.1470、1.0000 |
| 相对亮度 | 0.2126 × 0.0437 + 0.7152 × 0.1470 + 0.0722 × 1 | 0.1867 |
| 和白色的对比度 | (1 + 0.05) ÷ (0.1867 + 0.05) | 4.43:1：大字和图标达标，正文 AA 不达标 |
| 建议色 | 降低 OKLCH 明度直到比值到 4.5:1 | #3A6AFD，4.50:1 |
#3B6BFF 和 #3A6AFD 肉眼几乎看不出差别，但白字从不达标变成达标。16px 的按钮文字要么这样把颜色压暗一点，要么把字做大、加粗。
色值最容易出错的地方
大多是长得像的格式混用了。
把 HSV 当 HSL 填
取色器显示 HSB 225°、77%、100%，换成 CSS 是 hsl(225 100% 62%)。色相一样，后两个数差很多。
把换算出的 CMYK 当正式值
屏幕色转印刷色取决于 ICC 配置文件。这里的 CMYK 只能做参考，正式物料找印厂或 VI 手册要。
凭感觉判断看不看得清
中等亮度的蓝、橙、绿配白字常常看着还行，实测却不到 4.5:1。每一组文字和背景都量一下。
忘了透明度
半透明颜色在不同背景上看起来不一样，对比度要按叠加后的颜色算，这个工具会帮你叠。
把品牌色用到客服聊天窗上
TapCub 在线客服的聊天窗可以改品牌色、Logo、位置、欢迎语和离线文案，看起来就是你网站的一部分。
RGB 怎么转 16 进制？
把每个 0–255 的数写成两位 16 进制再拼起来：59 → 3B，107 → 6B，255 → FF，得到 #3B6BFF。在上面的颜色框里直接输入「59,107,255」（不用写 rgb()），表格第一行就是 16 进制结果。不足两位要补 0，比如 7 写成 07。
16 进制颜色怎么转 RGB？
六位分成三组，每组按 16 进制换成十进制：#3B6BFF → 3B = 59、6B = 107、FF = 255，即 rgb(59, 107, 255)。三位的写法先把每位重复一次：#F60 就是 #FF6600。
8 位的 16 进制颜色是什么？
最后两位是透明度：#3B6BFF80 是同一个蓝色、约 50% 不透明。浏览器的 CSS 都支持；一些老软件和邮件客户端不认，那里改用 rgba()。
换算出来的 CMYK 准吗？
只是近似。屏幕色准确转成油墨色需要印刷机和纸张的 ICC 配置文件，公式算不出来。做草稿可以用，正式印刷以印厂或 VI 手册给的 CMYK 为准。
OKLCH 是什么，为什么要用？
OKLCH 用明度、色度、色相描述颜色，基于 OKLab 色彩空间，明暗变化比 HSL 更接近人眼的感受：只改 L，颜色变亮变暗但色相不跑偏，所以很多设计系统用它生成色板。主流浏览器的当前版本都支持 CSS 里的 oklch()。
文字和背景的对比度要多少才够？
WCAG 2.2 的 AA 级：正文 4.5:1，大字（24px 或 18.66px 粗体）和图标、表单控件 3:1；AAA 级正文 7:1、大字 4.5:1。Logo 和不可用状态的控件不要求。
为什么和别的转换工具差一点？
取整方式不同。这里先把 RGB 取成整数，再算 HSL、OKLCH 等，保证每一行都对应你复制走的那个 HEX；保留小数计算的工具，末位可能差 0.1 到 1。