LCH WCAG Palette Generator

About this plugin

This plugin generates LCH-based, accessibility-first colour systems directly inside Figma.

Start from one or more HEX inputs, sample a colour using the eyedropper, or explore options with Randomise and harmony presets (complementary, split complementary, triadic, tetradic, square, analogous, plus custom). You can lock any colours you want to keep, add or remove colour cards, and then generate a structured shade system for each base colour.

How the palette is built (LCH workflow)

For each base colour, the plugin:

1.Converts the input colour into the LCH colour space.

2.Builds a shade ladder (base plus steps like 50 to 950, depending on your ladder) using fixed lightness targets, keeping the hue consistent while adjusting values so the final colours remain representable in RGB.

3.Converts each shade back to HEX for output.

The plugin’s generation logic operates in LCH.

OKLCH is not used for generation, it is included as an additional reference value in the canvas output.

Accessibility feedback on every shade

Every shade includes:

•WCAG contrast information (ratio plus AA or AAA where applicable)

•APCA contrast value (with the chosen text colour shown)

This makes it easy to check legibility across the full ladder.

Output options

You can choose what to generate on click:

•Create on canvas: draws a palette layout on the page with colour cards and metadata.

•Create variable collection: creates variables for each shade using the same naming convention.

•Create colour styles (Paint Styles): generates paint styles per shade using the same naming convention and grouping.

Canvas card output (what you see on the page)

Each card on the canvas includes the details shown in your design, for example:

•Colour name (for example apple-base)

•WCAG line (text colour + ratio + AA or AAA marker)

•APCA line (text colour + APCA value)

•HEX

•RGB

•HSL

•HSB

•OKLCH (display only)

•LCH (display and generation space)

Open-source libraries used

Runtime

•culori (colour conversions and formatting, including LCH and OKLCH values for display)

•ntc (Name That Color, human-friendly colour names)

•react, react-dom (UI rendering)

•react-colorful (colour picker UI)

Dev and build tooling

•esbuild (bundling)

•typescript (type checking and compilation)

•@figma/plugin-typings (Figma plugin API typings)

•@types/react, @types/react-dom (TypeScript typings)