颜色格式转换与对比度检测
Web 与印刷跨色彩空间双向转换工具，提供 WCAG 2.1 相对亮度审计、设计系统色阶生成与色彩调和搭配方案。
rgb(102, 126, 234) • hsl(229°, 76%, 66%) • 100% 不透明度
通道数值调节
多格式色彩代码（点击一键复制）
共 13 种格式已同步#667EEA
标准大写十六进制 Web 颜色代码
#667EEA
含 8 位 Alpha 透明度通道 (100%)
rgb(102, 126, 234)
红、绿、蓝三原色整型分量 [0–255]
rgba(102, 126, 234, 1)
标准 CSS RGBA 颜色格式与不透明度
rgb(102 126 234 / 100%)
现代 CSS Color Level 4 空格分隔语法
hsl(229, 76%, 66%)
色相 (0–360°)、饱和度 (0–100%)、明度 (0–100%)
hsla(229, 76%, 66%, 1)
带透明度通道的 CSS HSLA 颜色格式
hsv(229°, 56%, 92%)
色相、饱和度、明度（Figma / PS 设计软件通用）
cmyk(56%, 46%, 0%, 8%)
青、品红、黄、黑印刷四色减色模型
~cornflowerblue (#6495ed)
最接近的 W3C 颜色 (色差: 23)
--color-primary: #667eea;
开箱即用的 CSS 自定义属性声明
bg-[#667eea] text-[#667eea]
Tailwind CSS 任意值背景与文字工具类
Color(0xFF667EEA)
Flutter / Dart 及 Android 原生 ARGB 颜色整数
核心使用指南与操作流程
- 输入或取色：在 HEX 字段直接键入颜色代码（如 #6366f1），手动输入 RGB 或 HSL 数值，唤起原生色盘，或点击“屏幕吸管”直接吸取显示器任意像素点。
- 微调通道分量：拖动红/绿/蓝、色相、饱和度、明度或 Alpha 不透明度滑块，直观调试中间过渡色调与透明度效果。
- 提取生产级代码：在右侧代码卡片中一键复制所需格式，包括 6/8 位 HEX、传统 rgba/hsla、现代 CSS Color 4 空格分隔语法、HSV、CMYK 及最接近的 CSS 英文关键字。
- 审查无障碍对比度：切换至“WCAG 对比度检测”选项卡，搭配不同文字与背景色，实时评估在 AA/AAA 标准下的正文、大标题及 UI 控件辨识度。
- 构建色阶与调配方案：在“明暗色阶”选项卡中提取 10 阶 UI 灰度/高光阶梯，或在“色彩调和搭配”中获取互补色、类似色、三角色等平衡调色板。
色彩空间规范与通道格式技术参考
不同的显示硬件、图形渲染管线与平面设计软件依据特定的几何坐标模型与量化边界来表达色彩。下表全面对比了各类格式的通道取值、数学基准与工程应用场景：
| 格式名称 | 规范语法形式 | 通道参数边界 | 坐标物理基准 | 主要工程应用领域 |
|---|---|---|---|---|
| HEX (#RGB / #RRGGBB) | #6366F1 或 #6366F1CC | R, G, B: 00–FF (0–255) · Alpha: 00–FF | sRGB 色彩空间 8 位无符号整数编码 | Web 样式表标准、Design Tokens、Figma/Sketch、精简紧凑序列化 |
| RGB / RGBA (传统语法) | rgba(99, 102, 241, 0.85) | R, G, B: 0–255 · Alpha: 0.0–1.0 | 显示器三原色加色混合物理基准 | Canvas 2D 上下文、WebGL 像素缓冲区、CSS Level 3 经典属性声明 |
| HSL / HSLA (传统语法) | hsla(239, 84%, 67%, 0.85) | H: 0–360° · S: 0–100% · L: 0–100% · A: 0.0–1.0 | 圆柱形双锥体极坐标投影模型 | 设计系统色阶推导、主题调色板微调、程序化亮度步进生成 |
| CSS Color 4 (现代语法) | rgb(99 102 241 / 85%) 或 hsl(239deg 84% 67% / 85%) | 空格分隔色彩分量通道，斜杠声明 Alpha 透明度 | W3C CSS Color Module Level 4 统一定义规范 | 现代前端样式表、动态 CSS 自定义属性复合解耦 |
| HSV / HSB | hsv(239°, 59%, 95%) | H: 0–360° · S: 0–100% · V: 0–100% | 圆柱形单锥体色彩几何空间 | 数字绘画工具、Adobe Photoshop、Illustrator 及 Figma 拾色器 |
| CMYK (印刷减色) | device-cmyk(59% 58% 0% 5%) | C, M, Y, K: 0–100% | 油墨网点吸光减色四色印刷估算 | 印刷印前打样规划、实体包装设计、胶印油墨色彩配比评估 |
| W3C 规范命名色彩 | indigo, slateblue, tomato | 148 种 W3C 预定义标准英文关键字别名 | W3C SVG 1.0 / CSS Color Module Level 3 字典规范 | 原型极速搭建、SVG 图形标记、语义化内联样式与单元测试 |
色彩格式转换逻辑与计算原理剖析
无需死记硬背抽象的数学公式。深入理解色彩数据在不同数学模型与视觉感知维度之间的映射机理，有助于更精准地掌控前端色彩：
1. HEX 到 RGB：十六进制切分与基数换算
16 进制转 10 进制每个 6 位十六进制颜色均可精确切分为三组两位字符，分别代表红、绿、蓝通道。以经典的 #6366F1 为例：
针对 8 位十六进制（如 #6366F1CC），末尾追加的 CC 对应十进制 204。将 204 除以 255 即得出 0.80（80% 不透明度），最终对应标准 CSS 声明 rgba(99, 102, 241, 0.8)。
2. HSL：符合人类认知心智模型的色轮
色相 / 饱和度 / 明度RGB 面向显示器物理发光点，而 HSL 则完美贴合设计师推导配色体系时的思维习惯：
- 色相 Hue (0–360°)：色轮环形坐标。0° 为红色，120° 为绿色，240° 为蓝色。旋转角度即可切换色系，而完全不破坏视觉明暗平衡。
- 饱和度 Saturation (0–100%)：色彩纯度。0% 为完全无色灰阶，100% 为最鲜艳浓烈的色彩。
- 明度 Lightness (0–100%)：明暗程度。0% 为纯黑，50% 为标准主色彩，100% 则为纯白。
工程调色技巧：制作按钮悬停（Hover）亮态时，只需直接将明度提升 10%（67% → 77%），完全无需盲猜三个 RGB 分量。
3. 人眼生物学：为什么绿光感知亮度远高于蓝光
相对感知亮度人类视网膜对不同波长光线的敏感度存在显著差异，生物进化使人眼对绿光波段具有极高的感知敏感度：
这深入解释了为什么在明亮的黄绿色背景上放置白色文字几乎无法看清（对比度严重不达标），而在纯蓝背景上白字却显得异常清晰锐利。WCAG 相对亮度算法严格遵循了该生物学感光加权模型。
4. 屏幕加色 RGB vs 印刷减色 CMYK：偏色根源
光线发射 vs 油墨吸收数字屏幕与纸质印刷品之间的视觉偏差，源自基础光学物理原理的根本对立：
- 屏幕显示 (RGB 加色法)：像素主动发射色光。红、绿、蓝三束色光全功率重叠时汇聚成耀眼的纯白光。
- 物理印刷 (CMYK 减色法)：纸张被动反射环境光。青、品红、黄、黑四色油墨涂层吸收特定波长的光线。
核心经验总结：OLED/Retina 屏幕呈现的高饱和度发光青蓝完全处于 CMYK 印刷色域之外。经本工具转换为 CMYK 后，能将其科学约束在安全的物理油墨表现边界内。
WCAG 2.1 无障碍对比度标准与检测阈值
Web 内容无障碍指南（WCAG 2.1）用于衡量前景文本及核心图标与其背景之间的色彩反差。充足的对比度确保弱光环境、户外强光以及视力受损用户均能无障碍阅览信息：
| 合规认证等级 | 所需最低比值 | 适用 UI 交互与文字类型 | 规范标准指导准则 |
|---|---|---|---|
| WCAG AA 常规文本 (Normal Text) | 4.5 : 1 | 正文排版、长文本、数据表格单元格、表单输入框标签（字号 < 18pt 常规或 < 14pt 粗体） | 所有主流数字化产品必须达到的无障碍基线标准（ADA、Section 508 与 EN 301 549 强制要求）。 |
| WCAG AA 大号文本 (Large Text) | 3.0 : 1 | 一级/二级标题、Banner 标语、醒目数字指标（字号 ≥ 18pt / 24px 常规或 ≥ 14pt / 18.67px 粗体） | 由于文字笔画更宽厚，视觉光学重心更强，因此允许适度放宽对比度比值要求。 |
| WCAG AA UI 控件与图形 (UI Components) | 3.0 : 1 | 输入框边框、单选/复选框轮廓、按钮激活态外框、键盘 Tab 聚焦环、关键状态图标 | 确保交互边界与功能性视觉指引在背景衬托下清晰易辨，杜绝界面边界模糊不清。 |
| WCAG AAA 极致增强常规 (Enhanced Normal) | 7.0 : 1 | 深度长文阅读、医疗健康管理软件、政府政务公开系统与金融交易终端 | 国际最高规格的辨识度标准，专为保障重度视力障碍与色弱人群无障碍阅读而设计。 |
| WCAG AAA 极致增强大号 (Enhanced Large) | 4.5 : 1 | 需要极高辨识度的标题、关键状态通告及大字号提示横幅 | 在强烈户外阳光照射或极暗屏幕亮度等复杂多变的环境光下，依然能毫不费力地顺畅阅览。 |
半透明层 (Alpha) 叠加混合计算法则
当文本或卡片容器带有半透明度（例如 80% Alpha）时，底层的背景色会透过上层图层发生色彩透射混合。无障碍对比度检测必须评估最终在屏幕上渲染混合后的合成色彩，而非孤立的前景色。当检测未通过时，最快捷的工程优化手段是将文本明度向 0%（更暗）或 100%（更亮）进行微调。
工程化落地：设计令牌 (Design Tokens) 与样式框架集成
现代化前端大型工程推荐将色彩定义抽离为 Design Tokens。以下是针对 CSS 原生变量与主流原子化样式框架的标准落地范式：
/* CSS Color Module Level 4 现代语法 */
.badge {
/* 8 位 HEX 带 80% Alpha 透明度 */
background-color: #6366f1cc;
/* 空格分隔 RGB 与斜杠透明度声明 */
color: rgb(255 255 255 / 95%);
border: 1px solid rgb(99 102 241 / 0.4);
/* 显式携带 deg 角度单位的现代 HSL 语法 */
outline-color: hsl(239deg 84% 67% / 0.5);
}/* 具备动态透明度混合能力的设计令牌架构 (tokens.css) */
:root {
/* 存储裸通道三元组，以便在不同组件中动态解耦合成不透明度 */
--color-primary-rgb: 99 102 241;
--color-surface-rgb: 30 41 59;
}
.panel-container {
/* 在不篡改底层 Design Tokens 定义的前提下动态合成不透明度 */
background-color: rgb(var(--color-surface-rgb) / 0.85);
border: 1px solid rgb(var(--color-primary-rgb) / 0.3);
box-shadow: 0 4px 24px rgb(var(--color-primary-rgb) / 0.15);
}/* CSS Color 4 相对色彩语法 (Relative Color Syntax) */
:root {
--brand: #6366f1;
}
.button-hover {
/* 保持基础色相与饱和度不变，将明度动态提升 10% */
background-color: hsl(from var(--brand) h s calc(l + 10%));
}
.button-subtle {
/* 强制覆盖饱和度为 35%，并赋予 15% 不透明度 */
background-color: hsl(from var(--brand) h 35% l / 0.15);
}// tailwind.config.js - RGB 通道设计令牌扩展
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#6366f1',
600: '#4f46e5',
// 原生支持 Tailwind 原子类透明度后缀：bg-brand-dynamic/80
dynamic: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
},
},
},
},
};明暗色阶 (Tints / Shades) 与色彩调和配色法则
成熟的 UI 设计系统依赖程序化色阶阶梯与色轮几何旋转来构建状态完备的组件库：
明暗色阶生成 (Tints vs Shades)
浅色阶 (Tint)：将基础 RGB 色值向纯白（#FFFFFF）做线性插值，增加明度。在 UI 组件库中，50–200 浅色阶常用作徽章标签底色、表格悬停条纹与选中高亮。
深色阶 (Shade)：将基础色值向纯黑（#000000）插值，降低明度。700–950 深色阶则用于高反差文本、激活边框与阴影景深。
色轮几何旋转与调和规律
固定饱和度与明度，围绕 360 度色相环旋转色相坐标 H，可推导出严谨的经典调和配色：
- 互补色搭配：位于色轮正对极点，偏移
(H + 180°) % 360 - 类似色搭配：位于色轮相邻两侧，偏移
(H ± 30°) % 360 - 三角色搭配：正三角形等距分布，偏移
(H + 120°) % 360与(H + 240°) % 360 - 四角色搭配：双重互补矩形分布，依次偏移 +90°、+180° 与 +270°
主流 UI 设计系统基础色板基准测算表
业界常用品牌与前端框架色彩在纯白与纯黑背景下的测算基准值，标注了光度学相对亮度与实测无障碍对比度合规表现：
| 色块 | 色彩标识名称 | HEX 代码 | RGB 分量 | HSL 极坐标 | 相对亮度 | 在 #FFFFFF 底色上 | 在 #000000 底色上 |
|---|---|---|---|---|---|---|---|
| Tailwind 经典靛蓝 (Indigo) | #6366F1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) | 0.181 | 4.88:1 (AA 通标) | 4.30:1 (UI 通标) | |
| 翡翠绿 (Emerald Green) | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) | 0.363 | 2.54:1 (未通过) | 8.26:1 (AAA 增强) | |
| 玫瑰红 (Rose Crimson) | #F43F5E | rgb(244, 63, 94) | hsl(350, 89%, 60%) | 0.245 | 3.56:1 (大字通标) | 5.90:1 (AA 通标) | |
| 琥珀金 (Amber Gold) | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | 0.443 | 2.13:1 (未通过) | 9.86:1 (AAA 增强) | |
| 天蓝 (Sky Blue) | #0EA5E9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) | 0.339 | 2.70:1 (未通过) | 7.78:1 (AAA 增强) | |
| 板岩暗灰 (Slate 800) | #1E293B | rgb(30, 41, 59) | hsl(217, 33%, 17%) | 0.024 | 14.18:1 (AAA 增强) | 1.48:1 (未通过) | |
| 纯白 (Pure White) | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.000 | 1.00:1 (未通过) | 21.00:1 (AAA 增强) | |
| 纯黑 (Pure Black) | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 0.000 | 21.00:1 (AAA 增强) | 1.00:1 (未通过) |
Frequently Asked Questions
如何将 HEX 十六进制颜色代码转换为 RGB 或 RGBA？
标准的 6 位 HEX 代码（如 #6366F1）由三组各 2 位的十六进制数组成，分别对应红（R）、绿（G）、蓝（B）通道。转换时，只需将每组 16 进制基数换算为 0–255 范围内的 10 进制整型数值（例如：63 换算为 99，66 换算为 102，F1 换算为 241，得出 rgb(99, 102, 241)）。对于 3 位简写（如 #F09），先将每个字符复制加倍（#FF0099）后再换算。对于包含透明度的 8 位 HEX（如 #6366F1CC），末尾两位 CC（十进制 204）除以 255 得出 Alpha 浮点数值 0.8，最终得到 rgba(99, 102, 241, 0.8)。
为什么现代设计系统（Design System）更推荐使用 HSL 而非 RGB？
RGB 是建立在显示器发光物理硬件之上的加色模型，三个分量互相交织，想要单独调整明暗或纯度，必须同步重新测算并改动所有三个通道，这极不符合人类的直觉思维。而 HSL（色相 Hue、饱和度 Saturation、明度 Lightness）将色彩从色相环角度（0–360°）中彻底独立出来。开发者和设计师只需固定主色相，微调 Lightness 百分比数值，即可程序化衍生出 50–950 级调色阶梯、按钮悬停浅亮态、聚焦边框以及暗色主题反转，大幅提升了设计系统的研发工程效率。
设计工具（Figma / Photoshop）中的 HSB/HSV 与 CSS 中的 HSL 有何根本区别？
两者均将 RGB 映射至极坐标空间，但对“亮度”的物理定义截然不同。在 HSL 空间中，纯正的高饱和度色彩处于严格的 50% 明度（Lightness）位置，当明度升至 100% 时结果必定是纯白；而在 HSB/HSV 空间中，100% 的明度（Value/Brightness）代表纯色相的最高强度光亮，只有当饱和度同时归零时才会呈现纯白。因此，从 Figma 或 Sketch 的 HSB 拾色器中复制出的数值，若未经转换直接填入 CSS hsl() 函数中，会导致渲染出的颜色严重过亮发白。
WCAG 2.1 对比度计算公式与 AA / AAA 合规阈值具体是如何规定的？
根据 W3C WCAG 2.1 规范定义，对比度比值公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 为浅色对象的相对亮度，L2 为深色对象的相对亮度，计算基于 sRGB 通道的伽马线性化反卷积。加数 0.05 用于抵消环境光折射造成的漫反射眩光。规范基线要求：Level AA 要求普通正文（< 18pt 或 < 14pt 粗体）至少达到 4.5:1，大号文本（≥ 18pt 或 ≥ 14pt 粗体）及 UI 控件边框至少达到 3.0:1；最高标准的 Level AAA 则分别要求正文达到 7.0:1，大号文本达到 4.5:1。
CSS Color Module Level 4 的空格与斜杠语法如何工作，浏览器支持度如何？
现代 CSS Color 4 规范废弃了繁琐的逗号分隔符，统一采用空格分隔各分量通道，并使用正斜杠（/）显式声明 Alpha 透明度通道，例如 rgb(99 102 241 / 80%) 或 hsl(239deg 84% 67% / 0.8)。新规范支持透明度以小数（0.8）或百分比（80%）灵活表示，色相通道允许直接附加 deg、rad 或 turn 等角度单位，并统一了以往 rgb() 与 rgba() 的函数区分。该语法目前已在 100% 的现代主流浏览器（Chrome 65+、Safari 12.1+、Firefox 52+、Edge 79+）中得到原生支持。
为什么屏幕上的 RGB 颜色转换为印刷 CMYK 后经常发灰或偏色？
屏幕显示器通过发光像素发射红、绿、蓝三原色光线（加色原理），具有极宽广的高动态发光色域；而纸质商业印刷依靠青、品红、黄、黑四色油墨吸收光线（减色原理）。理论公式 K = 1 - max(R,G,B) 仅能在理想物理状态下提供近似估算。实际工业印刷必须受限于纸张吸墨率、油墨总覆盖量（TAC）及经过严格校准的 ICC 颜色配置文件（如 Japan Color 或 FOGRA39），导致许多在屏幕上极其惊艳的高纯度电光蓝、荧光绿被不可避免地压缩至狭窄的印刷色域内。
8 位十六进制颜色格式 (#RRGGBBAA) 是如何定义透明度通道的？
8 位 HEX 代码是在传统 6 位 RGB 颜色后追加了两位表示 Alpha 不透明度的十六进制字节。该字节的取值范围为 00（完全透明 / 0% 不透明度）至 FF（完全不透明 / 100% 不透明度）。不透明度百分比的计算方式为：十六进制数值转换为十进制整数后除以 255。例如：#6366f180 中的 80 对应十进制 128，128 / 255 ≈ 50.2% 不透明度。现代所有桌面端与移动端浏览器均已全量支持 8 位 HEX 与 4 位简写格式（#RGBA）。
本工具如何精准匹配最接近的 W3C 规范命名 CSS 颜色？
算法引擎预载了 W3C 标准收录的全部 148 种标准化 CSS / SVG 命名颜色定义，并将其一一映射至三维三维笛卡尔色彩空间。对于用户输入的任意 RGB 颜色，系统通过计算欧几里得空间几何距离公式 d = sqrt((R1 - R2)² + (G1 - G2)² + (B1 - B2)²)，对全部 148 个标准关键词进行穷举比对。几何距离值最小的色值即判定为最接近的匹配项；若欧几里得距离为 0，则表明与 W3C 标准命名颜色完全重合。