本文目录
什么是颜色代码校验？
颜色代码校验用于检查颜色值是否符合公认的格式，例如十六进制（如 #FF6600）、RGB、HSL 或 CSS 命名颜色。输入错误的颜色代码可能产生意料之外的颜色，或被浏览器悄然忽略。
现代 Web 开发在 CSS、设计令牌和配置文件中使用多种颜色表示法。校验颜色代码可确保设计系统与实现之间保持一致。
颜色代码校验器如何工作
CheckTown 的颜色代码校验器会解析你的输入，并检查格式有效性、取值范围和转换准确性。
- 格式检测——自动识别输入是十六进制、RGB、RGBA、HSL、HSLA 还是 CSS 命名颜色
- 取值范围检查——验证数值是否在有效范围内（RGB 为 0-255，色相为 0-360）
- 格式转换——以所有等效格式显示该颜色，方便复制
免费试用 —— 无需注册
校验一个颜色代码 →颜色格式参考
Web 开发使用多种颜色表示法，各有优势。
- 十六进制——以 # 为前缀的 3、4、6 或 8 位字符代码（如 #F60 或 #FF6600）。这是 CSS 中最常见的格式
- RGB 和 RGBA——红、绿、蓝三个通道，取值为 0-255 的数字，并可选带透明度 alpha 值
- HSL 和 HSLA——色相（0-360 度）、饱和度（0-100 百分比）和亮度（0-100 百分比）
何时使用颜色代码校验
每当颜色值在工具、格式或团队成员之间流转时，颜色校验都必不可少。
- 设计交付——校验来自设计文件的颜色令牌，确保它们与 CSS 实现相符
- 主题配置——在部署前检查主题配置文件中的颜色值
- 用户生成内容——校验表单字段和自定义面板中的颜色输入
常见问题解答
3 位和 6 位十六进制颜色有什么区别？
3 位十六进制代码是一种简写形式，其中每一位都会翻倍。例如，#F60 会展开为 #FF6600。
CSS 命名颜色在任何地方都有效吗？
CSS 命名颜色在 CSS 和 SVG 中有效，但在非 Web 环境中可能无法识别。十六进制或 RGB 值的通用可移植性更强。
透明度 alpha 是如何工作的？
Alpha 控制不透明度，取值从 0（完全透明）到 1（完全不透明）。在十六进制中，alpha 是额外的 2 位字符。