Precision Color Systems for Modern UI Engineers
Most traditional color wheels on the web were designed in the early 2000s for oil painters and print graphic designers. While classic Goethe and Itten color theory remains culturally timeless, modern digital products demand far more rigor: WCAG 2.1 contrast compliance, perceptually uniform color spaces like OKLCH, Tailwind CSS configuration exports, and responsive dark/light mode testing.
UI Wheel (uiwheel.com) was created to bridge this historical divide. We built a fast, client-side interactive tool suite that enables developers, UI/UX designers, and design system leads to calculate mathematically harmonious color palettes and immediately validate them in realistic software components.
Our Mathematical & Accessibility Architecture
Every pixel and spoke rendered on UI Wheel adheres to strict W3C and CIE optical color standards:
W3C Relative Luminance & Contrast
Calculated by linearizing sRGB values to radiometric light intensity:
Ratio = (L₁ + 0.05) / (L₂ + 0.05)
Instantly evaluated against 4.5:1 (AA) and 7:1 (AAA) thresholds.
Perceptual OKLCH Polar Mapping
Transforming RGB signals through the Oklab color model to decouple perceived Lightness (L) from Chroma (C) and Hue (H):
Prevents the optical brightness shifts inherent to traditional HSL.
Our Guiding Principles
1. Accessibility by Default
A gorgeous color scheme is a failure if people cannot read it. Every harmony on UI Wheel displays real-time WCAG 2.1 AA/AAA contrast ratios against light and dark backgrounds on every drag.
2. Developer-Ready Export
Design handoffs shouldn't require copying 20 individual hex codes manually. We offer 1-click exports for Tailwind CSS v4 (@theme), CSS variables (:root), OKLCH, and JSON design tokens.
3. Zero Telemetry & High Speed
All trigonometry, harmony calculations, and shade ramp interpolations execute locally in your browser. No mandatory user accounts, no paywalls, and zero network latency.
4. Comprehensive Color Library
From viral 12-season color analysis (Soft Autumn, Deep Winter) to modern digital aesthetics (Pastel, Cyberpunk, Lavender), our library links cultural design movements directly to functional UI tokens.
Built with Modern Web Standards
UI Wheel is engineered on an uncompromising modern frontend stack: