Color Generator Shades & Tints (Ai Optimization)

Your brand color deserves a better algorithm than HSL.HSL lies to your eyes. Equal numeric steps in HSL don't look equal some stops feel muddy, some washed-out, and your darkest shades often drift into a completely different hue. That's not a calibration issue. It's a math problem. And Pranata solves it at the root.

Pranata's Color Generator now runs on OKLCH the perceptually uniform color space from CSS Color Level 4, the same standard now baked into Tailwind CSS v4. In OKLCH, a 10% shift in Lightness looks like exactly 10% to the human eye, across every hue, every stop. No drift. No mud. Just clean, honest color that scales.

Drop in any HEX. Get back a full 11-step ramp (50–950), anchored at 500, ready as Figma Variables or Color Styles in one click.

Core technical featuresOKLCH perceptual engine, manipulates L (lightness), C (chroma), H (hue) independently in perceptual space zero unexpected hue drift across the scale.

Advanced settings, control chroma curve, lightness endpoints, hue rotation, and base anchor position full control over every stop.

Live preview, see the exact ramp output before anything touches your canvas. What you see is what gets generated.

Variables ready output, Slash-named swatches (e.g., brand/500) drop directly into Figma Color Variables and Styles.

Build it. Maintain it. Style it.

Your entire design system foundation, automated.

Most designers treat color and typography as separate problems. Pranata treats them as one connected system. Each plugin in this ecosystem does one job exceptionally well and together, they cover the full lifecycle of your design system foundation, from the first hex code to the final handoff.

Color Management Shades & TintsTypography Style GeneratorBy : PRANATA.ID