What is OKLCH and why does WISEROWS use it?

OKLCH stands for Oklab Lightness Chroma Hue — a perceptually uniform color space. Unlike HSL or RGB, OKLCH ensures that colors with the same lightness value actually look equally bright to the human eye. WISEROWS uses OKLCH so that a red status badge and a blue status badge have the same visual weight, making the interface scannable and consistent.

What does "perceptually uniform" mean?

In HSL, a yellow at 50% lightness looks much brighter than a blue at 50% lightness. That's because HSL lightness is mathematically uniform but not perceptually uniform. OKLCH solves this — equal L values produce colors that your eye perceives as equally bright. This matters for status badges, chart colors, and any UI where multiple colors appear side by side.

How do colors adapt between light and dark mode?

Each color is defined with an OKLCH lightness value for light mode and a separate value for dark mode. Chroma and hue stay the same, only lightness shifts. This ensures colors feel consistent across modes — a green badge in light mode and dark mode reads the same. No colors appear washed out or overly saturated in either mode.

How does WISEROWS ensure color contrast meets WCAG standards?

Every foreground/background color pair is tested against WCAG 2.1 AA contrast ratio requirements (4.5:1 for normal text, 3:1 for large text). The OKLCH system makes this easier because lightness is predictable — we can guarantee minimum contrast by controlling the lightness difference between foreground and background colors.

Can I customize the color palette?

The semantic color palette (primary, success, warning, error, info) is defined as CSS custom properties using OKLCH values. Theming is planned for a future release, where you will be able to override these values while maintaining perceptual uniformity. The system ensures any custom palette still meets contrast requirements.

How are chart colors chosen?

Chart colors use evenly spaced hue values in OKLCH with matched lightness and chroma. This means every data series in a chart has equal visual prominence — no single color dominates. The palette is designed to be distinguishable by colorblind users as well, using sufficient lightness variation between adjacent colors.

What about colorblind users?

WISEROWS uses color as enhancement, never as the sole indicator. Status badges include text labels. Chart data points use distinct shapes in addition to colors. The OKLCH palette is tested with protanopia, deuteranopia, and tritanopia simulations to ensure sufficient differentiation. Critical information always has a non-color indicator.

How does OKLCH compare to HSL?

HSL maps to how screens display color (hardware model), while OKLCH maps to how humans perceive color (perceptual model). In HSL, equal saturation values produce wildly different perceived vibrancy depending on hue. In OKLCH, equal chroma values produce consistent vibrancy. For UI design, OKLCH produces more professional, harmonious results.

Do all browsers support OKLCH?

OKLCH is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+). For older browsers, WISEROWS provides sRGB fallback values via CSS custom property fallbacks. The visual difference is minimal — users on older browsers get hex/RGB equivalents that are as close as possible to the OKLCH values.

Perceptual Colors

Colors that feel equal

Mathematically calibrated in OKLCH color space. Every hue at the same lightness and chroma looks equally vibrant. Status badges, charts, and highlights maintain consistent visual weight.

OKLCH Palette — Equal Lightness (L: 0.65), Equal Chroma (C: 0.17)

Red

H:25

Orange

H:55

Amber

H:85

Green

H:155

Sky

H:225

Blue

H:255

Violet

H:295

Rose

H:350

HSL (uneven perceived brightness)

Yellow looks brighter than blue at same S/L

OKLCH (uniform perceived brightness)

All hues feel equally vibrant

Perceptual uniformity

In HSL, yellow at 50% lightness screams while blue at 50% whispers. Your eye doesn't agree with the math. OKLCH fixes this. Equal L values produce colors your eye perceives as equally bright. Equal C values produce equal vibrancy. The math matches your perception.

L (lightness) maps to perceived brightness, not mathematical brightness
C (chroma) maps to perceived saturation, consistent across hues
H (hue) is perceptually uniform — 10 degrees of hue shift looks the same everywhere
Status badges have identical visual weight regardless of color

Status Badges — Equal Visual Weight

Published

Draft

Review

Archived

Scheduled

Every badge draws equal attention — no color dominates

Charts that don't lie

When chart colors have uneven brightness, your eye is drawn to the brightest series — even if it's not the most important. OKLCH chart palettes give every data series equal visual prominence. You read the data, not the color brightness.

Evenly spaced hues with matched lightness and chroma
No single data series visually dominates
Colorblind-safe with sufficient lightness variation
Dark mode palette maintains same relative relationships

Dashboard Chart — OKLCH Palette

Organic

Direct

Social

Referral

Dark mode, done right

Most dark modes just invert colors — and everything looks wrong. WISEROWS shifts only the lightness channel in OKLCH. Chroma and hue stay the same. Colors feel identical across modes. Nothing washed out. Nothing oversaturated.

Only L (lightness) changes between modes
C (chroma) and H (hue) remain constant
System preference detection + manual toggle
CSS custom properties for instant theme switching
No flash of wrong theme on page load

Light

Success

Warning

Error

Info

L: 0.55

Dark

Success

Warning

Error

Info

L: 0.72

OKLCH

Color space

4.5:1

Min contrast ratio

Palette colors

Theme modes

How it feels

Every color pulls its weight.

Scan a table with five different status badges. None jumps out more than the others. Glance at a chart with eight data series. None dominates. Toggle dark mode. The colors shift but their relationships stay perfect. This is what "designed" means — not just picked, calculated.

Frequently asked questions

Your data is incomplete. Fix it.

Define your schema. Import your data. Let AI enrich every record. See quality scores improve in real time. Free to start, no credit card.