Color tables for js and less versions developed by ayin.
npm install @techui/colors
#FF0000 or RGB(255,0,0), using a more natural language-like approach to define and call colors.
rel5 (red), bll5 (blue)
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:
}
}
}
})
`
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:
}
}
}
})
`
在样式文件中使用:
`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 个灰色