Color Library

👑Pioneer

🔓Open Source

@techui/colors is a semantic color library based on natural language naming. It abstracts complex RGB/Hex color values into easy-to-remember semantic codes (e.g., rel5 stands for Red-Light-5), helping developers efficiently manage and call colors in JavaScript and CSS/Less environments.

Developed based on Chromajs, this library provides a complete and harmonious color system by precisely controlling hue, saturation, and lightness.

TechUI-Colors is not a strict requirement for using the TechUI component library.

Installation & Integration

For configuration methods, please refer to the Start - Extra Configuration chapter.

Core Features

• Semantic Naming: Abandon #FF0000 in favor of intuitive codes like rel5 (Red - Light - Medium Brightness).
• Dual-Mode Support: Supports both JavaScript runtime and Less preprocessor compile-time.
• Scientific Spectrum: Based on the HSL model, providing two sets of palettes: V1 (Basic) and V2 (Extended).
• Color Operations: Built-in powerful color processing functions based on chroma.js (gradient, transparency, mixing, etc.).
• Offline Preview: Built-in preview.html tool supporting quick lookup and color matching.

Naming Rules Detailed

V1 Basic Version (Recommended for Daily Use)

The V1 version naming consists of three parts: [Hue] + [Saturation] + [Lightness].

1. Hue: 25 basic colors, with a 15° span for each.

• re (Red), or (Orange), ye (Yellow), gr (Green), cy (Cyan), bl (Blue), pu (Purple), etc.
• gy (Gray) is for the achromatic scale.

2. Saturation: 4 levels.

• l (Light): Pale/Elegant
• m (Middle): Medium
• r (Rost): Roasted/Vintage
• d (Dark): Deep

3. Lightness: 1 (Brightest) to 9 (Darkest), with 5 being the base color.

Example Analysis:

• rel5: Red + Light + 5 (Base Lightness) = Standard Bright Red.
• bld9: Blue + Dark + 9 (Darkest) = Deep Night Blue.

V2 Extended Version (Recommended for Data Visualization)

The V2 version provides finer color gradations, suitable for scenarios requiring rich colors such as charts and maps.

1. Saturation: Extended to 6 levels, from A to F.
2. Lightness: Extended to 19 levels, from 01 to 19.

Example Analysis:

• reA10: Red hue, Saturation Level A, Lightness Level 10.

Color Processing Functions

TechUI Colors encapsulates common color operation functions to facilitate dynamic calculations.

// 1. Transparency Handling
const bg = $c.fade('bll5', 0.5); // 50% transparency

// 2. Hue Shift (Rotate Color Wheel)
const nextColor = $c.hslh('rel5', 30); // Rotate 30 degrees to the right

// 3. Saturation/Lightness Adjustment
const vivid = $c.hsls('rel5', 0.8); // Adjust saturation
const dark = $c.hsll('rel5', 0.2);  // Adjust lightness

// 4. Mixing & Calculation
const mixed = $c.mix('rel5', 'bll5', 0.5); // Mix red and blue
const isReadable = $c.contrast('rel5', '#fff'); // Calculate contrast

// 5. Generate Gradient Scale
// Params: [Start Color, End Color], Count, Mode (lch/rgb, etc.)
const palette = $c.scale(['rel5', 'bll5'], 10, 'lch');

Preview Tool

Locate the preview.html file in the node_modules/@techui/colors/ directory and open it directly in a browser to start exploring the color palette.

This is an offline color lookup tool with the following features:

• Spectrum Preview: Visually displays the palettes for all V1/V2 colors.
• Color Matching: Input any Hex/RGB color, and the tool will automatically calculate and return the variable name in the library closest to it (e.g., inputting #FF0010 suggests it is close to rel5).

It is recommended to use this tool during the early stages of development to quickly establish color familiarity.

Credits

Gregor Aisch (gka)

chroma.js Github

Less.js

Github

Special thanks to Gregor Aisch for developing the chroma.js library. Its outstanding mathematical algorithms provide solid underlying support for the JavaScript version of this component library, enabling precise HSL color space conversions and complex gradient operations.

At the same time, we extend our gratitude to the Less open-source community for providing powerful CSS preprocessor capabilities, which allow TechUI's color variable system to flow and compile seamlessly within the style code.