ZeonTools
Why HSL is Dead (The OKLCH Advantage)
For over a decade, frontend developers used hsl() (Hue, Saturation, Lightness) to generate color palettes. However, HSL is mathematically flawed regarding human perception. In HSL, a "yellow" at 50% lightness looks vastly brighter to the human eye than a "blue" at 50% lightness. If you change the Hue, the perceived brightness shifts wildly.
OKLCH fixes this entirely.
In OKLCH, the L (Lightness) channel represents true perceived human brightness. If you lock L to 60%, you can rotate the H (Hue) across the entire 360-degree color wheel, and every single color will appear to have the exact same luminous intensity. This allows designers to programmatically generate ultra-uniform 100-900 UI palettes (like our [Tailwind Config] generator does) without manually tweaking every single shade by eye.
WCAG 2 vs APCA (WCAG 3.0)
Standard WCAG 2 contrast ratios (e.g., 4.5:1) are fundamentally broken on modern displays, especially in dark mode. They often fail readable text and pass unreadable text. The accessibility industry is moving to APCA (Accessible Perceptual Contrast Algorithm) for WCAG 3.0.
APCA calculates a Lightness Contrast (Lc) score instead of a ratio. An Lc score of ~75 is roughly equivalent to a WCAG 2 AA rating, while an Lc score of ~90 is equivalent to AAA. Our engine calculates both WCAG 2 ratios and APCA Lc scores in real-time, allowing you to future-proof your UI components.
Designing for Color Blindness (CVD)
Color Vision Deficiency (CVD) affects roughly 8% of men globally. A perfectly uniform OKLCH palette is useless if it relies entirely on Hue to distinguish UI elements (like a red "Error" button and a green "Success" button).
By using our [CVD Sim] tab, you can instantly see how your color translates to users with Protanopia (red-blind) or Deuteranopia (green-blind). To ensure accessibility, never rely on Hue alone; always ensure sufficient Lightness (L) variation between critical UI elements.
What is Display P3 and High Gamut?
Legacy formats like HEX and RGB are locked into the sRGB color space, which was defined in 1996 for old CRT monitors. Modern Apple displays, OLED TVs, and flagship phones use the Display P3 color space, which contains roughly 25% more vibrant colors—especially deep reds, ultra-bright greens, and vivid oranges.
If you use HEX or standard RGB, you are literally cutting off the top 25% of vibrant colors that your users' screens can actually display. oklch() is an unbounded color space. By simply pushing the Chroma (C) value higher in our generator, you can access these hyper-vibrant P3 colors natively in CSS. Our engine features a "Gamut Badge" to alert you when your color exceeds standard sRGB capabilities.
OKLCH vs OKLAB
You may see oklab() mentioned alongside oklch(). They represent the exact same color space, just mapped differently.
- OKLAB uses Cartesian coordinates (a, b axes) for color. It's excellent for programmatic color mixing and CSS gradients.
- OKLCH uses Cylindrical coordinates (Chroma, Hue angle). It is far more intuitive for human designers to understand (e.g., "increase the saturation" = "increase C").