Paletax 🎨

Advanced OKLCH-based Color System for Modern UI Frameworks. 基于 OKLCH 色彩空间的高级现代 UI 颜色系统。

Paletax is a high-performance, mathematically driven color generation engine built with Less. It leverages the OKLCH color space to provide perceptually uniform color scales, ensuring consistent visual weight and accessibility across the entire spectrum.

Paletax 是一个基于 Less 构建的高性能、数学驱动的颜色生成引擎。它利用 OKLCH 色彩空间提供视觉感知的均匀色阶，确保全色谱在视觉重量和无障碍访问（Accessibility）上的一致性。

Key Features / 核心特性

• Perceptually Uniform (OKLCH): Unlike HSL, Paletax uses OKLCH to ensure that colors with the same lightness value actually look equally bright to the human eye.

• 视觉感知均匀 (OKLCH)：不同于 HSL，Paletax 使用 OKLCH 确保相同亮度值的颜色在人眼中具有一致的明度感受。

• Mathematical Scale Engine:

• Lightness: Uses a cos curve with pow remapping for ultra-clean, high-plateau light shades (Level 1-3).

• Chroma: Features parabolic compensation and exponential damping (exp) for pure, breathable background colors.

• 数学驱动的色阶引擎：

• 亮度：采用 cos 余弦曲线配合 pow 重映射，打造极度纯净、高平原效果的浅色阶（1-3 阶）。

• 色度：具备抛物线补偿与指数衰减（exp），确保背景色通透、不发焦。

• Smart Variants: Automatically generates 1-16 systematic scales and 17-20 adaptive brand variants.

• 智能变体：自动生成 1-16 级系统色阶及 17-20 级自适应品牌色扩展。

• Atomic Utilities: Generates full sets of CSS variables and utility classes (.ax-fg-*, .ax-bg-*) automatically.

• 原子化工具：自动生成全量 CSS 变量与原子化工具类。

Mathematical Logic / 数学逻辑

Paletax handles color transitions using non-linear distribution to mimic natural light perception: Paletax 使用非线性分布处理颜色过渡，以模拟自然光感：

$$L_{calc} = L_{end} + (L_{start} - L_{end}) \cdot (0.5 + 0.5 \cdot \cos(t^{1.1} \cdot \pi))$$

Usage / 使用方法

1. Define Your Palette / 定义调色板

In your configuration file, define colors using OKLCH channels: 在配置文件中，使用 OKLCH 通道定义颜色：

@level-colors: {
  brand: 60%, 0.20, 260, true; // L, C, H, GenerateNativeVar
  amber: 78%, 0.18, 85, true;
}

2. Generate / 执行生成

The engine will automatically output CSS variables and utility classes: 引擎会自动输出 CSS 变量与工具类：

:root {
  --ax-color-brand-1: oklch(0.99 0.01 260); /* Ultra-light background */
  --ax-color-brand-8: oklch(0.65 0.18 260); /* Standard shade */
}

/* Utility classes */
.ax-bg-brand-1 { background-color: var(--ax-color-brand-1); }
.ax-fg-brand-8 { color: var(--ax-color-brand-8); }

Architecture / 架构设计

| Module / 模块 | Description / 说明 | | --- | --- | | Engine (引擎) | Core recursive mixins using cos and pow logic. / 核心递归 Mixins。 | | Config (配置) | Dictionary of LCH values for 50+ curated hues. / 50+ 精选色相的 LCH 字典。 | | Distributor (分发) | Flattens maps into CSS variables and atomic classes. / 将 Map 扁平化为 CSS 变量与原子类。 |

Development / 开发

Last Modified: 2026/03/06

Author: AXUI Develop Team

Principle: Balance empathy with candor — visual beauty through mathematical rigor.

理念： 感性与理性的平衡 —— 用严谨的数学构建视觉的美感。