@techui/colors
Advanced tools
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.
rel5 (red), bll5 (blue)Import in your project entry file (e.g., main.js):
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:
import { $c, $chroma } from “@techui/colors”
const color = $c.rel5
Usage examples:
// 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
First install dependencies: less, less-loader, style-resources-loader
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")
]
}
}
}
First install dependencies: less, less-loader
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:
// 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;
}
Color names consist of base color + saturation + lightness.
25 Base Colors (15° hue intervals):
re - redor - orangeye - yellowch - chartreusegr - greenaq - aquamarinecy - cyanbl - bluein - indigopu - purplepi - pinkvi - violetredgy - grayro, oy, yc, cg, ga, ac, cb, bi, ip, pp, pv, vr4 Saturation Levels:
l - lightm - middler - roastd - dark9 Lightness Levels: 1 (lightest) to 9 (darkest)
Examples:
rel5 - Red, light saturation, level 5 lightnessbld1 - Blue, dark saturation, level 1 lightness (light blue with deep saturation)rel9 - Red, light saturation, level 9 lightness (deep red)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 lightnessblE05 - Blue, E saturation, level 5 lightnessColor processing functions based on chroma.js:
// 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)
.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.
V1 has a moderate number of colors, easy to master, and meets the color needs of most projects.
V2 provides finer color variations, suitable for scenarios with higher color requirements.
The project provides a color conversion tool that converts regular color values to TechUI/Colors format.
Supported input formats:
red#FF0000rgb(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.
ayin-color.less - V1 CSS versionayin-color-expand.less - V2 CSS versionayin-color.js - JavaScript versionayin-color.json - Static color values JSON fileindex.js - Entry filepreview.html - Offline color table preview, query, and matching toolTechUI/Colors is designed based on the HSL color model:
#FF0000, generates a base color every 15°, totaling 24 base colors + 1 grayThis design makes color usage more intuitive and systematic.
Ayin
ayin 开发的 js 和 less 版本的颜色表。
@techui/colors 曾用名为 ayin-color，是一个颜色库工具，旨在帮助开发者摆脱记忆 #FF0000、RGB(255,0,0) 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。
rel5（红色）、bll5（蓝色）在项目入口文件（如 main.js）中引入：
import tuiColors from "@techui/colors"
Vue.use(tuiColors)
//此时你可以在项目中任意位置使用$c,$chroma
或者在组件或者页面中使用import引入使用，如：
import { $c, $chroma } from "@techui/colors"
const color=$c.rel5
使用示例：
// 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 // 蓝色
需要先安装依赖：less、less-loader、style-resources-loader
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")
]
}
}
}
需要先安装依赖：less、less-loader
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')}";
`
}
}
}
})
在样式文件中使用：
// 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;
}
颜色命名由 基础色 + 饱和度 + 明暗度 组成。
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、vr4 种饱和度：
l - light（淡）m - middle（中）r - rost（烤）d - dark（深）9 级明暗度：1（最淡）到 9（最深）
示例：
rel5 - 红色，light 饱和度，5 级明暗bld1 - 蓝色，dark 饱和度，1 级明暗（淡蓝深饱和）rel9 - 红色，light 饱和度，9 级明暗（深红）V2 版本提供更细腻的色阶变化。
饱和度：A、B、C、D、E、F 六种
明暗度：01 到 19 共 19 级
示例：
reA10 - 红色，A 饱和度，10 级明暗blE05 - 蓝色，E 饱和度，5 级明暗基于 chroma.js 封装的颜色处理函数：
// 透明度
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）
.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 官方文档。
V1 版本颜色数量适中，易于掌握，能够满足绝大多数项目的配色需求。
V2 版本提供更细腻的颜色变化，适合对配色有更高要求的场景。
项目提供了颜色转换工具，可以将普通颜色值转换为 TechUI/Colors 格式。
支持输入格式：
red#FF0000rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)工具会返回 V1 和 V2 版本中的最佳匹配结果。距离参数越小表示与原始颜色越接近。
工具位于 aYinColor-V2 source 目录中。
ayin-color.less - V1 CSS 版本ayin-color-expand.less - V2 CSS 版本ayin-color.js - JavaScript 版本ayin-color.json - 静态颜色值 JSON 文件index.js - 入口文件preview.html - 离线版颜色表预览查询匹配工具TechUI/Colors 基于 HSL 色彩模型设计：
#FF0000 开始，每隔 15° 生成一个基础色，共 24 个基础色 + 1 个灰色这种设计使得颜色调用更加直观和系统化。
Ayin
FAQs
Color tables for js and less versions developed by ayin.
We found that @techui/colors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.