颜色代码转换器
Web 开发中的颜色可以用多种格式指定：十六进制、RGB、HSL 和命名颜色。此工具在所有格式之间进行转换，显示可视化预览，计算无障碍对比度，并生成互补色调色板。
规范
常见用例
- 将设计师提供的十六进制颜色转换为 HSL 以便于调整
- 检查文本颜色是否满足 WCAG 无障碍标准
- 为 UI 设计生成调色板
- 调试未按预期渲染的 CSS 颜色值
- 查找 CSS 命名颜色的十六进制等价值
功能
- 解析十六进制（#RGB、#RRGGBB、#RRGGBBAA）、RGB、RGBA、HSL、HSLA 和命名颜色
- 在所有颜色格式之间即时转换
- HEX8 输出（带透明度的 8 位十六进制）
- 可视化颜色预览，支持深色/浅色背景切换
- 在白色和黑色背景上的文本预览
- 计算与黑色和白色的 WCAG 对比度
- 浅色/深色颜色分类
- 生成互补色、类似色、三角色、四角色和单色调色板
- 显示亮度和无障碍建议
示例
提示
- HSL 通常更易于使用：H 是色调，S 是饱和度，L 是亮度。
- 对于无障碍文本，至少应达到 4.5:1 的对比度（WCAG AA）。
- 8 位十六进制格式（#RRGGBBAA）包含 Alpha 透明度。
- CSS4 引入了 oklch() 等新色彩空间，以实现更好的感知均匀性。
理解 颜色代码转换器
CSS 颜色值使用多种表示系统为 Web 样式定义颜色。最常见的是十六进制（#RRGGBB），其中每对十六进制数字表示红、绿、蓝通道，范围从 00（0）到 FF（255）。简写形式 #RGB 将每个数字加倍（#F00 等于 #FF0000）。8 位形式 #RRGGBBAA 增加了 Alpha 透明通道。
函数表示法提供了更直观的颜色规范。RGB（rgb(255, 0, 0)）以 0-255 的整数或百分比指定通道。HSL（hsl(0, 100%, 50%)）使用色调（0-360 度色轮）、饱和度（0-100%）和亮度（0-100%），许多设计师认为这种方式在创建调色板和调整颜色时更加直观。RGB 和 HSL 都支持通过 rgba() 和 hsla() 或现代语法 rgb(255 0 0 / 50%) 设置 Alpha 透明度。
颜色无障碍是 Web 开发中的关键问题。WCAG 2.1 定义了最低对比度要求：正常文本 4.5:1（AA 级）、大文本 3:1、增强对比度 7:1（AAA 级）。对比度不足会使低视力或色觉缺陷的用户难以或无法阅读文本。
CSS 还支持 148 种命名颜色（如 rebeccapurple、cornflowerblue、tomato）、currentColor 关键字以及 HWB（色调-白度-黑度）、LAB、LCH 和 OKLCH 等新色彩空间，这些空间提供感知均匀的颜色操作。新色彩空间对于生成和谐的调色板和平滑渐变特别有用。
十六进制（#FF0000）和 RGB（rgb(255,0,0)）都指定红、绿、蓝通道值——十六进制使用 16 进制，RGB 使用十进制整数。HSL（hsl(0,100%,50%)）使用色调（色轮上 0-360 度的颜色本身）、饱和度（强度）和亮度（明暗度）来表示颜色，许多开发者认为这种方式在创建变体时更加直观。三种格式可以表示相同的颜色，但 HSL 通过调整单个值就能轻松生成更浅、更深或更柔和的变体。
Alpha 通道控制透明度，范围从 0（完全透明）到 1（完全不透明）。在十六进制表示中，Alpha 作为额外的两位数字追加——#FF000080 表示 50% 透明的红色（80 十六进制 = 128 十进制）。在函数表示中，语法为 rgba(255,0,0,0.5) 或现代形式 rgb(255 0 0 / 50%)。Alpha 透明度对于叠加层、水印和分层 UI 元素至关重要。对于 WCAG 合规性，AA 级要求正常文本对比度至少为 4.5:1，大文本（18px 以上粗体或 24px 以上常规）至少为 3:1，而 AAA 级要求正常文本 7:1，大文本 4.5:1。图标、边框和表单控件等非文本元素需要与相邻颜色至少 3:1 的对比度。
LAB 和 OKLCH 是感知均匀的色彩空间，其中等量的数值变化产生视觉上等量的颜色差异，使它们在生成调色板和平滑渐变方面更加优越。OKLCH（亮度、色度、色调）在 CSS 中特别有用，因为调整亮度会产生自然且可预测的结果。两者都受到现代 CSS 的 oklch() 和 lab() 函数支持。