← All plugins

Palette Generator

One brand color in, a full color system out: OKLCH scales, semantic Light and Dark tokens as Variables, and code.

Try the free web version: Palette Generator →

What it does

Palette Generator turns one brand color into a color system that is ready to ship: perceptually even OKLCH scales named like Tailwind, Material or Radix, a neutral tinted with your brand, and a semantic layer (bg, surface, border, text, accent) with Light and Dark modes that alias the scale and are picked by contrast.

Everything lands in Figma as Variables (updated in place on the next run, so bindings and aliases survive), color styles and a documented board, and goes out as CSS, Tailwind v3 and v4, SCSS or W3C tokens, with OKLCH and Display P3 values.

  1. A whole color system from one color

    OKLCH scales named like Tailwind, Material or Radix, plus a tinted neutral.

  2. Every step on every step

    The contrast grid shows which pairs pass 4.5:1 and 3:1 before you pick them.

  3. Light and Dark, picked by contrast

    Semantic tokens alias the scale, so a brand change flows everywhere.

  4. Ship it as code

    CSS, Tailwind v3 and v4, SCSS or W3C tokens, with OKLCH and Display P3.

  5. Groups that collapse, flagged

    Preview the palette with protan, deutan and tritan vision.

Everything it does

Scales

  • OKLCH: Tailwind 50-950, Material, Radix 1-12 or custom steps
  • Steps solved for the contrast targets you set
  • Hue shift, your exact color kept on its step
  • A neutral tinted with your brand

System

  • Semantic Light and Dark tokens aliased to the scale
  • Alpha ramps as real RGBA
  • Updates Variables in place, with a preview first

Checks and code

  • Step-on-step contrast grid, WCAG and APCA
  • Color-blind preview with warnings
  • CSS, Tailwind v3 and v4, SCSS, W3C tokens, OKLCH and P3

10 free uses, then one license or Lab Pro. See pricing →

More plugins