@TechUI/Colors 简介

👑首创

🔓已开源

TechUI Colors (色彩系统) 是 TechUI 生态系统的视觉调色板，也是连接代码与设计的通用语言。

在传统的开发中，我们习惯于记忆 #1890FF 或 rgb(24, 144, 255)。但在 TechUI 的世界里，我们将色彩还原为自然语义。@techui/colors 是一个基于 HSL 模型构建的双模（JS + LESS）颜色库，旨在帮助开发者摆脱十六进制代码的束缚。

一句话总结：用人类的语言（如“红色-亮-5级”）来调用颜色，而非机器代码。

核心理念 自然语义命名

TechUI Colors 的核心在于**“可读性”**。无论是在 JS 逻辑中，还是在 LESS 样式中，颜色名称都遵循同一套直观的语法：

色相 (Hue) + 饱和度 (Saturation) + 明度 (Lightness)

• re (Red 红色) + l (Light 淡) + 5 (5级) = rel5 (标准红)
• bl (Blue 蓝色) + d (Dark 深) + 1 (1级) = bld1 (深邃蓝)

这种命名方式让您在阅读代码时，脑海中就能直接浮现出颜色的样貌。

双版本架构 V1 与 V2

为了平衡“日常开发”与“专业数据可视化”的需求，该库内置了两套独立的色彩体系。

⭐️ Colors V1 (标准版)

"够用，好记"

• 规模：25 种基础色相 × 4 种饱和度 × 9 级明度。
• 定位：专为 UI 界面设计。适合构建按钮、背景、边框等常规元素。
• 特点：色阶跨度明显，易于区分。

☀️ Colors V2 (扩展版)

"极致细腻"

• 规模：支持更精细的 A-F (6级) 饱和度 与 01-19 (19级) 明度。
• 定位：专为 ECharts / GIS 地图 / 数据大屏 设计。
• 特点：提供丝般顺滑的渐变色阶，解决了复杂图表中颜色不够用的痛点。

生产力神器 交互式预览

@techui/colors 不仅仅是一个依赖包，它随包附赠了一个强大的本地交互式控制台 —— preview.html。

这是一个离线的 HTML 文件，安装依赖后位于 node_modules/@techui/colors/preview.html。它解决了“知道颜色名但不知道长什么样”的难题。

全景色板 (Visual Palette)

您可以直观地看到 V1 和 V2 的全量色谱。点击顶部的切换按钮，即可在两套标准间无缝切换。

• V1 面板：清晰展示了 9 级明度的变化，适合快速选色。
• V2 面板：展示了 19 级超长色阶，为渐变设计提供丰富素材。

智能色彩匹配 (Color Match)

这是该工具最杀手级的功能。 当设计师给您一个陌生的 Hex 值（如 #FF00FF），您无需手动寻找最接近的 TechUI 变量。

• 输入：在输入框粘贴任意 Hex / RGB 颜色。
• 输出：系统会自动计算欧几里得距离，分别返回 V1 和 V2 库中最接近的颜色变量名（例如 piA10），并显示色差距离。

如下图所示，输入 #ff00ff，系统精准匹配到了 V2 库中的 piA10 (Distance: 6.05) 和 V1 库中的 pil5。

技术特性

跨平台支持

一套变量，处处运行。

• JavaScript: 基于 chroma.js 封装，支持 $c.rel5 调用，内置 fade, darken, scale 等强大的颜色运算函数。
• LESS: 提供 .less 变量文件，支持 @rel5 调用，并兼容 Less 原生的颜色函数。

科学的 HSL 模型

不同于简单的颜色列表，TechUI Colors 是基于算法生成的。

• 色相环：从纯红 (#FF0000) 开始，每 15° 旋转生成一种新基础色，保证了色相环的完整性与和谐度。

安装与使用

安装

npm install @techui/colors

在 Vue/JS 中使用

import { $c } from "@techui/colors";

// 直接获取颜色值
const primaryColor = $c.blm5; // 输出对应的蓝色 Hex

// 使用颜色函数建立渐变
const gradient = $c.scale(['rel5', 'bll5'], 10);

Less 中使用

/* 引入变量文件 (通常在 vite.config.js 中配置全局注入) */
@import "~@techui/colors/base.less";

.my-button {
  background: @blm5;      // 使用 V1 变量
  color: @reA10;          // 使用 V2 变量
  border-color: @gyd4;    // 使用灰色系
}