颜色转换在线工具 - HEX、RGB、HSL 与前端颜色排查

在线转换 HEX、RGB 和 HSL 颜色值，适合 CSS 变量、Tailwind 主题、Canvas 绘制和前端界面调试，并说明透明度、颜色空间与无障碍对比度的使用边界。

功能特点

  • 在 HEX、RGB 和 HSL 之间转换颜色值并查看通道结果
  • 辅助整理 CSS 变量、设计稿颜色和 Tailwind 主题中的底层色值
  • 为 Canvas、SVG 和前端组件调试提供可复制的 rgb / hsl 表示
  • 说明 alpha 透明度、颜色空间和 WCAG 对比度检查不能混同于基础格式转换

使用方法

  1. 输入 #336699、rgb(51, 102, 153) 或 hsl(210, 50%, 40%) 等支持的颜色格式
  2. 查看转换后的 HEX、RGB、HSL 和红绿蓝通道数值
  3. 将结果放回 CSS、Tailwind 配置或 Canvas 代码，并在真实界面检查透明度和对比度

示例输入

  • CSS 变量值

    #336699

    适合把 CSS 变量中的实际色值转换成统一的 HEX、RGB、HSL 表示。

  • Tailwind 主题核对

    #1d4ed8

    Tailwind 类名本身不是颜色值，需要先找到主题配置中的实际 HEX/RGB，再进行转换。

  • Canvas / SVG 绘图

    rgb(51, 102, 153)

    适合在 Canvas、SVG 和组件样式之间转换颜色表达，避免只凭肉眼判断。

  • 可读性检查前的基础色

    #334155

    当前工具只转换不透明基础色；还要在实际背景上另行计算文字对比度。

示例输出

  • CSS 变量值

    #336699 = rgb(51, 102, 153) = hsl(210, 50%, 40%)；#f8fafc = rgb(248, 250, 252)

  • Tailwind 主题核对

    #1d4ed8 = rgb(29, 78, 216) = hsl(224, 76%, 48%)

  • Canvas / SVG 绘图

    rgb(51, 102, 153) = #336699 = hsl(210, 50%, 40%)

  • 可读性检查前的基础色

    前景 #334155 / 背景 #ffffff；rgba 的最终颜色必须先与真实背景合成，当前转换不直接给出 WCAG 结论

常见错误

  • 当前基础转换支持 HEX、RGB 和 HSL，不接受 Tailwind 类名、CSS 变量名或任意设计工具 token。
  • 透明度会受到背景色影响；同一个 rgba 颜色放在白色、深色或图片背景上，最终观感和对比度都不同。
  • HSL 的色相、饱和度和亮度不是感知均匀的颜色空间，不能把数值变化简单当成视觉等距变化。
  • 颜色转换结果正确不代表文本满足 WCAG 对比度要求，还要使用前景色和实际背景色计算并检查字号。
  • HEX、RGB 和 HSL 的舍入会产生细微差异，设计系统或品牌色应保留原始色值作为来源。

适用场景

  • CSS 变量和主题整理
  • Tailwind 颜色 token 核对
  • Canvas / SVG 绘图调试
  • 透明度叠加排查
  • 无障碍对比度检查

实操检查

  • 核对 HEX 往返转换

    固定输入：#336699；步骤：点击“转换颜色”，再分别输入 #369 和 hsl(210, 50%, 40%) 重复转换；预期结果：三次结果都显示 HEX #336699、RGB rgb(51, 102, 153)、HSL hsl(210, 50%, 40%)；失败判断：三位 HEX 没有展开、通道值不一致，或 HSL 结果无法回到同一基础颜色。

  • 核对不支持格式的失败状态

    固定输入：rgba(51, 102, 153, 0.5)；步骤：点击“转换颜色”，再输入 rgb(256, 0, 0) 并再次点击；预期结果：两次都清空结果并显示 Unsupported color format；失败判断：带 alpha 被当作不透明颜色接受，或超出 255 的通道仍生成颜色预览。

页面专属核验

使用前与操作中

  • 输入范围是 3/6 位 HEX、整数通道 `rgb()` 或带百分比的 `hsl()`；当前实现不处理 alpha、`rgba()`、`hsla()`、现代色彩空间或 CSS 变量。
  • HSL 的 hue 会按 360 度归一化，RGB 通道必须为 0–255，HSL 饱和度和亮度必须为 0–100%；转换结果中的 HSL 是四舍五入后的表示。
  • 把结果放回 CSS、Tailwind、Canvas 或 SVG 后仍需检查真实渲染、透明度、色彩空间和 WCAG 对比度；格式相等不等于视觉或无障碍结论相等。

结果出来后

  • 输入 `#336699` 时，是否得到 `rgb(51, 102, 153)` 和 `hsl(210, 50%, 40%)`，且短 HEX `#369` 也规范化为同一六位值？
  • 输入 `rgb(255, 128, 0)` 或 `hsl(210, 50%, 40%)` 时，往返结果是否符合通道范围和页面的整数取整，而不是混入 alpha？
  • 目标样式是否支持输出格式，并在真实背景、透明度和对比度场景中复核；非法值是否被拒绝而不是静默转换？

相关工具

工具边界

  • 当前工作台只转换 HEX、RGB 和 HSL，不直接解析 Tailwind token、CSS 变量、RGBA 或现代 OKLCH/LAB 颜色。
  • 页面不执行 WCAG 对比度计算，也不模拟不同显示器、浏览器和背景合成效果。
  • 转换结果适合开发排查，品牌色和设计系统仍应以设计规范与色彩管理流程为准。

与相似工具的区别

  • SVG 优化 / Data URI：颜色工具在 HEX、RGB、HSL 间换算单个色值；SVG 工具只压缩文本注释与空白或生成 Data URI，不分析路径、尺寸和填充色。

安全与兼容性

  • 颜色换算在浏览器本地完成；舍入、色彩配置文件和显示器差异可能让相同数值呈现不同。
  • 可读性不能靠肉眼或单一色值判断，必须将前景、实际背景、透明度和字号一起做 WCAG 对比度检查。

下一步排查

  1. 先确认来源是 CSS、Tailwind、Canvas、SVG 还是设计工具，并取出实际颜色值。
  2. 需要透明度时在目标背景上验证 alpha 合成，再用专门的对比度工具检查 WCAG。
  3. 发现样式差异时用代码和文本对比工具核对变量、主题 token 与构建后的 CSS。

常见问题

Tailwind 的 blue-500 可以直接输入吗？

不能直接当作颜色值转换。应先在 Tailwind 配置或主题文档中找到对应的 HEX、RGB 或 HSL 值，再交给工具处理。

这个工具能计算 WCAG 对比度吗？

当前页面主要做 HEX、RGB、HSL 转换，不直接计算对比度；请用前景色、背景色和实际 alpha 合成结果进行无障碍检查。

为什么 rgba 和转换后的 HEX 看起来不一样？

HEX 结果表示不透明 RGB 基础色，rgba 还包含 alpha，最终颜色取决于背景；不能忽略透明度直接比较。