@techui/colors
v2.0.1
Published
Color tables for js and less versions developed by ayin.
Readme
@techui/colors
English
Color tables for Less, Scss and JavaScript, 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.
✨ Features
- 🎨 Natural Language Naming - Use intuitive color names like
rea5(red),aza5(blue) - 📦 Dual Edition Support - Provides Base and Extended editions, with Extended offering richer color variations
- 🔧 Multi-Platform Compatible - Supports both JavaScript and Less/Scss versions
- 🌈 Scientific Color Scheme - Based on HSL color model, generating complete color spectrum through hue, saturation, and lightness
- 🎯 Ready to Use - Thousands 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.
🚀 Quick Start
Entry Map
Default entry:
@techui/colors-> static all-in-one entry (static/all)
JavaScript subpath entries:
@techui/colors/dynamic/base@techui/colors/dynamic/extended@techui/colors/dynamic/all@techui/colors/static/base@techui/colors/static/extended@techui/colors/static/all
Style subpath entries:
@techui/colors/less/base@techui/colors/less/extended@techui/colors/less/all@techui/colors/scss/base@techui/colors/scss/extended@techui/colors/scss/all
JavaScript Usage
Default import (same as static/all):
import $c from "@techui/colors";
const color = $c.rea5;In typical usage, default import and $c refer to the complete color access object for the current entry. In most cases, importing only $c is enough, because you can directly access all colors from that entry with $c.xxx.
import $c from "@techui/colors";
const red = $c.rea5;
const blue = $c.azA03;
const aliasColor = $c.vea5;Static entries:
import $c, { base, alias, chroma } from "@techui/colors/static/base";
import $c, { extended, alias, chroma } from "@techui/colors/static/extended";
import $c, { base, extended, baseAlias, extendedAlias, alias, chroma } from "@techui/colors/static/all";Dynamic entries:
import $c, { base, alias, baseConfig, aliasMap, levels, shades, chroma } from "@techui/colors/dynamic/base";
import $c, { extended, alias, extendedConfig, aliasMap, levels, shades, chroma } from "@techui/colors/dynamic/extended";
import $c, { base, extended, baseAlias, extendedAlias, alias, chroma } from "@techui/colors/dynamic/all";Named exports by entry:
@techui/colors:base,extended,baseAlias,extendedAlias,alias,chroma@techui/colors/static/base:base,alias,chroma@techui/colors/static/extended:extended,alias,chroma@techui/colors/static/all:base,extended,baseAlias,extendedAlias,alias,chroma@techui/colors/dynamic/base:base,alias,baseConfig,aliasMap,levels,shades,chroma@techui/colors/dynamic/extended:extended,alias,extendedConfig,aliasMap,levels,shades,chroma@techui/colors/dynamic/all:base,extended,baseAlias,extendedAlias,alias,chroma
What each export is for:
$c/default: the complete lookup object for the current entry. This is the primary API and usually the only import you need.base: the raw Base color table.extended: the raw Extended color table.alias: the merged alias table for the current entry.baseAlias: alias table that maps to Base colors only.extendedAlias: alias table that maps to Extended colors only.chroma: the underlying@techui/libs/chromainstance, re-exported for convenience.baseConfig: dynamic Base generation config source.extendedConfig: dynamic Extended generation config source.aliasMap: dynamic alias mapping definition used during generation.levels: dynamic level definitions used to generate tone steps.shades: dynamic shade definitions used to generate color variants.
When to use named exports:
- Use
$cwhen you simply want to read colors such as$c.rea5. - Use
base/extendedwhen you need the original split tables. - Use
alias/baseAlias/extendedAliaswhen you want alias-only data. - Use dynamic config exports only if you are extending or debugging the generation process.
In real projects you typically choose either the static entry set or the dynamic entry set, rather than importing both at the same time.
Difference between static and dynamic:
- Static (
@techui/colors/@techui/colors/static/all): uses prebuilt JS bundles, best for stable output and direct consumption. - Dynamic (
@techui/colors/dynamic/all): generates the color map from config at runtime, best when you prefer algorithm-driven generation flow. - Core API is aligned in both modes (
default,$c,chroma, and the corresponding named color-table exports); only the source of the color table differs.
Usage examples:
// TechUI/Colors Base - Using base colors
let color = $c.rea5 // Red
let blue = $c.aza5 // Blue
let gray = $c.gyd4 // Gray
// TechUI/Colors Extended - Using extended colors
let color2 = $c.reA10 // Red (with finer gradations)
let blue2 = $c.azA03 // BlueCSS/Less Usage
Available Less entries:
@techui/colors/less/base@techui/colors/less/extended@techui/colors/less/all
Vue 2 (vue.config.js)
First install dependencies: less, less-loader, style-resources-loader
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
"@techui/colors/less/all"
]
}
}
}Vue 3 + Vite (vite.config.js)
First install dependencies: less, less-loader
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `
@import "@techui/colors/less/all";
`
}
}
}
})Use in style files:
// TechUI/Colors Base
.text {
color: @rea5;
background-color: @aza5;
border: 1px solid @gyd4;
}
// TechUI/Colors Extended
.text-v2 {
color: @reA10;
background-color: @azA03;
border: 1px solid @gyE05;
}CSS/SCSS Usage
Available SCSS entries:
@techui/colors/scss/base@techui/colors/scss/extended@techui/colors/scss/all
Vue 2 (vue.config.js)
First install dependencies: sass, sass-loader, style-resources-loader
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"@techui/colors/scss/all"
]
}
}
}Vue 3 + Vite (vite.config.js)
First install dependencies: sass
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@techui/colors/scss/all";
`
}
}
}
})Use in style files:
// TechUI/Colors Base
.text {
color: $rea5;
background-color: $aza5;
border: 1px solid $gyd4;
}
// TechUI/Colors Extended
.text-v2 {
color: $reA10;
background-color: $azA03;
border: 1px solid $gyE05;
}Test Pages
This package now includes browser test pages under test/:
test/js/index.html- JS preview page withstatic/base,static/extended,dynamic/base, anddynamic/extendedtest/less/index.html- Less preview page withbase/extendedtabstest/scss/index.html- SCSS preview page withbase/extendedtabs
Shared test utilities live in:
test/common/tokens.mjstest/common/render.mjstest/common/page.css
Notes:
test/js/index.htmlpreviews colors from the real JS entry files.test/less/index.htmluses generated helper classes fromtest/less/background.less.test/scss/index.htmldoes not run raw SCSS in the browser. It previews the compiled result fromtest/scss/page.css.
SCSS test workflow:
npm run test:scss:bg
npx sass ./test/scss/page.scss ./test/scss/page.css --no-source-map🎨 Color Naming Convention
Base Naming Rules
Color names consist of base color + chroma tier + lightness.
25 Base Colors (15° hue intervals):
re- redor- orangeye- yellowch- chartreusegr- greenmi- mintcy- cyanaz- azurebl- bluevi- violetma- magentars- rosegy- gray- And intermediate colors:
ro,oy,yc,cg,gm,mc,ca,ab,bv,vm,mr,rr
4 Chroma Tiers:
a- tier-a (highest chroma)b- tier-bc- tier-cd- tier-d (lowest chroma / most neutral)
9 Lightness Levels: 1 (lightest) to 9 (darkest)
Examples:
rea5- Red, tier-a chroma, level 5 lightnessazd1- Azure/blue region, tier-d chroma, level 1 lightnessrea9- Red, tier-a chroma, level 9 lightness (deep red)
Extended Naming Rules
Extended 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 lightnessazE05- Azure/blue region, E saturation, level 5 lightness
🔧 Advanced Features
JavaScript Color Processing Functions
Color processing functions based on chroma.js:
// Transparency
let color = $c.fade('aza5', 0.5) // 50% transparency
// Hue adjustment
let hue = $c.hslh('rea5', 30) // Shift hue by 30°
// Saturation adjustment
let sat = $c.hsls('rea5', 0.8)
// Lightness adjustment
let light = $c.hsll('rea5', 0.6)
// Darken/Lighten
let darker = $c.darken('aza5', 0.2)
let lighter = $c.lighten('aza5', 0.2)
// Color gradient (generate transition colors between multiple colors)
let gradient = $c.scale(['rea5', 'aza5', 'yea5'], 10, 'lch')
// Parameters: color array (minimum 2), number of colors needed, blending mode (lch/hsl/lab/lrgb, default lch)Advanced Color Utilities
// 1. Resolve a color — supports preset names, @-prefixed names, or raw hex/rgb values
const blue = $c.resolve('aza5')
const blueFromToken = $c.resolve('@aza5')
// 2. Validate a color
const isValidPreset = $c.valid('aza5') // true
const isValidHex = $c.valid('#1677ff') // true
// 3. Expression syntax — pipe-based shorthand for color transforms
const softBlue = $c.expr('@aza5|.3') // fade to 30% opacity
const softHex = $c.expr('#1677ff|.4') // hex colors are supported too
const fadeBlue = $c.expr('@aza5|fade(.3)') // explicit fade
const lightBlue = $c.expr('@aza5|lighten(2)') // lighten
const darkBlue = $c.expr('@aza5|darken(1)') // darken
const customL = $c.expr('@aza5|hsll(.35)') // set HSL lightness
// 4. Generate a semantic color scale from a base color
const colors = $c.genColors('aza5', 7)
// Parameters: base color (or array), count, hue diff between steps, saturation reduce factor
// 5. Convert a color scale array into a semantic object with optional opacity variants
const colorObj = $c.genColorObj(colors, [0.9, 0.7, 0.5])
// Result includes keys like weak / base / strong, plus opacity variantsExpression Syntax Reference
| Expression | Equivalent Call | Description |
| --- | --- | --- |
| @aza5 | $c.resolve('aza5') | @ explicitly marks a TechUI Colors preset name |
| @aza5\|.3 | $c.fade('aza5', .3) | Pipe + number defaults to fade |
| @aza5\|fade(.3) | $c.fade('aza5', .3) | Explicit fade |
| @aza5\|lighten(2) | $c.lighten('aza5', 2) | Lighten the color |
| @aza5\|darken(1) | $c.darken('aza5', 1) | Darken the color |
| @aza5\|hsll(.35) | $c.hsll('aza5', .35) | Set HSL lightness |
| #1677ff\|.4 | $c.fade('#1677ff', .4) | Raw hex values are also supported |
Less Color Processing Functions
.element {
// Transparency
color: fade(@aza5, 50%);
// Lightness adjustment
background: lighten(@rea5, 20%);
border-color: darken(@aza5, 10%);
// Saturation adjustment
box-shadow: 0 0 10px saturate(@rea5, 20%);
// Hue rotation
outline-color: spin(@rea5, 30);
// Color mixing
background: mix(@rea5, @aza5, 50%);
}For more Less color functions, refer to the Less official documentation.
📖 Version Selection Guide
Use Base Edition
- ✅ Daily project development
- ✅ Rapid prototyping
- ✅ Need for easy-to-remember and controllable color schemes
- ✅ General web applications and admin dashboards
Base has a moderate number of colors, easy to master, and meets the color needs of most projects.
Use Extended Edition
- ✅ Data visualization projects
- ✅ Large screen display systems
- ✅ Need for fine color gradation control
- ✅ Professional design projects
Extended provides finer color variations, suitable for scenarios with higher color requirements.
🔨 Development Tools
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 Base and Extended editions. A smaller distance parameter indicates closer proximity to the original color.
The tool is located in the aYinColor-Extended source directory.
📂 Included Files
index.js- Default package entry, currently forwarding tojs/index.static.all.jsjs/index.static.base.js- Static Base JS entryjs/index.static.extended.js- Static Extended JS entryjs/index.static.all.js- Static all-in-one JS entryjs/index.dynamic.base.js- Dynamic Base JS entryjs/index.dynamic.extended.js- Dynamic Extended JS entryjs/index.dynamic.all.js- Dynamic all-in-one JS entryjs/static/bundle.base.js- Static Base bundlejs/static/bundle.extended.js- Static Extended bundlejs/dynamic/bundle.base.js- Dynamic Base bundlejs/dynamic/bundle.extended.js- Dynamic Extended bundlejs/dynamic/bundle.all.js- Dynamic all-in-one bundlejs/common/tools.js- Shared JS color toolkit mounted onto$cless/base.less- Base Less color tableless/extended.less- Extended Less color tableless/all.less- Less aggregate entryscss/base.scss- Base SCSS color tablescss/extended.scss- Extended SCSS color tablescss/all.scss- SCSS aggregate entrytest/js/index.html- JS test pagetest/less/index.html- Less test pagetest/scss/index.html- SCSS test page (based on compiled CSS output)preview.html- Offline color table preview, query, and matching tool
🎯 Design Philosophy
TechUI/Colors is designed based on the HSL color model:
- Hue: Starting from pure red
#FF0000, generates a base color every 15°, totaling 24 base colors + 1 gray - Saturation: Base provides 4 levels, Extended provides 6 levels
- Lightness: Base provides 9 levels, Extended provides 19 levels
This design makes color usage more intuitive and systematic.
📚 Related Links
- 🏠 China Site
- 🌐 Global Site
- 📦 npm Package
- 💻 GitHub Repository
- 🎥 Bilibili Video Tutorial
- 🎨 Color Table Preview
👨💻 Author
aYin
- Email: [email protected]
- WeChat: jay1986cn
🙏 Acknowledgments
- Built with chroma.js
- Thanks to all developers who use and support @techui/colors
中文
ayin 开发的 Less、Scss 和 JS 版本的颜色表。
@techui/colors 曾用名为 ayin-color，是一个颜色库工具，旨在帮助开发者摆脱记忆 #FF0000、RGB(255,0,0) 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。
✨ 特性
- 🎨 自然语言式命名 - 使用直观的颜色名称，如
rea5（红色）、aza5（蓝色） - 📦 双版本支持 - 提供 Base 和 Extended 两个版本，Extended 拥有更丰富的颜色数量
- 🔧 多平台兼容 - 同时支持 JavaScript 和 Less/Scss 版本
- 🌈 科学配色 - 基于 HSL 色彩模型，通过色相、饱和度、明暗度生成完整色谱
- 🎯 开箱即用 - 预设数千种颜色值，快速开发
- 📄 内置预览文件 - 根据preview.html快速查看复制所需颜色，进行快速入门，入门后即可通过自然语义快速调用颜色无需查表。
🚀 快速开始
入口映射
默认入口：
@techui/colors-> 默认指向静态全量入口static/all
JavaScript 子路径入口：
@techui/colors/dynamic/base@techui/colors/dynamic/extended@techui/colors/dynamic/all@techui/colors/static/base@techui/colors/static/extended@techui/colors/static/all
样式子路径入口：
@techui/colors/less/base@techui/colors/less/extended@techui/colors/less/all@techui/colors/scss/base@techui/colors/scss/extended@techui/colors/scss/all
JavaScript 使用方式
默认导入（等同于 static/all）：
import $c from "@techui/colors";
const color = $c.rea5;通常情况下，default 导入和 $c 都表示“当前入口下的完整颜色访问对象”。大多数业务场景里，只导入 $c 就够了，因为这个入口下可访问的颜色，基本都可以直接通过 $c.xxx 获取。
import $c from "@techui/colors";
const red = $c.rea5;
const blue = $c.azA03;
const aliasColor = $c.vea5;静态入口：
import $c, { base, alias, chroma } from "@techui/colors/static/base";
import $c, { extended, alias, chroma } from "@techui/colors/static/extended";
import $c, { base, extended, baseAlias, extendedAlias, alias, chroma } from "@techui/colors/static/all";动态入口：
import $c, { base, alias, baseConfig, aliasMap, levels, shades, chroma } from "@techui/colors/dynamic/base";
import $c, { extended, alias, extendedConfig, aliasMap, levels, shades, chroma } from "@techui/colors/dynamic/extended";
import $c, { base, extended, baseAlias, extendedAlias, alias, chroma } from "@techui/colors/dynamic/all";各入口的 named exports：
@techui/colors：base、extended、baseAlias、extendedAlias、alias、chroma@techui/colors/static/base：base、alias、chroma@techui/colors/static/extended：extended、alias、chroma@techui/colors/static/all：base、extended、baseAlias、extendedAlias、alias、chroma@techui/colors/dynamic/base：base、alias、baseConfig、aliasMap、levels、shades、chroma@techui/colors/dynamic/extended：extended、alias、extendedConfig、aliasMap、levels、shades、chroma@techui/colors/dynamic/all：base、extended、baseAlias、extendedAlias、alias、chroma
各导出项的作用：
$c/default：当前入口下的完整查询对象。这是最主要的 API，通常也是唯一需要导入的内容。base：Base 基础色表原始数据。extended：Extended 扩展色表原始数据。alias：当前入口下合并后的别名色表。baseAlias：仅对应 Base 的别名色表。extendedAlias：仅对应 Extended 的别名色表。chroma：底层@techui/libs/chroma实例，方便在同一套颜色系统里继续做色彩计算。baseConfig：动态 Base 色表的生成配置。extendedConfig：动态 Extended 色表的生成配置。aliasMap：动态生成时使用的别名映射定义。levels：动态生成时使用的层级定义。shades：动态生成时使用的色阶定义。
什么时候需要这些 named exports：
- 只是取色时，用
$c即可，例如$c.rea5。 - 需要拿到拆分后的原始数据时，用
base/extended。 - 需要单独处理别名数据时，用
alias/baseAlias/extendedAlias。 - 只有在扩展或排查动态生成逻辑时，才需要
baseConfig、extendedConfig、aliasMap、levels、shades。
实际项目里，静态入口与动态入口通常是二选一使用，不需要同时导入两套。
静态与动态的区别：
- 静态（
@techui/colors/@techui/colors/static/all）：直接使用预构建 JS bundle，适合稳定输出与直接使用。 - 动态（
@techui/colors/dynamic/all）：运行时根据配置生成色表，适合偏好算法驱动生成链路的场景。 - 两者核心 API 保持一致（
default、$c、chroma以及对应的色表 named exports），区别只在色表来源。
使用示例：
// TechUI/Colors Base - 使用基础色
let color = $c.rea5 // 红色
let blue = $c.aza5 // 蓝色
let gray = $c.gyd4 // 灰色
// TechUI/Colors Extended - 使用扩展色
let color2 = $c.reA10 // 红色（更细腻的色阶）
let blue2 = $c.azA03 // 蓝色CSS/Less 使用方式
可用的 Less 入口：
@techui/colors/less/base@techui/colors/less/extended@techui/colors/less/all
Vue 2 (vue.config.js)
需要先安装依赖：less、less-loader、style-resources-loader
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
"@techui/colors/less/all"
]
}
}
}Vue 3 + Vite (vite.config.js)
需要先安装依赖：less、less-loader
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `
@import "@techui/colors/less/all";
`
}
}
}
})在样式文件中使用：
// TechUI/Colors Base
.text {
color: @rea5;
background-color: @aza5;
border: 1px solid @gyd4;
}
// TechUI/Colors Extended
.text-v2 {
color: @reA10;
background-color: @azA03;
border: 1px solid @gyE05;
}CSS/SCSS 使用方式
可用的 SCSS 入口：
@techui/colors/scss/base@techui/colors/scss/extended@techui/colors/scss/all
Vue 2 (vue.config.js)
需要先安装依赖：sass、sass-loader、style-resources-loader
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"@techui/colors/scss/all"
]
}
}
}Vue 3 + Vite (vite.config.js)
需要先安装依赖：sass
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@techui/colors/scss/all";
`
}
}
}
})在样式文件中使用：
// TechUI/Colors Base
.text {
color: $rea5;
background-color: $aza5;
border: 1px solid $gyd4;
}
// TechUI/Colors Extended
.text-v2 {
color: $reA10;
background-color: $azA03;
border: 1px solid $gyE05;
}测试用例
当前包内已经包含浏览器测试页，位于 test/ 目录：
test/js/index.html- JS 测试页，包含static/base、static/extended、dynamic/base、dynamic/extendedtest/less/index.html- Less 测试页，包含base/extended两个标签test/scss/index.html- SCSS 测试页，包含base/extended两个标签
共享测试工具位于：
test/common/tokens.mjstest/common/render.mjstest/common/page.css
说明：
test/js/index.html直接预览真实 JS 入口导出的颜色结果。test/less/index.html通过test/less/background.less中生成的辅助 class 进行预览。test/scss/index.html不是在浏览器中直接运行原始 SCSS，而是基于编译后的test/scss/page.css进行测试。
SCSS 测试建议流程：
npm run test:scss:bg
npx sass ./test/scss/page.scss ./test/scss/page.css --no-source-map🎨 颜色命名规则
Base 版本命名规则
颜色命名由 基础色 + 色度层级 + 明暗度 组成。
25 种基础色（色相间隔 15°）：
re- 红色 (red)or- 橙色 (orange)ye- 黄色 (yellow)ch- 黄绿色 (chartreuse)gr- 绿色 (green)mi- 薄荷色 (mint)cy- 青色 (cyan)az- 天蓝色 (azure)bl- 蓝色 (blue)vi- 紫色 (violet)ma- 品红 (magenta)rs- 玫瑰色 (rose)gy- 灰色 (gray)- 以及中间色：
ro、oy、yc、cg、gm、mc、ca、ab、bv、vm、mr、rr
4 种色度层级：
a- a级（色度最高）b- b级c- c级d- d级（色度最低/最中性）
9 级明暗度：1（最淡）到 9（最深）
示例：
rea5- 红色，a级色度，5 级明暗azd1- 天蓝色区域，d级色度，1 级明暗rea9- 红色，a级色度，9 级明暗（深红）
Extended 版本命名规则
Extended 版本提供更细腻的色阶变化。
饱和度：A、B、C、D、E、F 六种
明暗度：01 到 19 共 19 级
示例：
reA10- 红色，A 饱和度，10 级明暗azE05- 天蓝色区域，E 饱和度，5 级明暗
🔧 进阶功能
JavaScript 颜色处理函数
基于 chroma.js 封装的颜色处理函数：
// 透明度
let color = $c.fade('aza5', 0.5) // 50% 透明度
// 色相调整
let hue = $c.hslh('rea5', 30) // 色相偏移 30°
// 饱和度调整
let sat = $c.hsls('rea5', 0.8)
// 明暗调整
let light = $c.hsll('rea5', 0.6)
// 加深/减淡
let darker = $c.darken('aza5', 0.2)
let lighter = $c.lighten('aza5', 0.2)
// 颜色渐变（生成多个颜色之间的过渡色）
let gradient = $c.scale(['rea5', 'aza5', 'yea5'], 10, 'lch')
// 参数：颜色数组（最少2个）、需要的颜色数量、混合模式（lch/hsl/lab/lrgb，默认 lch）进阶颜色工具函数
// 1. 解析颜色 — 支持预定义颜色名、@ 前缀写法，以及原始 Hex/RGB 值
const blue = $c.resolve('aza5')
const blueFromToken = $c.resolve('@aza5')
// 2. 校验颜色是否有效
const isValidPreset = $c.valid('aza5') // true
const isValidHex = $c.valid('#1677ff') // true
// 3. 表达式语法 — 管道式颜色变换简写
const softBlue = $c.expr('@aza5|.3') // 等同于 fade 30% 透明度
const softHex = $c.expr('#1677ff|.4') // 普通 Hex 颜色同样支持
const fadeBlue = $c.expr('@aza5|fade(.3)') // 显式 fade
const lightBlue = $c.expr('@aza5|lighten(2)') // 提亮
const darkBlue = $c.expr('@aza5|darken(1)') // 加深
const customL = $c.expr('@aza5|hsll(.35)') // 设置 HSL 亮度
// 4. 根据基础色生成语义色阶
const colors = $c.genColors('aza5', 7)
// 参数：基础色（或颜色数组）、数量、每步色相偏移量、饱和度衰减系数
// 5. 将色阶数组转换为语义对象，并附加透明度变体
const colorObj = $c.genColorObj(colors, [0.9, 0.7, 0.5])
// 结果包含 weak / base / strong 等语义键，以及对应的透明度变体表达式语法速查
| 写法 | 等价调用 | 说明 |
| --- | --- | --- |
| @aza5 | $c.resolve('aza5') | @ 明确表示 TechUI Colors 预定义颜色名 |
| @aza5\|.3 | $c.fade('aza5', .3) | 管道后接数字，默认为透明度 |
| @aza5\|fade(.3) | $c.fade('aza5', .3) | 显式透明度处理 |
| @aza5\|lighten(2) | $c.lighten('aza5', 2) | 提亮颜色 |
| @aza5\|darken(1) | $c.darken('aza5', 1) | 加深颜色 |
| @aza5\|hsll(.35) | $c.hsll('aza5', .35) | 设置 HSL 亮度 |
| #1677ff\|.4 | $c.fade('#1677ff', .4) | 普通 Hex 颜色同样支持表达式 |
Less 颜色处理函数
.element {
// 透明度
color: fade(@aza5, 50%);
// 明暗调整
background: lighten(@rea5, 20%);
border-color: darken(@aza5, 10%);
// 饱和度调整
box-shadow: 0 0 10px saturate(@rea5, 20%);
// 色相旋转
outline-color: spin(@rea5, 30);
// 颜色混合
background: mix(@rea5, @aza5, 50%);
}更多 Less 颜色函数请参考 Less 官方文档。
📖 版本选择建议
使用 Base 版本
- ✅ 日常项目开发
- ✅ 快速原型设计
- ✅ 需要易于记忆和掌控的配色方案
- ✅ 一般 Web 应用和管理后台
Base 版本颜色数量适中，易于掌握，能够满足绝大多数项目的配色需求。
使用 Extended 版本
- ✅ 数据可视化项目
- ✅ 大屏展示系统
- ✅ 需要精细色阶控制
- ✅ 专业设计项目
Extended 版本提供更细腻的颜色变化，适合对配色有更高要求的场景。
🔨 开发工具
颜色转换工具
项目提供了颜色转换工具，可以将普通颜色值转换为 TechUI/Colors 格式。
支持输入格式：
- 颜色名称：
red - 十六进制：
#FF0000 - RGB/RGBA：
rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
工具会返回 Base 和 Extended 版本中的最佳匹配结果。距离参数越小表示与原始颜色越接近。
工具位于 aYinColor-Extended source 目录中。
📂 包含文件
index.js- 包默认入口，当前转发到js/index.static.all.jsjs/index.static.base.js- 静态 Base JS 入口js/index.static.extended.js- 静态 Extended JS 入口js/index.static.all.js- 静态全量 JS 入口js/index.dynamic.base.js- 动态 Base JS 入口js/index.dynamic.extended.js- 动态 Extended JS 入口js/index.dynamic.all.js- 动态全量 JS 入口js/static/bundle.base.js- 静态 Base bundlejs/static/bundle.extended.js- 静态 Extended bundlejs/dynamic/bundle.base.js- 动态 Base bundlejs/dynamic/bundle.extended.js- 动态 Extended bundlejs/dynamic/bundle.all.js- 动态全量 bundlejs/common/tools.js- 共享 JS 颜色工具，会被挂载到$cless/base.less- Base Less 色表less/extended.less- Extended Less 色表less/all.less- Less 聚合入口scss/base.scss- Base SCSS 色表scss/extended.scss- Extended SCSS 色表scss/all.scss- SCSS 聚合入口test/js/index.html- JS 测试页test/less/index.html- Less 测试页test/scss/index.html- SCSS 测试页（基于编译后的 CSS 结果）preview.html- 离线版颜色表预览查询匹配工具
🎯 设计原理
TechUI/Colors 基于 HSL 色彩模型设计：
- 色相 (Hue)：从纯红色
#FF0000开始，每隔 15° 生成一个基础色，共 24 个基础色 + 1 个灰色 - 饱和度 (Saturation)：Base 提供 4 级，Extended 提供 6 级
- 明度 (Lightness)：Base 提供 9 级，Extended 提供 19 级
这种设计使得颜色调用更加直观和系统化。
📚 相关链接
- 🏠 中国站
- 🌐 全球站
- 📦 npm 包
- 💻 GitHub 仓库
- 🎥 Bilibili 视频教程
- 🎨 颜色表预览
- 🎨 Color Preview
👨💻 作者
aYin
- Email: [email protected]
- WeChat: jay1986cn
🙏 致谢
- 基于 chroma.js 开发
- 感谢所有使用和支持 @techui/colors 的开发者