Real-time perceptual uniformity, WCAG AAA contrast, and gamut integrity across Light & Dark modes.
Standard Tailwind HSL vs. OKLCH Perceptual Engine
In standard sRGB/HSL palettes like Tailwind, step 500 has wildly uneven perceived brightness across hues. Our OKLCH engine locks exact luminance parity across all 6 tones.
⚠️ Notice how Yellow-500 is blindingly light ($L = 0.82$) while Blue-500 is dark ($L = 0.45$). Putting white text on both yields broken accessibility.
✨ Both hues share calibrated perceived luminance ($L = 0.58$), and text automatically inverts with APCA hue-aware thresholds for guaranteed AAA readability.
Modeled after the Radix Colors 12-step hierarchy. Click any swatch to open the precision inspector with WCAG/APCA ratings and code exports.
All 4 cards react to live OKLCH tokens emitted by the generator. Observe contrast hierarchy across surfaces, buttons, text, and data badges.
Seamlessly switch between React TypeScript hook integration and zero-install CSS / Tailwind / W3C Tokens.
import { useOklchPalette } from '@karan-ui/colors/react';
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const { tokens, cssVariables, mode, setMode } = useOklchPalette({
mode: 'dark',
tones: {
neutral: { l: 0.22, c: 0.015, h: 264 },
primary: { l: 0.55, c: 0.24, h: 264 },
success: { l: 0.68, c: 0.170, h: 155 },
info: { l: 0.66, c: 0.160, h: 294 },
warning: { l: 0.76, c: 0.170, h: 85 },
danger: { l: 0.62, c: 0.210, h: 25 },
},
tint: 20,
chroma: 80,
});
return (
<div style={cssVariables} className={mode}>
{children}
</div>
);
}