@techui/colors

v1.0.2

Published

4 months ago

Color tables for js and less versions developed by ayin.

0High
0Medium
0Low

jay86cn

ayin86cn

@techui techui ayin color colors palette color palette theme echart echarts echart theme chroma chroma.js

@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.

✨ Features

🎨 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.

🚀 Quick Start

JavaScript Usage

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

CSS/Less Usage

Vue 2 (vue.config.js)

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")
      ]
    }
  }
}

Vue 3 + Vite (vite.config.js)

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 Naming Convention

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

🔧 Advanced Features

JavaScript Color Processing Functions

Color 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)

Less Color Processing Functions

.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.

📖 Version Selection Guide

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.

🔨 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 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.

📂 Included Files

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

🎯 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: V1 provides 4 levels, V2 provides 6 levels
Lightness: V1 provides 9 levels, V2 provides 19 levels

This design makes color usage more intuitive and systematic.

📚 Related Links

👨‍💻 Author

Ayin

Email: [email protected]
WeChat: jay1986cn

🙏 Acknowledgments

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) 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。

✨ 特性

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

🚀 快速开始

JavaScript 使用方式

在项目入口文件（如 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    // 蓝色

CSS/Less 使用方式

Vue 2 (vue.config.js)

需要先安装依赖：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")
      ]
    }
  }
}

Vue 3 + Vite (vite.config.js)

需要先安装依赖：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;
}

🎨 颜色命名规则

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 级明暗

🔧 进阶功能

JavaScript 颜色处理函数

基于 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）

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 官方文档。

📖 版本选择建议

使用 V1 版本

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

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

使用 V2 版本

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

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

🔨 开发工具

颜色转换工具

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

支持输入格式：

颜色名称：red
十六进制：#FF0000
RGB/RGBA：rgb(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 色彩模型设计：

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

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

📚 相关链接

👨‍💻 作者

Ayin

Email: [email protected]
WeChat: jay1986cn

🙏 致谢

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@techui/colors

English

✨ Features

🚀 Quick Start

JavaScript Usage

CSS/Less Usage

Vue 2 (vue.config.js)

Vue 3 + Vite (vite.config.js)

🎨 Color Naming Convention

V1 Naming Rules

V2 Naming Rules

🔧 Advanced Features

JavaScript Color Processing Functions

Less Color Processing Functions

📖 Version Selection Guide

Use V1 Version

Use V2 Version

🔨 Development Tools

Color Conversion Tool

📂 Included Files

🎯 Design Philosophy

📚 Related Links

👨‍💻 Author

🙏 Acknowledgments

中文

✨ 特性

🚀 快速开始

JavaScript 使用方式

CSS/Less 使用方式

Vue 2 (vue.config.js)

Vue 3 + Vite (vite.config.js)

🎨 颜色命名规则

V1 版本命名规则

V2 版本命名规则

🔧 进阶功能

JavaScript 颜色处理函数

Less 颜色处理函数

📖 版本选择建议

使用 V1 版本

使用 V2 版本

🔨 开发工具

颜色转换工具

📂 包含文件

🎯 设计原理

📚 相关链接

👨‍💻 作者

🙏 致谢