detectColorFormat

检测颜色字符串的格式类型，并验证颜色值的有效性。

函数签名

function detectColorFormat(
  color: string
): { isValid: boolean; format?: ColorFormat }

type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'named'

参数

参数名	类型	必填	说明
color	string	是	要检测的颜色字符串

返回值

类型	说明
{ isValid: boolean; format?: ColorFormat }	返回对象，isValid 表示是否有效，format 表示颜色格式（仅当 isValid 为 true 时存在）

工作原理

1. 格式检测顺序： 按照优先级顺序检测各种格式（更具体的格式优先）：

   • HEX（#RGB, #RRGGBB, #RGBA, #RRGGBBAA）
   • RGBA（rgba(r, g, b, a)）
   • RGB（rgb(r, g, b)）
   • HSLA（hsla(h, s%, l%, a)）
   • HSL（hsl(h, s%, l%)）
   • 命名颜色（CSS 标准颜色名）

2. 格式验证： 使用正则表达式匹配格式，并验证：

   • HEX: 检查字符是否为有效的十六进制字符（0-9, a-f）
   • RGB/RGBA: 检查 R、G、B 值是否在 0-255 范围，Alpha 值是否在 0-1 范围
   • HSL/HSLA: 检查 H 值是否在 0-360 范围，S、L 值是否在 0-100 范围，Alpha 值是否在 0-1 范围
   • Named: 检查是否在 CSS 标准颜色名列表中

3. 返回结果：

   • 匹配成功且验证通过：{ isValid: true, format: '格式名' }
   • 匹配失败或验证不通过：{ isValid: false }

4. 大小写处理：

   • 命名颜色支持任意大小写
   • 十六进制支持大小写
   • 自动 trim 输入字符串