Prism - OKLcH Colour Palette Generator

About this plugin

Why Prism Gets Color Right

Most color tools treat RGB mathematically, creating equal numeric steps that look jagged and uneven to your eye. Prism uses OKLCH, a perceptually-uniform color space that mirrors human vision. It divides the sRGB display range into steps based on how we actually perceive lightness and saturation, creating ramps that feel naturally balanced from lightest to darkest tones.

This means colors that work universally. Display P3 vibrant where supported, sRGB-safe everywhere else. No muddy mid-tones or blown-out highlights. Every step appears equally distant because it's calculated for human perception, not monitor math.

Smart Generation

Prism intelligently generates each tone by analyzing your base color and mapping it to perceptual lightness values. It auto-adjusts chroma so mid-tones stay vibrant while extremes remain subtle. You can create brand-tinted neutrals with 0-100% primary color influence, and choose between 8, 10, 12, 14, or 16 steps per palette to match your design system.

Built-In Accessibility

Real-time WCAG 2.2 and APCA validation checks every color pair as you work. When contrast fails, Prism suggests the nearest compliant alternatives. No retrofitting, no accessibility debt discovered during QA.

Professional Export

Export to Figma Variables, CSS Variables, Tailwind config, React theme objects, W3C Design Tokens (JSON), and visual moodboards. One palette, six formats, works everywhere.

Advanced Control

Fine-tune with custom lightness and chroma curves, optional hue drift for natural color evolution, and three gamut mapping methods. Colors are organized semantically (Primary/Secondary/Tertiary plus Success/Warning/Error/Info) with automatic light and dark mode generation.

Perfect for design system architects, product teams, and frontend developers building scalable, accessible color systems.