@techui/colors

English | 中文

---

English

> Color tables for JavaScript and Less, developed by ayin.

@techui/colors (formerly ayin-color) is a color library tool designed to help developers avoid memorizing tedious color values like #FF0000 or RGB(255,0,0), using a more natural language-like approach to define and call colors.

$3

- 🎨 Natural Language Naming - Use intuitive color names like rel5 (red), bll5 (blue)
- 📦 Dual Version Support - Provides V1 and V2 versions, with V2 offering richer color variations
- 🔧 Multi-Platform Compatible - Supports both JavaScript and Less/CSS versions
- 🌈 Scientific Color Scheme - Based on HSL color model, generating complete color spectrum through hue, saturation, and lightness
- 🎯 Ready to Use - Hundreds of preset color values for rapid development
- 📄 Built-in Preview File - Quickly view and copy the colors you need from preview.html for a quick start. After getting started, you can quickly call up colors using natural language without looking up tables.

$3

#### JavaScript Usage

Import in your project entry file (e.g., main.js):

``javascript
import tuiColors from "@techui/colors"
Vue.use(tuiColors)
//At this point, you can use $c and $chroma anywhere in your project.
`

Or use import to bring in components or pages, such as:

`javascript
import { $c, $chroma } from “@techui/colors”
const color = $c.rel5
`

Usage examples:

`javascript
// TechUI/Colors V1 - Using base colors
let color = $c.rel5 // Red
let blue = $c.bll5 // Blue
let gray = $c.gyd4 // Gray

// TechUI/Colors V2 - Using extended colors
let color2 = $c.reA10 // Red (with finer gradations)
let blue2 = $c.blA03 // Blue
`

#### CSS/Less Usage

##### Vue 2 (vue.config.js)

First install dependencies: less, less-loader, style-resources-loader

`javascript
const path = require('path')

module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, "./node_modules/@techui/colors/base.less"),
path.resolve(__dirname, "./node_modules/@techui/colors/extended.less")
]
}
}
}
`

##### Vue 3 + Vite (vite.config.js)

First install dependencies: less, less-loader

`javascript
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData:
@import "${path.resolve(__dirname, './node_modules/@techui/colors/base.less')}";
@import "${path.resolve(__dirname, './node_modules/@techui/colors/extended.less')}";

}
}
}
})
`

Use in style files:

`less
// TechUI/Colors V1
.text {
color: @rel5;
background-color: @bll5;
border: 1px solid @gyd4;
}

// TechUI/Colors V2
.text-v2 {
color: @reA10;
background-color: @blA03;
border: 1px solid @gyE05;
}
`

$3

#### V1 Naming Rules

Color names consist of base color + saturation + lightness.

25 Base Colors (15° hue intervals):

- re - red
- or - orange
- ye - yellow
- ch - chartreuse
- gr - green
- aq - aquamarine
- cy - cyan
- bl - blue
- in - indigo
- pu - purple
- pi - pink
- vi - violetred
- gy - gray
- And intermediate colors: ro, oy, yc, cg, ga, ac, cb, bi, ip, pp, pv, vr

4 Saturation Levels:

- l - light
- m - middle
- r - roast
- d - dark

9 Lightness Levels: 1 (lightest) to 9 (darkest)

Examples:

- rel5 - Red, light saturation, level 5 lightness
- bld1 - Blue, dark saturation, level 1 lightness (light blue with deep saturation)
- rel9 - Red, light saturation, level 9 lightness (deep red)

#### V2 Naming Rules

V2 provides finer color gradations.

Saturation: A, B, C, D, E, F (six levels)

Lightness: 01 to 19 (19 levels)

Examples:

- reA10 - Red, A saturation, level 10 lightness
- blE05 - Blue, E saturation, level 5 lightness

$3

#### JavaScript Color Processing Functions

Color processing functions based on chroma.js:

`javascript
// Transparency
let color = $c.fade('bll5', 0.5) // 50% transparency

// Hue adjustment
let hue = $c.hslh('rel5', 30) // Shift hue by 30°

// Saturation adjustment
let sat = $c.hsls('rel5', 0.8)

// Lightness adjustment
let light = $c.hsll('rel5', 0.6)

// Darken/Lighten
let darker = $c.darken('bll5', 0.2)
let lighter = $c.lighten('bll5', 0.2)

