@TechUI/Colors Introduction

👑Pioneer

🔓Open Source

TechUI Colors is the visual palette of the TechUI ecosystem and the universal language connecting code and design.

In traditional development, we are accustomed to memorizing #1890FF or rgb(24, 144, 255). But in the world of TechUI, we restore color to natural semantics. @techui/colors is a dual-mode (JS + LESS) color library built on the HSL model, designed to help developers break free from the constraints of hexadecimal codes.

One-sentence summary: Call colors using human language (e.g., "Red-Light-Level 5") instead of machine code.

Core Philosophy

The core of TechUI Colors lies in "Readability". Whether in JS logic or LESS styles, color names follow the same intuitive syntax:

Hue + Saturation + Lightness

• re (Red) + l (Light) + 5 (Level 5) = rel5 (Standard Red)
• bl (Blue) + d (Dark) + 1 (Level 1) = bld1 (Deep Blue)

This naming convention allows the appearance of the color to emerge directly in your mind when reading the code.

Dual Version Architecture

To balance the needs of "daily development" and "professional data visualization", this library has two independent built-in color systems.

⭐️ Colors V1 (Standard Version)

"Sufficient, Easy to Remember"

• Scale: 25 basic hues × 4 saturations × 9 lightness levels.
• Positioning: Designed specifically for UI interfaces. Suitable for building conventional elements like buttons, backgrounds, and borders.
• Characteristics: Distinct gradation steps, easy to distinguish.

☀️ Colors V2 (Extended Version)

"Extreme Delicacy"

• Scale: Supports finer A-F (6 levels) saturation and 01-19 (19 levels) lightness.
• Positioning: Designed specifically for ECharts / GIS Maps / Data Large Screens.
• Characteristics: Provides silky smooth gradients, solving the pain point of insufficient colors in complex charts.

Interactive Preview

@techui/colors is not just a dependency package; it comes with a powerful local interactive console —— preview.html.

This is an offline HTML file located at node_modules/@techui/colors/preview.html after installing dependencies. It solves the problem of "knowing the color name but not knowing what it looks like".

Visual Palette

You can visually see the full spectrum of V1 and V2. Click the toggle button at the top to switch seamlessly between the two standards.

• V1 Panel: Clearly displays the changes in 9 lightness levels, suitable for quick color selection.
• V2 Panel: Displays an ultra-long gradation of 19 levels, providing rich material for gradient design.

Smart Color Match

This is the tool's killer feature. When a designer gives you an unfamiliar Hex value (e.g., #FF00FF), you don't need to manually search for the closest TechUI variable.

• Input: Paste any Hex / RGB color into the input box.
• Output: The system automatically calculates the Euclidean distance and returns the closest color variable names in the V1 and V2 libraries respectively (e.g., piA10), and displays the color difference distance.

As shown in the figure below, entering #ff00ff, the system precisely matched piA10 (Distance: 6.05) in the V2 library and pil5 in the V1 library.

Technical Features

Cross-Platform Support

One set of variables runs everywhere.

• JavaScript: Based on chroma.js encapsulation, supporting $c.rel5 calls, with built-in powerful color manipulation functions like fade, darken, scale.
• LESS: Provides .less variable files, supporting @rel5 calls, and is compatible with Less native color functions.

Scientific HSL Model

Unlike simple color lists, TechUI Colors are generated based on algorithms.

• Hue Ring: Starting from pure red (#FF0000), a new base color is generated every 15° rotation, ensuring the completeness and harmony of the hue ring.

Installation and Usage

Installation

npm install @techui/colors

Usage in Vue/JS

import { $c } from "@techui/colors";

// Directly get color value
const primaryColor = $c.blm5; // Outputs corresponding Blue Hex

// Use color functions to create gradients
const gradient = $c.scale(['rel5', 'bll5'], 10);

Usage in Less

/* Import variable file (usually globally injected in vite.config.js) */
@import "~@techui/colors/base.less";

.my-button {
  background: @blm5;      // Use V1 variable
  color: @reA10;          // Use V2 variable
  border-color: @gyd4;    // Use gray series
}