颜色库

👑首创

🔓已开源

@techui/colors 是一个基于自然语言命名的语义化颜色库。它通过将复杂的 RGB/Hex 颜色值抽象为易于记忆的语义代码（如 rel5 代表红色），帮助开发者在 JavaScript 和 CSS/Less 环境中高效地管理和调用颜色。

该库基于Chromajs开发，通过精确控制色相、饱和度和明暗度，提供了一套完整且和谐的色彩体系。

TechUI-Colors并非使用TechUI组件库中的必要条件。

安装与集成

配置方式，请参考开始-额外配置章节

核心特性

语义化命名：抛弃 #FF0000，使用 rel5（红色-亮-中等亮度）等直观代码。
双模态支持：同时支持 JavaScript 运行时和 Less 预处理器编译时。
科学色谱：基于 HSL 模型，提供 V1（基础版）和 V2（扩展版）两套色板。
颜色操作：内置基于 chroma.js 的强大颜色处理函数（渐变、透明度、混合等）。
离线预览：内置 preview.html 工具，支持快速查找和颜色匹配。

命名规则详解

V1 基础版 (日常推荐)

V1 版本命名由三部分组成：[色相] + [饱和度] + [明暗度]。

色相 (Hue)：25 种基础色，每隔 15° 一个跨度。
- re (Red), or (Orange), ye (Yellow), gr (Green), cy (Cyan), bl (Blue), pu (Purple) 等。
- gy (Gray) 为无彩色系。
饱和度 (Saturation)：4 个级别。
- l (Light): 淡雅
- m (Middle): 中等
- r (Rost): 烤色/复古
- d (Dark): 深沉
明暗度 (Lightness)：1（最亮）到 9（最暗），5 为基准色。

示例解析：

rel5: Red (红) + Light (亮饱和) + 5 (基准亮度) = 标准亮红色。
bld9: Blue (蓝) + Dark (暗饱和) + 9 (最暗) = 深夜蓝。

V2 扩展版 (数据可视化推荐)

V2 版本提供更细腻的色阶，适用于图表、地图等需要丰富色彩的场景。

饱和度：扩展为 A - F 六个级别。
明暗度：扩展为 01 - 19 共 19 个级别。

示例解析：

reA10: 红色系 A 级饱和度第 10 级亮度。

颜色处理函数

TechUI Colors 封装了常用的颜色操作函数，方便进行动态计算。

javascript

// 1. 透明度处理
const bg = $c.fade('bll5', 0.5); // 50% 透明度

// 2. 色相偏移 (旋转色轮)
const nextColor = $c.hslh('rel5', 30); // 向右旋转 30度

// 3. 饱和度/亮度调整
const vivid = $c.hsls('rel5', 0.8); // 调整饱和度
const dark = $c.hsll('rel5', 0.2);  // 调整亮度

// 4. 混合与计算
const mixed = $c.mix('rel5', 'bll5', 0.5); // 混合红蓝
const isReadable = $c.contrast('rel5', '#fff'); // 计算对比度

// 5. 生成渐变色阶 (Scale)
// 参数：[起始色, 结束色], 数量, 模式(lch/rgb等)
const palette = $c.scale(['rel5', 'bll5'], 10, 'lch');