颜色转换器

关于 颜色转换器

在设计与前端之间来回传递颜色时，格式不统一是最常见的摩擦：设计稿给的是十六进制，CSS 需要 RGB 或 HSL，而做渐变与悬浮态时又要回到 HSL 调明度。颜色转换工具的价值在于把同一个颜色在几种表示之间即时互转，避免手工换算时把某一位算错。 几种表示各有用途。十六进制是屏幕配色的通用写法，前两位红、中间两位绿、后两位蓝，每通道 0 到 255；RGB 用三个十进制数表达同样的信息，便于程序计算；HSL 用色相、饱和度、亮度三个维度描述，色相是 0 到 360 度的色环角度，因此调整明暗或降低饱和度时用 HSL 更直观；带透明度的场景还需要第四个分量，通常写成八位十六进制（末尾两位表示不透明度）或 rgba 与 hsla 函数。 使用要点：做「同一色系的不同深浅」时，改 HSL 的亮度分量比逐个手改十六进制更可靠，也更容易保持色相一致；做「悬停时略微变暗」这类效果时，固定色相与饱和度只调亮度，视觉上不会串色。十六进制与 RGB 互相转换时留意每通道的取值范围，超出一百二十七的五官感受容易算错，使用工具比自己换算更稳。若要在不同色域间迁移（例如把 sRGB 的颜色放进支持广色域的显示环境），转换之外还要考虑色域映射，单纯换算数值可能产生可见偏色。 边界与限制：三位缩写形式（如井号 abc）等价于每位重复一遍，因此井号一二三四这类四位写法是非法值，浏览器会静默丢弃整条声明，不报错也不回退，排查样式不生效时容易忽略这一条。命名颜色只有一百多个，且 transparent 与 currentColor 是关键字而不是颜色值：用脚本读取计算样式时，前者会被解析成全零的透明值，后者会解析成当前文字颜色，做颜色比对时要单独处理。八位十六进制与 rgba 的语义方向相反——前者把不透明度放在末尾，顺序写错会得到完全不同的颜色，跨项目协作时应统一一种写法并写进规范。此外十六进制与 RGB 都不携带色彩空间信息，默认按 sRGB 理解，混用广色域值会让不同设备上的观感不一致。 数据与隐私：颜色本身不含个人信息，它是本组工具里隐私敏感度最低的一个。本工具仍在浏览器内完成全部换算，不发送请求，因此即使在内网环境或离线状态下也可放心使用。

做无障碍与可读性检查时，颜色转换只是第一步：文字与背景的对比度需要按亮度公式计算，浅色主题下常见的问题是把中灰文字放在浅灰底上，计算后对比度刚好低于门槛。可以先在 HSL 里调整亮度分量把对比度抬到达标，再转回十六进制落到样式表；同理，做暗色主题时不要简单反相，反相会同时改变饱和度与色相，视觉上往往显得脏，正确做法是固定色相、降低饱和度并重新分配亮度。把这些换算连同设计令牌一起维护，长期看能省下大量返工。