颜色格式转换
颜色格式转换，是指把同一个颜色在 HEX、RGB、HSL、HSV、HWB、CMYK、LAB、OKLCH 等十余种写法与 CSS 具名色之间换算——换写法，不换颜色。本页免费在线：全部写法同屏并列、点一下就复制；带透明度时明说 HEX 只存得下 256 级；超出 sRGB 色域会标注并给出保色相压彩度的映射结果，而不是裁剪；还给出对白底与对黑底的 WCAG 对比度结论。全程本地计算、颜色值不上传。
如何使用颜色格式转换
给一个颜色：把颜色值粘进输入框（HEX、rgb()、hsl()、hwb()、lab()、oklch() 与 dodgerblue 这样的具名色都认，# 可以省，末尾分号和 color: 前缀会自动剥掉），也可以点右边的系统色板，或者直接拖 HSL 与 OKLCH 两组滑杆。三个入口共用同一个颜色，改任一处其余同步。
在结果区同屏看全部写法：识别条先告诉你它按什么格式解析、依据是什么，下面十二张卡片依次给出 HEX、带透明度的 HEX8、RGB、HSL、HSV、HWB、CMYK、LAB、LCH、OKLAB、OKLCH 与最接近的 CSS 具名色，每张都能单独复制。小数位数、字母大小写、逗号旧语法这些开关只改显示，不改颜色本身。
往下展开对比度、色阶与代码片段：对比度面板给出对白底与对黑底的比值和 AA/AAA 结论，半透明颜色会先与所选背景合成再算；色阶条是只改 OKLCH 亮度生成的九档；代码片段一次给出 CSS 变量、SCSS 变量、Android 与 Flutter 的 ARGB、Swift、Java 与 .NET 的写法。要一次转一整套设计令牌，切到「批量转换」标签。
关于颜色格式转换的常见问题
- 颜色格式转换会上传我的颜色值吗？
- 不会。所有换算都在你的浏览器里用 JavaScript 完成，颜色值不发送到服务器，关闭页面即清除，也不写入本地存储——本页只把小数位数、字母大小写、语法风格这几项显示参数记在本机，你输入的颜色一个字都不落盘，更不会同步到网址里。想自证很简单：打开 F12 的网络面板再转一次，换算过程一个请求都不发，断网照样出结果。
- 颜色格式转换支持哪些颜色写法和色彩空间？
- 结果区一次给出十二种写法：HEX、带透明度的 HEX8、RGB、HSL、HSV（HSB）、HWB、CMYK、LAB、LCH、OKLAB、OKLCH，以及最接近的 CSS 具名色；输入端还额外认 Android/Flutter 的 0xAARRGGBB。其中 lab()、lch()、oklab()、oklch() 属于 CIE 的 LAB 色彩空间与它的现代改良版，是真正的颜色空间转换。有三种 CSS 新写法本页明确不解析：color-mix()、相对颜色语法 rgb(from …)，以及 color(display-p3 …) 这类广色域函数——请先在浏览器里求值，再把结果粘进来。
- RGB 怎么转 HEX？HEX 又怎么转回 RGB？
- HEX 就是把 R、G、B 三个 0-255 的数各写成两位十六进制再拼起来。例如 rgb(59 130 246)：59 是 3b、130 是 82、246 是 f6，拼起来就是 #3b82f6；反过来把 #3b82f6 每两位当成一个十六进制数读回十进制即可。本页粘进任一种，另一种立刻出现，中间不经过任何取整。
- HSL 和 HSV（HSB）有什么区别？
- 色相都一样，区别在第三个数：HSL 的 L 是「最亮通道与最暗通道的中点」，HSV 的 V 是「最亮的那个通道」。所以同一个 #3b82f6，HSL 是 hsl(217.2 91.2% 59.8%)，HSV 是 hsv(217.2 76% 96.5%)——饱和度和第三个数都对不上，抄错地方会得到另一个颜色。CSS 只认 HSL，设计软件的拾色器用的多是 HSV/HSB。
- OKLCH 是什么？和 HSL 比有什么好处？
- OKLCH 是 CSS Color Level 4 引入的新写法，三个数分别是感知亮度、彩度、色相。它的亮度对齐人眼感觉：HSL 里黄色和蓝色的 L 都是 50%，但黄色看起来亮得多；OKLCH 里同一个亮度上换色相，明暗是齐的。所以做按钮、状态色的深浅色阶时用 OKLCH，不会出现某几档突然发灰或发亮。本页的色阶条就是只改 OKLCH 亮度生成的。
- 为什么我复制的 HSL 转回 HEX 颜色变了？
- 因为整数 HSL 装不下全部颜色。我们把全部 16,777,216 个 sRGB 颜色试了一遍：写成整数 hsl() 后有 15,001,676 个（89.42%）转不回原色；保留 1 位小数后偏差是 0。例如 #3b82f6 写成 hsl(217 91% 60%)，转回来是 #3c83f6。本页默认保留 1 位小数，你把小数位调成 0 时会直接给出警告。
- 带透明度的颜色怎么转成 8 位 HEX？
- 在 6 位后面再加两位表示透明度，也就是 RRGGBBAA。透明度 0.8 对应 cc，所以 rgba(59,130,246,.8) 就是 #3b82f6cc。要注意 HEX 的透明度只有 256 级：0.5 只能存成 80、读回来是 0.502，0.25 存成 40 读回是 0.251——本页遇到这种情况会直接告诉你，不会假装没发生。
- RGBA 转 RGB 怎么去掉透明度？
- 这里有两个完全不同的意思，别混。一是只把 alpha 丢掉：三个通道值原样不动，把 rgba(59,130,246,.5) 写成 rgb(59 130 246) 即可，RGB 卡片里的三个数就是它，不受透明度影响。二是要拿到眼睛实际看到的那个不透明颜色，那必须先与背景合成——同一个 rgba(59,130,246,.5) 压在白底上是 #9dc1fb，压在别的背景上又是另一个值。对比度也跟着变：这个半透明蓝对白底只有 1.84:1，本页的对比度面板会按你选的背景先合成再算比值。
- Android 的 0xFF 颜色和 CSS 的 8 位 HEX 一样吗？
- 不一样，顺序是反的。CSS 是 RRGGBBAA（透明度在最后），Android 和 Flutter 是 AARRGGBB（透明度在最前）。同一串 FF3B82F6，按 Android 口径读是不透明的蓝色 #3b82f6，按 CSS 口径读却是粉红色 #ff3b82 再带上 0.965 的透明度——完全是两个颜色。本页对 0x 开头默认按 Android 口径解析，并给一个一键改判按钮。
- CMYK 转换出来的颜色能直接拿去印刷吗？
- 不建议。本页的 CMYK 用的是不带 ICC 色彩配置文件的通用公式，适合快速参考和网页场景；真正的印刷要看纸张、油墨和印厂的 ICC 配置，同一组 CMYK 值在不同印厂出来的颜色并不相同。要送印请以印厂提供的色卡和配置文件为准。
- 颜色对比度多少才算通过无障碍标准？
- WCAG 2.x 的 AA 级要求正文文字与背景对比度不低于 4.5:1，大字（18pt 以上，或 14pt 以上加粗）不低于 3:1；AAA 级分别是 7:1 和 4.5:1。举例：#3b82f6 对白底是 3.68:1，当正文色不达标、当大字或按钮底色可以；深色 #1e293b 对白底 14.63:1，AAA 也能过。本页会直接给出比值和结论。
- OKLCH 颜色超出 sRGB 色域会怎么样？
- 会有部分颜色屏幕根本画不出来，工具必须做取舍。多数工具直接把通道裁到范围内，比如 oklch(70% 0.35 30) 被裁成纯红 #ff0000，亮度从 70% 一路掉到 62.8%；本页按 CSS Color Level 4 的做法保持色相和亮度、只压低彩度，得到 #ff624e，并把裁剪结果并排放出来让你对照。
- 颜色格式怎么批量转换？一次能转多少个？
- 切到「批量转换」标签，一行一个颜色粘进去，一次最多 5000 行；也能直接粘贴 CSS 变量声明这样的整行，会自动摘出颜色值并在原文列保留整行。输出是表格，可复制成 TSV 或下载成带 UTF-8 BOM 的文件。把一整套设计令牌从 HEX 批量改写成 OKLCH 用这个最快。
- CSS 颜色名 dodgerblue 对应的 HEX 是多少？
- dodgerblue 是 #1e90ff，也就是 rgb(30 144 255)。本页收录了 CSS 规范里的全部 148 个具名颜色关键字，输入名字即可看到它的全部写法；反过来输入一个 HEX，也会告诉你最接近的具名色——例如 #3b82f6 最接近 dodgerblue，但 ΔE-OK 有 0.036，两者并不相同。
- 颜色格式转换工具免费吗？要注册登录吗？
- 免费，不需要注册或登录，也不限使用次数，转换结果没有水印。页面是纯静态的前端工具，换算全在你自己的浏览器里跑，我们没有服务器成本要摊到你头上，所以既不设付费墙，也不需要你留邮箱或手机号。批量模式一次最多 5000 行，这是本地渲染表格的行数上限，不是收费门槛，超过分两次转即可。
- 手机上能用这个颜色格式转换工具吗？
- 可以。用手机浏览器打开本页即可，色板会调用系统自带的取色控件，结果卡片会自动改成单列排布，长的 oklch() 串会折行而不是撑出横向滚动条。所有换算同样在手机本地完成，不上传。
颜色格式有哪些：十二种写法速查表
下面这张表把本页支持的十二种写法一次列全，例子那一列全部是同一个颜色 #3b82f6 现场算出来的，和上面那个转换器共用同一份代码， 所以不存在「正文抄错一位」这回事。
| 写法 | 例子（同一个颜色） | 是 CSS 标准吗 | 什么时候用它 |
|---|---|---|---|
| HEX | #3b82f6 | 是 | 最通用的写法，老项目、设计稿标注、Git 里的 diff 都认它 |
| HEX8（带透明度） | #3b82f6ff | 是 | 要把透明度也写进一串里时用它，注意透明度在最后且只有 256 级 |
| RGB | rgb(59 130 246) | 是 | 三个 0–255 的通道值，和 Canvas、图像处理库的口径一致 |
| HSL | hsl(217.2 91.2% 59.8%) | 是 | 要在一个色相上调深浅时最顺手，CSS 里可直接写 |
| HSV（HSB） | hsv(217.2 76% 96.5%) | 否 | Photoshop、Figma 拾色器用的就是它；CSS 不认，只用于和设计软件对值 |
| HWB | hwb(217.2 23.1% 3.5%) | 是 | 按「掺多少白、掺多少黑」描述颜色，做浅色/深色变体时很直观 |
| CMYK | cmyk(76% 47.2% 0% 3.5%) | 否 | 印刷四色的估算值（无 ICC），用于快速参考，送印以印厂色卡为准 |
| LAB | lab(54.62% 8.76 -65.79) | 是 | CIE 感知均匀空间（D50 白点），算色差 ΔE 与做色彩管理时用 |
| LCH | lch(54.62% 66.37 277.59) | 是 | LAB 的极坐标写法（D50），按色相角调色比 LAB 直观 |
| OKLAB | oklab(62.31% -0.0332 -0.1851) | 是 | 比 LAB 更贴合人眼的新空间（D65），渐变与混色不发灰 |
| OKLCH | oklch(62.31% 0.188 259.81) | 是 | 现在做设计令牌色阶的首选：同一个亮度换色相，明暗是齐的 |
| 最接近的 CSS 具名色 | dodgerblue | 是 | 写文档、写示例时更好读；完全相同才敢直接替换，否则只是最接近 |
这类工具的叫法很多——颜色转换器、在线颜色转换、颜色代码转换、颜色值转换、 CSS 颜色转换、颜色 16 进制转换，英文里叫 color converter online 或 color format converter——说的都是同一件事：把同一个颜色换一种写法。
这十二种写法里，前七种（含 HSL 一族与 CMYK）都是 sRGB 立方体自己的重排， 而 lab()、lch()、oklab()、oklch() 属于 CIE 的 LAB 颜色空间与它的现代改良版，是真正意义上的颜色空间转换—— 本页全程走同一条链（sRGB 到线性光、再到 XYZ 或 OKLab），不会在中间偷偷取整。
一句话记法：换写法不换颜色。这十二行说的是同一个颜色的十二种写法， 就像同一个数可以写成十进制也可以写成十六进制。真正会改变颜色的只有两件事—— 取整位数不够，以及颜色超出屏幕能显示的范围，这两件事本页都会明确告诉你。
HEX 转 RGB、RGB 转 HSL：各个换算方向怎么走，坑在哪
上一张表回答的是「有哪些写法」，这张回答的是「从 A 换到 B 会发生什么」。 本页所有方向都已经替你算好，粘进去即可；这张表是给你核对结果、 或者要自己写代码实现时对照用的。
| 换算方向 | 怎么换算，要注意什么 |
|---|---|
| HEX 转 RGB / RGB 转 HEX | 纯进制换算，一一对应、完全可逆：每两位十六进制读成一个 0~255 的通道值，反过来再写回去。 |
| RGB 转 HSL / HSL 转 RGB | 同一个 sRGB 立方体换成柱面坐标，可逆。但 L 贴近 0 或 100% 时 S 已经没有意义，来回换一趟色相可能被归成 0。 |
| HEX 转 HSL / HSL 转 HEX | 没有直达公式，都是先回到 RGB 再换。两步各取整一次、误差会叠加——这正是「转来转去颜色变了」最常见的来源。 |
| RGB 转 HSV / HSV 转 RGB | HSV 就是设计软件里的 HSB。它和 HSL 共用色相，但 V（明度）与 L（亮度）定义不同，同一个颜色两边的第三个数通常对不上。 |
| HSV 转 HEX / HSB 转 HEX | 同样要先回 RGB 再拼十六进制。从 Photoshop、Figma 抄 HSB 数值过来时尤其注意：那三个数不能当 HSL 直接填。 |
| RGB 转 CMYK / CMYK 转 RGB | 设备相关，网页上只能给不带 ICC 配置的近似值。真要印刷请以印厂的色彩配置为准，别拿屏幕上的数直接交付。 |
| RGB 转 Lab / Lab 转 RGB | 要先把 sRGB 解成线性光、再经 XYZ 与白点（D65）换算，是真正的颜色空间转换，不是同一立方体的重排。 |
| HWB 转 RGB | CSS Color 4 的写法：色相加白度与黑度。白度与黑度之和达到或超过 100% 时结果是一个灰色，与色相无关。 |
| RGB 转 OKLCH / OKLCH 转 HEX | OKLCH 转换是感知均匀的：改亮度不会连带改变观感上的彩度，适合成套生成配色。超出 sRGB 时本页会告诉你映射前后的差别。 |
RGB 和 HEX 颜色代码是怎么对应的
HEX 就是把红、绿、蓝三个通道各写成两位十六进制再拼起来，所以 #3b82f6 可以拆成三段：3b、82、f6， 各自读回十进制正好是 59、130、246，也就是 rgb(59 130 246)。 每段的取值范围是 00 到 ff，也就是 0 到 255。
RGB 值怎么看？三个数依次是红、绿、蓝三个通道的强度，数越大这个通道越亮； 三个数一起决定最终颜色。所以 HEX 是什么颜色这个问题，等价于问它的三个通道各是多少—— 把 HEX 粘进上面的输入框，RGB 那张卡片立刻告诉你。
- 三个通道全满是白色
#ffffff，全空是黑色#000000；三段相等就是灰色，例如#808080是rgb(128 128 128)。 - 三位缩写是每位重复一次得来的：
#39f展开就是#3399ff。所以只有每两位都相同的颜色才能缩写，#3b82f6就缩不了。 - 四位与八位是带透明度的写法，多出来的那两位放在最后表示 alpha， 例如
#3b82f6cc的末尾cc就是 0.8。
想看 3b 这样的十六进制数本身到底是多少，可以用站内的进制转换；本页只负责颜色，不越界替你做数值换算。
HSL、HSV（HSB）和 HWB 有什么区别：HSL 和 HSV 区别就在第三个数
这三种写法都是同一个 sRGB 立方体的几何重排，第一个数（色相）完全一样， 区别只在第三个维度怎么定义。同一个 #3b82f6，三种写法的色相都是 217.2，但后两个数完全不同——抄错地方就会得到另一个颜色。
| 写法 | 同一个颜色的值 | 第三个数是什么 | 平时用在哪儿 |
|---|---|---|---|
| HSL | hsl(217.2 91.2% 59.8%) | L 是最亮通道与最暗通道的中点 | CSS 直接认，调深浅最顺手 |
| HSV（HSB） | hsv(217.2 76% 96.5%) | V 是最亮的那个通道 | Photoshop、Figma 拾色器用的是它 |
| HWB | hwb(217.2 23.1% 3.5%) | 掺了多少白、掺了多少黑 | 做浅色/深色变体时最直观 |
OKLCH 是什么，为什么现在都推荐用它
HSL 的 L 是「最亮通道与最暗通道的中点」，是个几何量，不是人眼感觉到的亮度。 最直观的证据：hsl(60 100% 50%)（黄）和 hsl(240 100% 50%)（蓝） 的 L 都是 50%，但黄色看起来亮得多——它们的 OKLCH 感知亮度分别是 96.8% 和 45.2%，差了一倍还多。
OKLCH 的三个数是感知亮度、彩度、色相，亮度这一维对齐人眼感觉， 所以在同一个亮度上换色相，明暗是齐的。这正是现在做设计令牌色阶都改用 OKLCH 的原因： 本页那条九档色阶就是拿当前颜色的色相与彩度、只把 OKLCH 亮度从 0.95 等差降到 0.15 生成的， 以 #3b82f6 为例是：
#e1f0ff → #aacfff → #78aeff → #448bff → #246bdd → #004cb8 → #00308e → #001563 → #000331
同样的等差步长，用 HSL 的亮度去做会在中间几档突然发灰或发亮，用 OKLCH 就不会。 这条色阶是固定九档的只读演示，本页不做配色方案生成——互补色、三分色那类需求属于另一个工具。
oklch() 与 oklab() 都属于 CSS 颜色新语法， 现在主流浏览器都已支持。要把一整套已有的 HEX 令牌改写成 OKLCH， 也就是所谓的设计令牌颜色转换，切到「批量转换」标签做批量颜色转换最快， 一行一个粘进去就出表格。
超出 sRGB 色域会发生什么：映射还是裁剪
oklch(70% 0.35 30) 是一个普通 sRGB 显示器根本画不出来的红。 工具必须做取舍，而不同的取舍会给出肉眼可辨的两个不同颜色：
| 原始颜色 | 直接裁剪 | 裁剪后的 OKLCH | 色域映射 | 映射后的 OKLCH |
|---|---|---|---|---|
oklch(70% 0.35 30) | #ff0000 | oklch(62.8% 0.2577 29.23) | #ff624e | oklch(69.65% 0.1945 30.05) |
oklch(90% 0.3 150) | #00ff60 | oklch(87.11% 0.2591 146.98) | #47ff88 | oklch(88.35% 0.2169 150.52) |
oklch(50% 0.4 300) | #9300ff | oklch(55.28% 0.2948 300.13) | #8100e3 | oklch(50.48% 0.2701 299.61) |
看第一行：直接把通道裁进 0-255 得到纯红 #ff0000，亮度被一起拽走了——原本要的是 70% 的亮度，裁完只剩 62.8%。 按 CSS Color Level 4 的做法保持色相与亮度、只二分压低彩度，得到的是 #ff624e，亮度仍是 69.65%。 第二行更明显：裁剪把色相从 150 拽到了 146.98， 映射则稳在 150.52。
为什么颜色转来转去会变：一次全量实测
我们把全部 16,777,216 个 sRGB 颜色逐个写成整数 hsl() 再转回来， 结果是 15,001,676 个（89.42%）拿不回原色； 保留 1 位小数后，转不回来的颜色是 0 个。这不是估算， 是本页用自己的解析与渲染代码跑完全部颜色数出来的。
| 做法 | 写出来的样子 | 转回去得到 | 和原色一样吗 |
|---|---|---|---|
| 整数 HSL（小数位数 0） | hsl(217 91% 60%) | #3c83f6 | 不一样 |
| 1 位小数 HSL（本页默认） | hsl(217.2 91.2% 59.8%) | #3b82f6 | 一样 |
| OKLCH（默认位数） | oklch(62.31% 0.188 259.81) | #3b82f6 | 一样 |
透明度也有同样的问题，而且更隐蔽：HEX 的 alpha 只有 256 级，0.5 只能存成 80、读回来是 0.502，0.25 存成 40 读回是 0.251。 这类不可逆的量化本页一律显式提示，不装作没发生—— 别家不提示，你会以为是工具算错了。
颜色对比度与无障碍：多少才算达标
WCAG 2.x 的 AA 级要求正文与背景的对比度不低于 4.5:1， 大字（18pt 以上，或 14pt 以上加粗）不低于 3:1； AAA 级分别是 7:1 与 4.5:1。 下面几个常用颜色的比值都是本页现算的：
| 颜色 | 对白底 | AA 正文 | 对黑底 | AA 正文 |
|---|---|---|---|---|
#3b82f6 | 3.68:1 | 不通过 | 5.71:1 | 通过 |
#f59e0b | 2.15:1 | 不通过 | 9.78:1 | 通过 |
#1e293b | 14.63:1 | 通过 | 1.44:1 | 不通过 |
#ffffff | 1.00:1 | 不通过 | 21.00:1 | 通过 |
半透明颜色必须先与实际背景合成再算，不合成直接报数是错的。 而且合成要在 gamma 编码的 sRGB 空间做，因为浏览器对普通 sRGB 颜色的默认合成就在那儿——rgba(59,130,246,.5) 压在白底上，用户实际看到的是 #9dc1fb，对白底只有 1.84:1。 本页会在面板上写明按哪个背景合成的。
颜色对比度标准就这两级四档，所谓 WCAG 对比度检测，说到底就是算出一个比值再和阈值比大小。 无障碍颜色对比度最容易翻车的场景是拿浅色品牌色直接当正文色—— 上表里 #f59e0b 那一行就是典型：看着挺清楚，对白底其实连 AA 正文都不到。
需要说明的是，对比度达标只代表这一项符合 WCAG 2.x 的相应阈值， 不等于整个页面无障碍合规——字号、行距、焦点可见性、语义结构都各有各的要求。
ARGB 还是 RGBA：同一串八位十六进制的两种读法
这是跨端开发里最容易踩的一个坑，而且踩了不会报错，只会颜色不对：
- CSS 的八位 HEX 是 RRGGBBAA，透明度在最后；
- Android 与 Flutter 的
0x八位是 AARRGGBB， 透明度在最前。
8 位 HEX 颜色多出来的那两位就是透明度，争议只在它站最前还是站最后。 所以 ARGB 转 RGBA 只是把最前面那两位挪到最后，8 位 HEX 转 RGBA 同理—— 通道值一个都没变，变的只是读的顺序。 同一串 FF3B82F6：按 Android 口径读是不透明的蓝色 #3b82f6；按 CSS 口径读却是 #ff3b82 这个粉红色再带上 0.965 的透明度。完全是两个颜色。本页对 0x 开头默认按 Android 口径解析，并在识别条里给一个一键改判按钮—— 这类歧义我们只提示，不替你猜。
代码片段区把两种口径一次都给出来：CSS 变量颜色与 SCSS 颜色变量用 #3b82f6，Android 颜色代码和 Flutter 颜色代码用 0xFF3B82F6， Swift 颜色代码用 0-1 的浮点通道，Java 与 .NET 用 0-255 整数，复制粘贴就能用。
CSS 颜色名有哪些：全部 148 个具名色速查表
CSS 规范一共定义了 148 个具名颜色关键字， 其中 gray 与 grey、aqua 与 cyan、fuchsia 与 magenta 是同一个颜色的两种拼写。 本页支持直接输入名字，也会反过来告诉你任意一个颜色最接近哪个名字—— 例如 #3b82f6 最接近 dodgerblue（#1e90ff），但 ΔE-OK 有 0.036，两者并不相同， 别直接替换。
展开全部 148 个 CSS 具名颜色
| 关键字 | 颜色 | HEX | RGB |
|---|---|---|---|
aliceblue | #f0f8ff | rgb(240 248 255) | |
antiquewhite | #faebd7 | rgb(250 235 215) | |
aqua | #00ffff | rgb(0 255 255) | |
aquamarine | #7fffd4 | rgb(127 255 212) | |
azure | #f0ffff | rgb(240 255 255) | |
beige | #f5f5dc | rgb(245 245 220) | |
bisque | #ffe4c4 | rgb(255 228 196) | |
black | #000000 | rgb(0 0 0) | |
blanchedalmond | #ffebcd | rgb(255 235 205) | |
blue | #0000ff | rgb(0 0 255) | |
blueviolet | #8a2be2 | rgb(138 43 226) | |
brown | #a52a2a | rgb(165 42 42) | |
burlywood | #deb887 | rgb(222 184 135) | |
cadetblue | #5f9ea0 | rgb(95 158 160) | |
chartreuse | #7fff00 | rgb(127 255 0) | |
chocolate | #d2691e | rgb(210 105 30) | |
coral | #ff7f50 | rgb(255 127 80) | |
cornflowerblue | #6495ed | rgb(100 149 237) | |
cornsilk | #fff8dc | rgb(255 248 220) | |
crimson | #dc143c | rgb(220 20 60) | |
cyan | #00ffff | rgb(0 255 255) | |
darkblue | #00008b | rgb(0 0 139) | |
darkcyan | #008b8b | rgb(0 139 139) | |
darkgoldenrod | #b8860b | rgb(184 134 11) | |
darkgray | #a9a9a9 | rgb(169 169 169) | |
darkgreen | #006400 | rgb(0 100 0) | |
darkgrey | #a9a9a9 | rgb(169 169 169) | |
darkkhaki | #bdb76b | rgb(189 183 107) | |
darkmagenta | #8b008b | rgb(139 0 139) | |
darkolivegreen | #556b2f | rgb(85 107 47) | |
darkorange | #ff8c00 | rgb(255 140 0) | |
darkorchid | #9932cc | rgb(153 50 204) | |
darkred | #8b0000 | rgb(139 0 0) | |
darksalmon | #e9967a | rgb(233 150 122) | |
darkseagreen | #8fbc8f | rgb(143 188 143) | |
darkslateblue | #483d8b | rgb(72 61 139) | |
darkslategray | #2f4f4f | rgb(47 79 79) | |
darkslategrey | #2f4f4f | rgb(47 79 79) | |
darkturquoise | #00ced1 | rgb(0 206 209) | |
darkviolet | #9400d3 | rgb(148 0 211) | |
deeppink | #ff1493 | rgb(255 20 147) | |
deepskyblue | #00bfff | rgb(0 191 255) | |
dimgray | #696969 | rgb(105 105 105) | |
dimgrey | #696969 | rgb(105 105 105) | |
dodgerblue | #1e90ff | rgb(30 144 255) | |
firebrick | #b22222 | rgb(178 34 34) | |
floralwhite | #fffaf0 | rgb(255 250 240) | |
forestgreen | #228b22 | rgb(34 139 34) | |
fuchsia | #ff00ff | rgb(255 0 255) | |
gainsboro | #dcdcdc | rgb(220 220 220) | |
ghostwhite | #f8f8ff | rgb(248 248 255) | |
gold | #ffd700 | rgb(255 215 0) | |
goldenrod | #daa520 | rgb(218 165 32) | |
gray | #808080 | rgb(128 128 128) | |
green | #008000 | rgb(0 128 0) | |
greenyellow | #adff2f | rgb(173 255 47) | |
grey | #808080 | rgb(128 128 128) | |
honeydew | #f0fff0 | rgb(240 255 240) | |
hotpink | #ff69b4 | rgb(255 105 180) | |
indianred | #cd5c5c | rgb(205 92 92) | |
indigo | #4b0082 | rgb(75 0 130) | |
ivory | #fffff0 | rgb(255 255 240) | |
khaki | #f0e68c | rgb(240 230 140) | |
lavender | #e6e6fa | rgb(230 230 250) | |
lavenderblush | #fff0f5 | rgb(255 240 245) | |
lawngreen | #7cfc00 | rgb(124 252 0) | |
lemonchiffon | #fffacd | rgb(255 250 205) | |
lightblue | #add8e6 | rgb(173 216 230) | |
lightcoral | #f08080 | rgb(240 128 128) | |
lightcyan | #e0ffff | rgb(224 255 255) | |
lightgoldenrodyellow | #fafad2 | rgb(250 250 210) | |
lightgray | #d3d3d3 | rgb(211 211 211) | |
lightgreen | #90ee90 | rgb(144 238 144) | |
lightgrey | #d3d3d3 | rgb(211 211 211) | |
lightpink | #ffb6c1 | rgb(255 182 193) | |
lightsalmon | #ffa07a | rgb(255 160 122) | |
lightseagreen | #20b2aa | rgb(32 178 170) | |
lightskyblue | #87cefa | rgb(135 206 250) | |
lightslategray | #778899 | rgb(119 136 153) | |
lightslategrey | #778899 | rgb(119 136 153) | |
lightsteelblue | #b0c4de | rgb(176 196 222) | |
lightyellow | #ffffe0 | rgb(255 255 224) | |
lime | #00ff00 | rgb(0 255 0) | |
limegreen | #32cd32 | rgb(50 205 50) | |
linen | #faf0e6 | rgb(250 240 230) | |
magenta | #ff00ff | rgb(255 0 255) | |
maroon | #800000 | rgb(128 0 0) | |
mediumaquamarine | #66cdaa | rgb(102 205 170) | |
mediumblue | #0000cd | rgb(0 0 205) | |
mediumorchid | #ba55d3 | rgb(186 85 211) | |
mediumpurple | #9370db | rgb(147 112 219) | |
mediumseagreen | #3cb371 | rgb(60 179 113) | |
mediumslateblue | #7b68ee | rgb(123 104 238) | |
mediumspringgreen | #00fa9a | rgb(0 250 154) | |
mediumturquoise | #48d1cc | rgb(72 209 204) | |
mediumvioletred | #c71585 | rgb(199 21 133) | |
midnightblue | #191970 | rgb(25 25 112) | |
mintcream | #f5fffa | rgb(245 255 250) | |
mistyrose | #ffe4e1 | rgb(255 228 225) | |
moccasin | #ffe4b5 | rgb(255 228 181) | |
navajowhite | #ffdead | rgb(255 222 173) | |
navy | #000080 | rgb(0 0 128) | |
oldlace | #fdf5e6 | rgb(253 245 230) | |
olive | #808000 | rgb(128 128 0) | |
olivedrab | #6b8e23 | rgb(107 142 35) | |
orange | #ffa500 | rgb(255 165 0) | |
orangered | #ff4500 | rgb(255 69 0) | |
orchid | #da70d6 | rgb(218 112 214) | |
palegoldenrod | #eee8aa | rgb(238 232 170) | |
palegreen | #98fb98 | rgb(152 251 152) | |
paleturquoise | #afeeee | rgb(175 238 238) | |
palevioletred | #db7093 | rgb(219 112 147) | |
papayawhip | #ffefd5 | rgb(255 239 213) | |
peachpuff | #ffdab9 | rgb(255 218 185) | |
peru | #cd853f | rgb(205 133 63) | |
pink | #ffc0cb | rgb(255 192 203) | |
plum | #dda0dd | rgb(221 160 221) | |
powderblue | #b0e0e6 | rgb(176 224 230) | |
purple | #800080 | rgb(128 0 128) | |
rebeccapurple | #663399 | rgb(102 51 153) | |
red | #ff0000 | rgb(255 0 0) | |
rosybrown | #bc8f8f | rgb(188 143 143) | |
royalblue | #4169e1 | rgb(65 105 225) | |
saddlebrown | #8b4513 | rgb(139 69 19) | |
salmon | #fa8072 | rgb(250 128 114) | |
sandybrown | #f4a460 | rgb(244 164 96) | |
seagreen | #2e8b57 | rgb(46 139 87) | |
seashell | #fff5ee | rgb(255 245 238) | |
sienna | #a0522d | rgb(160 82 45) | |
silver | #c0c0c0 | rgb(192 192 192) | |
skyblue | #87ceeb | rgb(135 206 235) | |
slateblue | #6a5acd | rgb(106 90 205) | |
slategray | #708090 | rgb(112 128 144) | |
slategrey | #708090 | rgb(112 128 144) | |
snow | #fffafa | rgb(255 250 250) | |
springgreen | #00ff7f | rgb(0 255 127) | |
steelblue | #4682b4 | rgb(70 130 180) | |
tan | #d2b48c | rgb(210 180 140) | |
teal | #008080 | rgb(0 128 128) | |
thistle | #d8bfd8 | rgb(216 191 216) | |
tomato | #ff6347 | rgb(255 99 71) | |
turquoise | #40e0d0 | rgb(64 224 208) | |
violet | #ee82ee | rgb(238 130 238) | |
wheat | #f5deb3 | rgb(245 222 179) | |
white | #ffffff | rgb(255 255 255) | |
whitesmoke | #f5f5f5 | rgb(245 245 245) | |
yellow | #ffff00 | rgb(255 255 0) | |
yellowgreen | #9acd32 | rgb(154 205 50) |
颜色格式转换能做什么、不做什么
本页只做一件事：同一个颜色在不同写法之间的转换。 和它相邻的几件事分别属于别的工具，混在一起只会让人更糊涂：
| 你想做的事 | 在哪儿做 |
|---|---|
| 把一个颜色换成另一种写法 | 就是本页 |
| 生成线性、径向、锥形渐变代码 | 用 CSS 渐变生成器，调好色可以回本页换写法 |
| 把一段 CSS 代码排版整齐 | 用 CSS 格式化 |
| 看 3b 这样的十六进制数本身是多少 | 用 进制转换 |
| 拿纯色铺满屏幕查坏点 | 用 屏幕检测 |
| 从屏幕或图片上吸取颜色 | 需要取色器，本页只提供系统色板，不做屏幕吸色与图片取色 |
| 生成互补色、三分色这类配色方案 | 属于配色方案生成，本页的九档色阶只是固定的只读演示 |
| 查 Pantone 色号、做印刷级 CMYK 分色 | 需要商业色卡与 ICC 配置，本页的 CMYK 只是估算值 |
英文语境下这类工具叫 color converter online 或 color format converter， 搜 hex to rgb、rgb to hex、hex to hsl、rgb to oklch、oklch converter 找到的都是同一件事；对比度那一块英文里叫 wcag contrast checker，也在本页里。
还有三种 CSS 新写法本页明确不解析：color-mix()、 相对颜色语法 rgb(from …)，以及 color(display-p3 …) 这类广色域函数。 它们要么依赖运行时上下文，要么需要另一套色域口径，猜一个结果给你不如直接说不支持—— 请先在浏览器里求值，再把结果粘进来。