Paletax 🎨

Advanced OKLCH-based Color System for Modern UI Frameworks.

English Version | 中文版本

English Version

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

Demos

See all demos

Key Features

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

• 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 for pure, breathable background colors.

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

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

Usage

1. Define Your Palette In your configuration file, define colors using OKLCH channels:

$level-colors: (
  "brand": (60%, 0.20, 260, true), // L, C, H, GenerateNativeVar
  "amber": (78%, 0.18, 85, true)
);

2. Execution The engine will automatically output CSS variables and utility classes:

: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. | | Config | Dictionary of LCH values for 50+ curated hues. | | Distributor | Flattens maps into CSS variables and atomic classes. |

中文版本

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

演示

查看所有演示

核心特性

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

• 数学驱动的色阶引擎：

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

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

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

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

使用方法

1. 定义调色板 在配置文件中，使用 OKLCH 通道定义颜色：

$level-colors: (
  "brand": (60%, 0.20, 260, true), // 亮度, 色度, 色相, 是否生成原生变量
  "amber": (78%, 0.18, 85, true)
);

2. 执行生成 引擎会自动输出 CSS 变量与工具类：

:root {
  --ax-color-brand-1: oklch(0.99 0.01 260); /* 极浅背景色 */
  --ax-color-brand-8: oklch(0.65 0.18 260); /* 标准色阶 */
}

/* 原子化类 */
.ax-bg-brand-1 { background-color: var(--ax-color-brand-1); }
.ax-fg-brand-8 { color: var(--ax-color-brand-8); }

架构设计

| 模块 | 说明 | | --- | --- | | Engine (引擎) | 基于 $\cos$ 和 pow 逻辑的核心递归 Mixins。 | | Config (配置) | 包含 50+ 精选色相的 LCH 字典。 | | Distributor (分发) | 将 Map 数据扁平化为 CSS 变量与原子类。 |

Development / 开发信息

• Last Modified: 2026/03/06
• Author: AXUI Develop Team
• Principle: Balance empathy with candor — visual beauty through mathematical rigor.
• 理念： 感性与理性的平衡 —— 用严谨的数学构建视觉的美感。