Colors
A comprehensive color system built with OKLCH color space, combining Tailwind CSS colors with custom generated brand and surface colors, plus semantic tokens for consistent UI design.
Color System
The Ontopix color system uses OKLCH (Oklab Lightness-Chroma-Hue), a perceptually uniform color space that ensures consistent visual steps across the palette.
What is OKLCH?
OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space where:
- L (Lightness): 0-100, perceptual brightness
- C (Chroma): 0-0.4, color saturation/intensity
- H (Hue): 0-360, color angle (red=0°, green=120°, blue=240°)
Unlike RGB or HSL, equal steps in OKLCH produce colors that appear equally different to human eyes, making it ideal for generating consistent color scales.
Palette Organization
Our color system includes 319 colors across 4 palettes:
| Palette | Type | Colors |
|---|---|---|
tailwind | general | 187 |
tailwind-surface | general | 99 |
ontopix | brand | 11 |
ontopix-surface | brand | 22 |
Each palette uses an 11-step shade scale (50-950). Shade 500 is the reference mid-tone.
For complete palette reference with hue steps and shade values, see Color Palettes.
Quick Usage
<!-- Brand palette -->
<div class="bg-onbrand-500 text-onbrand-50">Primary brand color</div>
<!-- Surface palette -->
<div class="bg-onneutral-50 text-onneutral-900">Neutral background</div>
<!-- Semantic tokens -->
<button class="bg-primary">Primary action</button>
Related Sections
- Color Palettes — Interactive palette explorer with all colors and shades
- Semantic Tokens — Purpose-based color naming system
- Accessibility — Color contrast and WCAG compliance