颜色代码转换器

使用方法

如何转换

在输入框直接粘贴任意一种颜色值，下方六张结果卡（HEX / RGB / RGBA / HSL / HSLA / CSS 变量）随输入实时刷新，无需点击任何按钮。支持三类主流写法：① 十六进制 HEX，如 #4a90d9、#abc，3 位缩写自动展开为 6 位；新增支持 8 位 HEX #RRGGBBAA（如 #FF5733CC）与 4 位缩写 #RGBA（如 #F53C），alpha 通道自动展开，HEX 输出卡在含半透明时自动输出 8 位。可带可不带 # 号，大小写均可；② rgb() / rgba() 函数，如 rgb(74, 144, 217)、rgba(74, 144, 217, 0.5)，也支持百分比写法 rgb(50%, 20%, 80%)；③ hsl() / hsla() 函数，如 hsl(210, 65%, 57%)。任何输入会先解析成统一的内部表示，再派生出全部六种格式，保证各卡片结果彼此一致。

拾色器与 CSS 变量

输入框右侧内嵌了系统拾色器（input[type=color]），点击色块弹出调色盘，选色后自动回填输入框并联动全部结果卡，适合「大概知道想要什么颜色、但不知道代码」的场景。预览大块实时显示当前颜色在页面上的实际效果，方便肉眼确认。第六张卡输出 CSS 自定义属性写法（如 --brand: #4A90D9;），复制后粘贴到样式表的 :root 中，组件内用 var(--brand) 引用——以后换主题色只需改一处定义，不用全局搜索替换。

对比度检查怎么读

六张结果卡下方的「对比度检查」区块，会把当前颜色分别放到纯白与纯黑两种背景上，按 WCAG 2.1 公式算出文字与背景的对比度比值，并用徽章标注达标情况：正常文本 AA 要求比值 ≥ 4.5、AAA 要求 ≥ 7；大文本（约 18pt 以上或 14pt 粗体）门槛放宽为 AA ≥ 3、AAA ≥ 4.5。例如输入 #767676，与纯白的比值约为 4.54，刚好压过正常文本 AA 线——这类「卡线」颜色在低亮度屏幕上会变得难读，建议再拉开一点差距。当某一侧不达标时，该行行尾会出现「建议色」按钮：按 HSL 亮度 ±5% 步进搜索最接近原色、且对该背景达到 AA 的颜色，点击即回填输入框，可继续微调。

CSS 命名色的使用方法与适用场景

「智能颜色转换」下方的「CSS 命名色查询」区块支持双向查询：输入颜色名（如 tomato，大小写不敏感）得到 HEX / RGB 与色块；输入 HEX / rgb() / hsl() 值则反查 RGB 欧氏距离最近的命名色与距离值，两条路径的结果都能一键回填到上方输入框联动全部转换卡。命名色什么时候用？① 可读性：color: tomato 比 color: #FF6347 更能让人一眼看懂意图，写示例代码、原型或教学材料时优先用命名色；② 设计稿对照：设计师口头说「就那个番茄红」，用反查功能找到最近命名色能快速对齐词汇；③ 团队沟通：评审与提交说明里写 cornflowerblue 比贴一串色值更不容易抄错。注意两点：148 个命名色是固定集合，覆盖不了任意色值，精确还原设计稿仍应使用 HEX；反查给出的「最近命名色」与原色可能存在肉眼可辨的色差，用于沟通参考而非直接替代。

常见问题

数据会上传吗？不会。本工具全部转换在浏览器本地用 JavaScript 完成，不上传、不存储任何输入的颜色值，断网亦可用，可以放心粘贴设计稿与内部组件库的颜色。

支持哪些颜色格式？输入端支持 HEX（3/4/6/8 位：#RGB、#RGBA、#RRGGBB、#RRGGBBAA）、rgb()/rgba()（数字与百分比）、hsl()/hsla() 五种写法；输出端固定给出 HEX、RGB、RGBA、HSL、HSLA、CSS 变量六张卡片。透明度的表示：rgba/hsla 的第四个参数是 0~1 的小数（1 表示完全不透明）；HEX 卡片在 alpha=1 时输出 6 位色值，alpha<1 时自动输出 8 位 #RRGGBBAA，便于直接复制到 CSS color 属性中使用。

3 位 HEX 是什么？CSS 允许把 #aabbcc 这类每两位相同的颜色缩写成 #abc——每位数字重复一次展开（a → aa）。它是 6 位 HEX 的简写而非另一种颜色空间，本工具会自动展开：输入 #abc 输出 #AABBCC、rgb(170, 187, 204)。注意 #abcd 这样的 4 位写法不属于此规则，会提示无法识别。

为什么 HSL 和 RGB 数值对不上？HSL 与 RGB 是同一颜色的两种坐标表示（圆柱坐标 vs 三维立方），换算涉及浮点运算，H、S、L 显示时四舍五入到整数会带来 ±1~2 的精度损失。例如 #4a90d9 精确转换后 H=210.63，显示为 211；把 hsl(211, 65%, 57%) 再转回 RGB 得到 (74, 143, 217)，G 通道与原来的 144 差 1，属正常舍入误差，不是转换错误。

rgba 的 alpha 在 HEX 卡里去哪了？网页中最常用的 6 位 HEX 不携带透明度信息（带 alpha 的 8 位写法 #RRGGBBAA 兼容性尚可但历史包袱多）。本工具把 alpha 保真输出在 RGBA 与 HSLA 两张卡里，HEX 卡输出纯色部分，需要半透明时请直接复制 RGBA 卡。

对比度 4.5 是什么标准？这是 W3C《无障碍内容指南》WCAG 2.1 对「正常字号文本」的 AA 级最低对比度要求，公式为 (L亮 + 0.05) / (L暗 + 0.05)，其中 L 是经 sRGB 线性化后的相对亮度。4.5:1 的目标是让视力较弱、色觉障碍或在强光环境下使用的用户也能看清正文；AAA（≥7:1）面向更严格的无障碍场景；大字号文本因笔画更粗、可辨认性更高，门槛放宽为 3:1。定网页主题色、图表配色或排版白底黑字前，先在这里把主色对白底与黑底的比值各跑一遍，能避免上线后再因可读性问题返工。

CSS 一共有多少个命名颜色？按 W3C《CSS Color Module Level 4》规范，共有 148 个实色命名颜色（含为纪念 Eric Meyer 之女而加入的 rebeccapurple），其中 aqua/cyan、fuchsia/magenta 以及 gray/grey 系列 9 组是同色异名，指向相同 HEX 值。transparent 与 currentcolor 虽也是合法关键字，但前者是全透明、后者跟随上下文，都不是实色，故本页命名色查询不纳入。全部 148 个名称与色值已内置在页面里，查询过程纯本地完成。