简体中文
HEX怎么转换成RGB（以及反向转换）
这个颜色转换器会在你输入时把HEX代码转换成RGB、HSL、HSV、CMYK和OKLCH，反过来也可以：把rgb(255, 99, 71)粘贴到任意一个框，就会得到#FF6347。每个框都接受所有格式，不用费心找对应的输入框。
想手动计算的话，HEX代码其实就是用十六进制写的三个数。以#3B82F6为例，两位一组拆开，分别换算：
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
RGB转HEX就是反过来。把每个通道除以16：商是第一位，余数是第二位。255是15余15，即FF；99是6余3，即63。所以番茄红rgb(255, 99, 71)就是#FF6347。
常见颜色的HEX、RGB和HSL代码
这些颜色最好一眼就能认出来。它们都是有效的CSS颜色名，工具会为你输入的任何颜色显示最接近的名称（#3B82F6最接近dodgerblue，但并不相同）。
| 名称 | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
短、长和透明的HEX代码
HEX有四种长度。3位是简写，每一位重复一次，所以#F60就是#FF6600。6位是标准形式。8位在末尾加了alpha通道：#3B82F680是同一种蓝色、不透明度128/255，约50%。4位是它的简写。浏览器多年前就支持全部四种，但有些设计软件和邮件客户端仍然只认6位，所以不确定时就粘贴6位代码，再单独设置不透明度。
该用哪种格式？
- HEX：粘贴到设计工具、品牌规范或CMS里的都用它。简短，没人会看错。
- RGB / RGBA：在旧版CSS或JavaScript canvas代码中需要透明度时使用。
- HSL：想通过推理来微调颜色时使用。调低最后一个数颜色变深，调低中间那个数颜色变灰。用它写悬停状态要容易得多。
- OKLCH：用于新的CSS设计系统。它的亮度值和人眼感知一致，L相同的两种颜色看起来确实一样亮，HSL做不到这一点（亮度50%的黄色看起来比亮度50%的蓝色亮得多）。
- CMYK：只作为印刷的粗略参考。这里的数值来自简单公式，而不是印刷机的色彩配置文件，所以印出来的宣传册不会和屏幕完全一致。请问印刷厂使用哪种配置文件。
- HSV / HSB：主要用来对应Photoshop或Figma的取色器，它们用的就是这种格式。
颜色对比度检查：怎样才算通过WCAG？
WCAG 2比较文字和背景的相对亮度，用比值表示，从1:1（完全相同）到21:1（白底黑字）。标准是固定的：
| 级别 | 普通文字 | 大号文字（24px，或18.66px粗体） |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
按WCAG 2.1，图标、输入框边框和焦点环需要3:1。下面是一些真实颜色作为白底文字的得分：
| #FFFFFF上的文字颜色 | 对比度 | 结果 |
|---|---|---|
| #949494 | 3.03:1 | 仅限大号文字 |
| #777777 | 4.48:1 | 正文未通过AA，只差一点 |
| #767676 | 4.54:1 | 通过AA |
| #595959 | 7.00:1 | 通过AAA |
| #3B82F6 | 3.68:1 | 仅限大号文字和按钮 |
| #008080 | 4.77:1 | 通过AA |
#777777这一行是经典陷阱。它看起来和#767676一模一样，只显示一位小数的检查工具会显示4.5，但规则是“至少4.5”，4.48不算。本工具从不把未通过的比值向上取整到标准线。
颜色未通过时，检查器会寻找同色相中最接近的合格色。白底上的#3B82F6，建议AA用#1E6FF5（4.52:1），AAA用#0950C5（7.08:1）。点使用载入它，或者直接复制到样式表中。明亮的黄色和橙色通常要加深很多才能作为白底上的文字；这类颜色最好留作背景，在上面放深色文字。
生成配色和从图片取色
配色面板会生成从50到950的深浅色阶（Tailwind使用的命名方式），还有互补色、类似色、三角色、分裂互补、方形和单色配色。点击任意色块即可复制，然后可以把整套颜色导出为CSS自定义属性、SCSS变量、JSON或Tailwind颜色配置，或者下载PNG色条放进幻灯片或发给客户。
要匹配Logo或照片里的颜色，加载图片后点击那个位置即可。由于压缩噪点，JPG中的单个像素可能和你看到的颜色差几个色阶，所以照片建议切换到3×3或5×5平均取样。在Chrome和Edge中，从屏幕取色按钮可以从显示器上任何地方取色，包括其他窗口。图片不会上传，只在你的浏览器中读取。
常见问题
HEX怎么转换成RGB？
把六位数字分成三组，每组从十六进制换成0到255的数。#3B82F6拆开是3B = 59、82 = 130、F6 = 246，所以RGB值是rgb(59, 130, 246)。
RGB怎么转换成HEX？
把每个通道写成两位十六进制数，接在#后面。rgb(255, 99, 71)得到FF、63和47，所以HEX代码是#FF6347，也就是CSS颜色tomato。
通过WCAG AA需要多大的对比度？
普通文字至少4.5:1，大号文字（24px，或18.66px粗体）需要3:1。白底上的灰色#767676是4.54:1，是正文还能通过的最浅灰色。
8位HEX颜色代码是什么意思？
最后两位是alpha（不透明度）通道。#3B82F680是同一种蓝色、不透明度128/255，约50%，在CSS里就是rgba(59, 130, 246, 0.5)。
#F60这样的3位HEX代码是什么意思？
每一位重复一次，所以#F60就是#FF6600。只有每组两位都相同时才能简写，所以#3B82F6没有3位写法。
CMYK值用于印刷够准确吗？
它只是参考起点，不是印刷打样。本工具用标准公式计算，#3B82F6得到cmyk(76%, 47%, 0%, 4%)，但实际油墨配比取决于印刷机的色彩配置文件和纸张，请向印刷厂要他们的数值。
怎么获取照片中某个颜色的HEX代码？
在上方面板加载图片，点击想要的位置，工具会读取那个像素。照片建议切换到3×3或5×5平均取样，因为单个像素往往比肉眼看到的颜色噪点更多。
HSL和HSV有什么区别？
两者的色相相同，但HSL亮度100%永远是白色，而HSV明度100%是该颜色最亮的状态。纯红色是hsl(0, 100%, 50%)和hsv(0, 100%, 100%)。