Oklch Color Picker | Totally Free by yagnesh
Advanced studio for uniform OKLCH/OKHSL palettes with gamut guards & dev exporters.
Plugin Preview
About this plugin
The definitive OKLCH studio built for modern design systems, wide-gamut screens, and professional engineer handoff.Traditional HSL and RGB color pickers distort lightness, leading to uneven palettes. OKLCH solves this with perceptually uniform lightness—but its irregular gamut shape makes traditional picking confusing and prone to out-of-gamut color clipping.Oklch Engine fixes this by offering the industry's first dual-mode workstation:🚀 KEY FEATURES:1. DUAL PICKING SYSTEMS• OKHSL Mode (Stable): Maps the irregular OKLCH gamut into a stable 100% saturation rectangle. Every coordinate is guaranteed to be in-gamut. Zero color clipping, zero cursor jumping—behaves exactly like traditional HSL, but with uniform OKLAB lightness.• OKLCH Mode (Gamut): Displays the raw, irregular Display P3 and sRGB boundary curves. Perfect for absolute chroma control.2. GAMUT GUARDS & ADVICE• Dynamic Seekbars: Slider tracks automatically shade out (turn dark) for invalid/out-of-gamut values.• Live Gamut Advice: Real-time helper tooltips suggest how to adjust Lightness or Hue to reach highly saturated colors.3. ACCESSIBILITY & CONTRAST STUDIO• Double Contrast Checker: Live WCAG 2.1 ratios and APCA Lc values calculated on selected layers.• Color Vision Simulator: Live preview card simulating Deuteranopia, Protanopia, Tritanopia, and Achromatopsia (Grayscale).4. PALETTE STUDIO & CODE EXPORTERS• Uniform Scales: Generates 11-step uniform color scales and advanced harmony systems (Triadic, Complementary, Tetradic).• Dev Export Engine: Copy production-ready code blocks directly to clipboard for Tailwind CSS config, CSS variables, SwiftUI, and Android Compose.• Variables Export: Save your generated scales directly into Figma Native Variables or document swatches with one click.5. DESIGNER WORKFLOW UTILITIES• Pinned Swatches: Saved history swatches that persist locally on your system between plugin sessions.• Quick Tweaker Buttons: Micro-adjust hue warmth, chroma saturation, and lightness by precise steps in one click.• Smooth scroll-wheel interaction: Hover and scroll over seekbars for micro-control.
Plugin Details
| Version | 2 |
|---|---|
| Created | June 30, 2026 |
| Last Updated | July 1, 2026 |
| Category | Accessibility tools |
| Creator | Yagnesh Prajapati |
| Stats | 0 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.