@tker/color

颜色处理工具包，提供颜色格式转换、验证和 CSS 变量批量生成功能。

安装

pnpm add @tker/color

使用方式

基础使用

import {
  isDarkColor,
  isLightColor,
  convertToHsl,
  convertToHslCssVar,
  convertToRgb,
  isValidColor,
  TinyColor
} from '@tker/color'

// 颜色验证
isValidColor('#ff0000')  // true
isValidColor('red')      // true
isValidColor('invalid')  // false
isValidColor()           // false（无参数）

// 颜色亮度判断
isDarkColor('#000000')   // true
isDarkColor('#333333')   // true
isLightColor('#ffffff')  // true
isLightColor('#eeeeee')  // true

// 格式转换
convertToHsl('#ff0000')            // "hsl(0 100% 50%)"
convertToHslCssVar('#ff0000')      // "0 100% 50%"（用于 CSS hsl() 函数）
convertToRgb('hsl(0 100% 50%)')    // "rgb(255, 0, 0)"

// 使用 TinyColor（重新导出自 @ctrl/tinycolor）
const color = new TinyColor('#ff0000')
color.toHex()        // "ff0000"
color.toRgbString()  // "rgb(255, 0, 0)"

批量生成 CSS 颜色变量

import { generatorColorVariables } from '@tker/color'

const variables = generatorColorVariables([
  { name: 'primary', alias: 'p', color: '#3b82f6' },
  { name: 'success', color: '#22c55e' },
  { name: 'warning', color: '#eab308' },
  { name: 'danger', alias: 'd', color: '#ef4444' }
])

// 返回示例：
// {
//   "--color-primary-50": "hsl(214 91% 95%)",
//   "--color-primary-100": "hsl(214 91% 87%)",
//   "--color-primary-200": "hsl(...)",
//   ...
//   "--color-primary-900": "hsl(214 91% 14%)",
//   "--color-p-50": "hsl(214 91% 95%)",  // alias 生成的同组变量
//   "--p": "214 91% 54%",                // alias 主色值（用于 hsl()）
//   ...
// }

生成的变量可直接用于 CSS：

:root {
  /* 使用生成的变量 */
  --color-primary: hsl(var(--p));
  --color-primary-light: hsl(var(--p) / 0.8);
  --bg-primary: hsl(var(--color-primary-100));
}

API

颜色验证

| 函数 | 参数 | 返回值 | 说明 | |------|------|--------|------| | isValidColor(color?) | color?: string | boolean | 验证颜色值是否有效 |

颜色亮度判断

| 函数 | 参数 | 返回值 | 说明 | |------|------|--------|------| | isDarkColor(color) | color: string | boolean | 判断颜色是否为深色 | | isLightColor(color) | color: string | boolean | 判断颜色是否为浅色 |

格式转换

| 函数 | 参数 | 返回值 | 说明 | |------|------|--------|------| | convertToHsl(color) | color: string | string | 转换为 HSL 格式字符串 | | convertToHslCssVar(color) | color: string | string | 转换为 CSS 变量格式（不含 hsl() 包裹） | | convertToRgb(str) | str: string | string | 转换为 RGB 格式字符串 |

CSS 变量生成

| 函数 | 参数 | 返回值 | 说明 | |------|------|--------|------| | generatorColorVariables(colorItems) | ColorItem[] | Record<string, string> | 批量生成 CSS 颜色变量 |

ColorItem 接口

interface ColorItem {
  name: string      // 颜色名称（用于生成变量名）
  alias?: string    // 可选别名（生成简短变量名）
  color: string     // 颜色值（支持 hex、rgb、hsl、颜色名等）
}

重导出

| 导出 | 来源 | 说明 | |------|------|------| | TinyColor | @ctrl/tinycolor | 颜色解析和转换核心类 |

调色板色阶说明

generatorColorVariables 会为每个颜色生成 50-900 共 10 个色阶：

| 色阶 | 用途 | |------|------| | 50 | 最浅色，用于背景高亮 | | 100 | 浅色背景 | | 200 | 次浅色 | | 300 | 中浅色 | | 400 | 中色偏浅 | | 500 | 主色（原始输入颜色） | | 600 | 中色偏深 | | 700 | 中深色 | | 800 | 深色 | | 900 | 最深色，用于深色模式 |

License

MIT