// Color gradient (generate transition colors between multiple colors)
let gradient = $c.scale(['rel5', 'bll5', 'yel5'], 10, 'lch')
// Parameters: color array (minimum 2), number of colors needed, blending mode (lch/hsl/lab/lrgb, default lch)
`

#### Less Color Processing Functions

`less
.element {
// Transparency
color: fade(@bll5, 50%);

// Lightness adjustment
background: lighten(@rel5, 20%);
border-color: darken(@bll5, 10%);

// Saturation adjustment
box-shadow: 0 0 10px saturate(@rel5, 20%);

// Hue rotation
outline-color: spin(@rel5, 30);

// Color mixing
background: mix(@rel5, @bll5, 50%);
}
`

For more Less color functions, refer to the Less official documentation.

$3

#### Use V1 Version

- ✅ Daily project development
- ✅ Rapid prototyping
- ✅ Need for easy-to-remember and controllable color schemes
- ✅ General web applications and admin dashboards

V1 has a moderate number of colors, easy to master, and meets the color needs of most projects.

#### Use V2 Version

- ✅ Data visualization projects
- ✅ Large screen display systems
- ✅ Need for fine color gradation control
- ✅ Professional design projects

V2 provides finer color variations, suitable for scenarios with higher color requirements.

$3

#### Color Conversion Tool

The project provides a color conversion tool that converts regular color values to TechUI/Colors format.

Supported input formats:

- Color names: red
- Hexadecimal: #FF0000
- RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)

The tool returns the best match in both V1 and V2 versions. A smaller distance parameter indicates closer proximity to the original color.

The tool is located in the aYinColor-V2 source directory.

$3

- ayin-color.less - V1 CSS version
- ayin-color-expand.less - V2 CSS version
- ayin-color.js - JavaScript version
- ayin-color.json - Static color values JSON file
- index.js - Entry file
- preview.html - Offline color table preview, query, and matching tool

$3

TechUI/Colors is designed based on the HSL color model:

1. Hue: Starting from pure red #FF0000, generates a base color every 15°, totaling 24 base colors + 1 gray
2. Saturation: V1 provides 4 levels, V2 provides 6 levels
3. Lightness: V1 provides 9 levels, V2 provides 19 levels

This design makes color usage more intuitive and systematic.

$3

- 🏠 Official Website
- 📦 npm Package
- 💻 GitHub Repository
- 🎥 Bilibili Video Tutorial
- 🎨 Color Table Preview

$3

Ayin

- Email: ayin86cn@gmail.com
- WeChat: jay1986cn

$3

- Built with chroma.js
- Thanks to all developers who use and support @techui/colors

-----

中文

> ayin 开发的 js 和 less 版本的颜色表。

@techui/colors 曾用名为 ayin-color，是一个颜色库工具，旨在帮助开发者摆脱记忆 #FF0000、RGB(255,0,0) 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。

$3

- 🎨 自然语言式命名 - 使用直观的颜色名称，如 rel5（红色）、bll5（蓝色）
- 📦 双版本支持 - 提供 V1 和 V2 两个版本，V2 拥有更丰富的颜色数量
- 🔧 多平台兼容 - 同时支持 JavaScript 和 Less/CSS 版本
- 🌈 科学配色 - 基于 HSL 色彩模型，通过色相、饱和度、明暗度生成完整色谱
- 🎯 开箱即用 - 预设数百种颜色值，快速开发
- 📄 内置预览文件 - 根据preview.html快速查看复制所需颜色，进行快速入门，入门后即可通过自然语义快速调用颜色无需查表。

$3

#### JavaScript 使用方式

在项目入口文件（如 main.js）中引入：

`javascript
import tuiColors from "@techui/colors"
Vue.use(tuiColors)
//此时你可以在项目中任意位置使用$c,$chroma
`

或者在组件或者页面中使用import引入使用，如：

`javascript
import { $c, $chroma } from "@techui/colors"
const color=$c.rel5
`

使用示例：

`javascript
// TechUI/Colors V1 - 使用基础色
let color = $c.rel5 // 红色
let blue = $c.bll5 // 蓝色
let gray = $c.gyd4 // 灰色

// TechUI/Colors V2 - 使用扩展色
let color2 = $c.reA10 // 红色（更细腻的色阶）
let blue2 = $c.blA03 // 蓝色
`

#### CSS/Less 使用方式

##### Vue 2 (vue.config.js)

需要先安装依赖：less、less-loader、style-resources-loader

`javascript
const path = require('path')

module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, "./node_modules/@techui/colors/base.less"),
path.resolve(__dirname, "./node_modules/@techui/colors/extended.less")
]
}
}
}
`

##### Vue 3 + Vite (vite.config.js)

需要先安装依赖：less、less-loader

`javascript
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData:
@import "${path.resolve(__dirname, './node_modules/@techui/colors/base.less')}";
@import "${path.resolve(__dirname, './node_modules/@techui/colors/extended.less')}";

}
}
}
})
`

在样式文件中使用：

`less
// TechUI/Colors V1
.text {
color: @rel5;
background-color: @bll5;
border: 1px solid @gyd4;
}

