Back to Plugins
OKLCH Palette Generator - Live Contrast, Variables & Brand Systems

OKLCH Palette Generator - Live Contrast, Variables & Brand Systems

Stop muddy shades and manual contrast checks. 1-click perceptually perfect OKLCH palettes with live

Plugin Preview

OKLCH Palette Generator - Live Contrast, Variables & Brand Systems preview

About this plugin

Tired of shades that turn blue into purple and having to check contrast in a separate tool?This plugin gives you production-ready OKLCH palettes in one click - perceptually uniform, with live WCAG/APCA badges and real tinted text previews (not fake black/white).Why OKLCH?Same lightness feels identical across hues. No more dirty greens or muddy yellows. That’s why Tailwind CSS v4, shadcn and Radix already switched.Key FeaturesLive Contrast Badges - AAA/AA/Fail right on every swatch (WCAG + APCA toggle)Tinted Text Previews - see how text will actually look on your paletteSingle + Brand Palette - 11-step scale or full 8-role semantic system (Primary, Secondary, Neutral, Success…) from ONE base colorFigma Variables & Paint Styles - Light + Dark modes in one collection (works even on Starter plan)Custom Editor - resizable dark UI with gradient sliders, image-to-color extraction and smart gamut mappingHow to useSelect any object(s) with solid fillRun "Generate Palette" or open Custom EditorToggle Variables / Dark Mode / BrandEdit any palette later by selecting the framePerfect for design systems, Tailwind/shadcn projects and accessibility-first teams.100% free forever (no catch) • Made with ❤️ by Mateusz Kruhlik

Plugin Details

Version7
CreatedMarch 16, 2026
Last UpdatedMay 20, 2026
CategoryAccessibility tools
CreatorMateusz Kruhlik
Stats7 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com