ZeonTools
1OKLCH: The Perceptually Uniform Color Model
OKLCH is a cylindrical (polar) mathematical representation of the Oklab color space, engineered by Björn Ottosson in 2020. It was designed to decisively solve the perceptual non-uniformity flaws inherent in legacy web color models like HSL (Hue, Saturation, Lightness) and HSV.
The model comprises three coordinate axes:
- L (Lightness, 0% – 100%): Represents the true photometric perceived lightness of the color, directly correlated to human optical cone response.
- C (Chroma, 0.0 – 0.37+): Represents absolute color purity or intensity, distinct from relative "saturation." It scales independently of lightness.
- H (Hue, 0° – 360°): The angular position on the color wheel, mathematically aligned with human perception of color families.
The critical design advantage of OKLCH is strict perceptual uniformity: two colors with identical L and C values but differing H angles will appear exactly equally bright and vivid to the human eye. In contrast, HSL is fundamentally broken in this regard—an HSL yellow at 50% lightness appears brilliantly bright, while an HSL blue at the exact same 50% lightness appears dark and muddy.
oklch(0.65 0.22 270deg). This allows our design tokens to be deployed directly into production stylesheets without requiring PostCSS polyfills or JavaScript color interpolators.
2CIEDE2000 Delta-E: The Gold Standard Colour Difference Metric
The International Commission on Illumination (CIE) defines color difference using the Delta-E (ΔE) metric. CIEDE2000 (ΔE00) is the most mathematically rigorous and perceptually accurate difference formula currently defined under ISO 11664-6.
It drastically improves upon the earlier CIE76 (which relied on simple Euclidean distance in Lab space) and CIE94 by introducing four critical non-linear correction factors: kL (lightness weighting), kC (chroma weighting), kH (hue weighting), and RT (a specialized rotational term correcting the perceptual anomaly in the blue color region around 275°).
| ΔE00 Value | Perceptual Interpretation | Application & Use Case |
|---|---|---|
| < 1.0 | Imperceptible to human vision | High-end Pantone color matching, proofing |
| 1.0 – 2.0 | Perceptible only to trained observers | High-fidelity print and textile manufacturing |
| 2.0 – 10.0 | Clearly distinguishable difference | UI Palette generation and hover state design |
| 11.0 – 49.0 | Strong distinction and separation | WCAG Accessible UI component boundaries |
| ≥ 50.0 | Maximum difference (opposite colors) | Critical warning alerts and error state design |
3Trigonometric Colour Harmony Algorithms
Algorithmic colour harmony rules are derived mathematically from the geometry of the CIE hue wheel. By applying strict angular rotations and vector reflections to a base OKLCH Hue, our engine computes perfectly balanced palettes:
- Analogous (±30°): Extracts colors immediately adjacent to the base hue. Creates serene, low-tension cohesive palettes. Highly utilized by corporate SaaS brands and healthcare platforms.
- Complementary (180°): Computes the exact polar opposite hue vector. Yields maximum visual contrast. Ideal for isolating Call-to-Action (CTA) buttons on monochromatic dashboards.
- Triadic (3 × 120°): Plots three equidistant points forming an equilateral triangle. Produces balanced, vibrant, and energetic themes often seen in creative agencies or children's branding.
- Tetradic / Rectangle (90° / 270°): Extracts four hues forming a rectangular geometric bound. Extremely rich and complex, though it requires strict Chroma attenuation on secondary pairs to prevent visual fatigue.
- Split-Complementary (150° / 210°): Replaces the direct complement with its two adjacent neighbors. Maintains the high contrast of a complementary pair but drastically reduces harsh visual tension.
- Monochromatic (0°): Locks the Hue angle and Chroma strictly in place, algorithmically scaling only the Lightness axis. The safest, most elegant approach for luxury goods, fintech dashboards, and minimalist UI design.
4WCAG 2.1 AA/AAA vs APCA Contrast Standards
Palette generation is useless if the resulting combinations are illegal under international accessibility laws. WCAG 2.1 Success Criterion 1.4.3 legally mandates a minimum contrast ratio of 4.5:1 for normal body text (Level AA) and 7.0:1 for Level AAA. This is computed using a legacy sRGB relative luminance formula.
However, the 1998 WCAG 2.1 algorithm suffers from known mathematical failures—for example, pure white text over bright neon yellow can mathematically pass the 4.5:1 threshold despite being entirely illegible to the human eye. To solve this, our studio cross-validates palettes against the Advanced Perceptual Contrast Algorithm (APCA).
APCA (the foundation for WCAG 3.0 / Silver) computes a directional lightness difference (Lc value) utilizing spatially-weighted channel coefficients and human glare-response curves. APCA targets ≥ 75 Lc for standard body text and ≥ 60 Lc for large or bold typography, providing an infinitely safer baseline for dark mode UI generation.
5K-Means Image Extraction
Extracting a dominant color palette from a photograph requires advanced unsupervised machine learning. Our extraction engine implements Lloyd's Algorithm (a strict mathematical variant of the Expectation-Maximization algorithm) directly in your browser's WebAssembly / JavaScript sandbox.
The computational pipeline executes as follows:
- Downsampling: The uploaded image is aggressively downsampled via an OffscreenCanvas to a 150×150 pixel matrix to eliminate high-frequency noise and optimize CPU cycles.
- Vector Cloud Generation: The engine samples every 4th pixel (ignoring pixels with Alpha < 128) to construct a 3D point cloud in the RGB color space.
- Centroid Initialization: The algorithm randomly seeds K initial centroids (e.g., 5 colors).
- Iterative Convergence: Over 8 to 15 iterations, every pixel is assigned to its nearest centroid calculating the 3D Euclidean distance (or ΔE distance). Centroids are then re-calculated as the mathematical mean of their assigned cluster points.
- Output: The engine stabilizes and outputs the final K centroids as the mathematically dominant color palette.
6The Science of 50–950 Shade Ladder Generation
Modern component frameworks require extensive tonal palettes. Our studio generates 11-stop comprehensive shade ladders (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950), strictly adhering to the Tailwind CSS / Material Design architectural convention.
Critically, naive color generators create shades by simply blending the base color with white or black in the linear sRGB space, resulting in "muddy" darks and "washed out" pastels. Our engine instead locks the OKLCH Hue and interpolates solely along the CIE L* (Lightness) axis using parametric easing curves. This guarantees that every step in the ladder appears perfectly uniform and visually equidistant to the human eye, maintaining peak brand saturation across the entire tonal range.
7Colour Vision Deficiency (CVD) Simulation
Accessibility compliance requires verifying color contrast under varying biological conditions. Approximately 8% of males and 0.5% of females globally experience some form of Colour Vision Deficiency (CVD). Our studio applies hardware-accelerated SVG feColorMatrix filters mathematically derived from the Brettel (1997) and Viénot (1999) dichromacy linearization models.
- Protanopia (Red-Blind): L-cone receptors absent. Red warning alerts often collapse into dark gray or black.
- Deuteranopia (Green-Blind): M-cone receptors absent. Reds and greens become indistinguishable shades of olive/khaki.
- Tritanopia (Blue-Blind): S-cone receptors absent. Blues confuse with greens, and yellows shift towards pink.
Testing your generated OKLCH palette through these real-time filters guarantees compliance with WCAG 2.1 Success Criterion 1.4.1 (Use of Color), which legally mandates that color cannot be the sole visual means of conveying information or indicating an action.
8Design Token Format Reference
A color palette is only as valuable as its ability to be deployed into engineering environments. Our studio compiles the perceptual data into industry-standard design tokens:
| Export Format | Engineering Target | Key Syntax Example |
|---|---|---|
| CSS Custom Properties | Vanilla web apps, Framework-agnostic | --color-primary-500: #3b82f6; |
| Tailwind v4 @theme | Tailwind CSS 4.x architecture | --color-brand-100: oklch(0.9 0.05 250); |
| Tailwind v3 Config | Tailwind CSS 3.x config files | colors: { 'brand-1': '#3b82f6' } |
| Design Token JSON | Style Dictionary, Theo, Figma Tokens | {"value":"#3b82f6","type":"color"} |
| SCSS Map | SASS/SCSS compiler toolchains | $palette: ("brand-1": #3b82f6); |
| Swift / SwiftUI | iOS/macOS native development | Color(red: 0.231, green: 0.510, blue: 0.965) |
| Kotlin (Compose) | Android Jetpack Compose | Color(0xFF3B82F6) |
| Android XML | Android Legacy XML resources | <color name="brand_1">#3B82F6</color> |
9OKLCH vs HSL vs HWB: A Technical Comparison
| Color Space | Perceptual Uniformity | Purity Control | CSS Support | Primary Use Case |
|---|---|---|---|---|
| HSL | Extremely Poor (blue/yellow asymmetry) | Saturation (Relative) | Universal | Legacy codebases, simple prototypes |
| HWB (Hue, Whiteness, Blackness) | Moderate | Limited (Tint/Shade only) | Modern browsers | Simple tinting algorithms |
| OKLCH | Excellent (Oklab polar model) | True Absolute Chroma | Chrome 111+, Safari 16.4+ | Modern Design Systems & A11y |
| Display-P3 | Good (RGB cube) | Wide Gamut boundaries | Modern browsers | High-DPI Retina/OLED screen targeting |
10Display Gamut & P3 Wide-Colour Mapping
The standard web sRGB gamut covers only roughly 35% of the visible electromagnetic colour spectrum. Modern hardware, such as Apple's Display P3 (utilized in all iPhone, Mac Retina, and iPad Pro panels since 2016), covers approximately 45% of the visual spectrum, enabling rendering of up to 50% more saturated neon greens, pure reds, and deep cyan tones.
Because OKLCH is an absolute, unbounded color space, generating colors with extreme Chroma values (C > 0.30) will mathematically exceed the restrictive sRGB gamut boundaries. When this occurs, our engine automatically performs perceptual gamut-mapping, compressing the Chroma channel to the nearest valid sRGB boundary so the hex output remains valid for standard monitors without clipping or hue shifting.
11UI Color Application Theory: The 60-30-10 Rule
Generating a beautiful palette is only half the battle; distributing those colors across a UI dictates the user experience. The 60-30-10 Rule is a time-tested architectural principle derived from interior design:
- 60% Primary Surface: The dominant background canvas. In light mode, this is typically
slate-50or pure white. In dark mode,slate-900orgray-950. It provides the negative space necessary for cognitive ease. - 30% Secondary Application: Used for structural elements like sidebars, cards, input fields, and borders. Often utilizes the 100-300 or 700-800 ranges of the shade ladder to create depth and hierarchy without overwhelming the primary surface.
- 10% Accent / CTA: The high-chroma brand color (usually the 500 or 600 step). Strictly reserved for primary Call-to-Action buttons, active state indicators, and critical conversion elements. Overusing the accent color destroys its psychological impact.