// TechUI/Colors V2
.text-v2 {
color: @reA10;
background-color: @blA03;
border: 1px solid @gyE05;
}
`

$3

#### V1 版本命名规则

颜色命名由 基础色 + 饱和度 + 明暗度 组成。

25 种基础色（色相间隔 15°）：

- re - 红色 (red)
- or - 橙色 (orange)
- ye - 黄色 (yellow)
- ch - 草绿 (chartreuse)
- gr - 绿色 (green)
- aq - 水绿 (aquamarine)
- cy - 青色 (cyan)
- bl - 蓝色 (blue)
- in - 靛色 (indigo)
- pu - 紫色 (purple)
- pi - 粉色 (pink)
- vi - 罗兰红 (violetred)
- gy - 灰色 (gray)
- 以及中间色：ro、oy、yc、cg、ga、ac、cb、bi、ip、pp、pv、vr

4 种饱和度：

- l - light（淡）
- m - middle（中）
- r - rost（烤）
- d - dark（深）

9 级明暗度：1（最淡）到 9（最深）

示例：

- rel5 - 红色，light 饱和度，5 级明暗
- bld1 - 蓝色，dark 饱和度，1 级明暗（淡蓝深饱和）
- rel9 - 红色，light 饱和度，9 级明暗（深红）

#### V2 版本命名规则

V2 版本提供更细腻的色阶变化。

饱和度：A、B、C、D、E、F 六种

明暗度：01 到 19 共 19 级

示例：

- reA10 - 红色，A 饱和度，10 级明暗
- blE05 - 蓝色，E 饱和度，5 级明暗

$3

#### JavaScript 颜色处理函数

基于 chroma.js 封装的颜色处理函数：

`javascript
// 透明度
let color = $c.fade('bll5', 0.5) // 50% 透明度

// 色相调整
let hue = $c.hslh('rel5', 30) // 色相偏移 30°

// 饱和度调整
let sat = $c.hsls('rel5', 0.8)

// 明暗调整
let light = $c.hsll('rel5', 0.6)

// 加深/减淡
let darker = $c.darken('bll5', 0.2)
let lighter = $c.lighten('bll5', 0.2)

// 颜色渐变（生成多个颜色之间的过渡色）
let gradient = $c.scale(['rel5', 'bll5', 'yel5'], 10, 'lch')
// 参数：颜色数组（最少2个）、需要的颜色数量、混合模式（lch/hsl/lab/lrgb，默认 lch）
`

#### Less 颜色处理函数

`less
.element {
// 透明度
color: fade(@bll5, 50%);

// 明暗调整
background: lighten(@rel5, 20%);
border-color: darken(@bll5, 10%);

// 饱和度调整
box-shadow: 0 0 10px saturate(@rel5, 20%);

// 色相旋转
outline-color: spin(@rel5, 30);

// 颜色混合
background: mix(@rel5, @bll5, 50%);
}
`

更多 Less 颜色函数请参考 Less 官方文档。

$3

#### 使用 V1 版本

- ✅ 日常项目开发
- ✅ 快速原型设计
- ✅ 需要易于记忆和掌控的配色方案
- ✅ 一般 Web 应用和管理后台

V1 版本颜色数量适中，易于掌握，能够满足绝大多数项目的配色需求。

#### 使用 V2 版本

- ✅ 数据可视化项目
- ✅ 大屏展示系统
- ✅ 需要精细色阶控制
- ✅ 专业设计项目

V2 版本提供更细腻的颜色变化，适合对配色有更高要求的场景。

$3

#### 颜色转换工具

项目提供了颜色转换工具，可以将普通颜色值转换为 TechUI/Colors 格式。

支持输入格式：

- 颜色名称：red
- 十六进制：#FF0000
- RGB/RGBA：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)

工具会返回 V1 和 V2 版本中的最佳匹配结果。距离参数越小表示与原始颜色越接近。

工具位于 aYinColor-V2 source 目录中。

$3

- ayin-color.less - V1 CSS 版本
- ayin-color-expand.less - V2 CSS 版本
- ayin-color.js - JavaScript 版本
- ayin-color.json - 静态颜色值 JSON 文件
- index.js - 入口文件
- preview.html - 离线版颜色表预览查询匹配工具

$3

TechUI/Colors 基于 HSL 色彩模型设计：

1. 色相 (Hue)：从纯红色 #FF0000` 开始，每隔 15° 生成一个基础色，共 24 个基础色 + 1 个灰色
2. 饱和度 (Saturation)：V1 提供 4 级，V2 提供 6 级
3. 明度 (Lightness)：V1 提供 9 级，V2 提供 19 级

这种设计使得颜色调用更加直观和系统化。

$3

- 🏠 官方网站
- 📦 npm 包
- 💻 GitHub 仓库
- 🎥 Bilibili 视频教程
- 🎨 颜色表预览

$3

Ayin

- Email: ayin86cn@gmail.com
- WeChat: jay1986cn

$3

- 基于 chroma.js 开发
- 感谢所有使用和支持 @techui/colors 的开发者