Infima Color Palette

About this plugin

Infima Color Palette gives you the exact 7-step Infima/Docusaurus color scale from any base color—then creates matching Figma Paint Styles in one click.

What it does

1. Reproduces Infima’s scale precisely (keeps H & S, scales HSL Lightness multiplicatively).
2. Shows 7 shades (lightest → darkest) with WCAG AA/AAA contrast against a background you choose.
3. Lets you rename the CSS variable base (e.g. --ifm-color-brand-* instead of --ifm-color-primary-*).
4. Exports a ready-to-paste CSS variables block.
5. Creates a fresh style set every time (simple + reliable).

How to use

1. Enter your base hex color and background hex for contrast checks.
2. (Optional) Change the CSS variable base name and style prefix.
3. Click Create Figma Color Styles to add lightest…darkest styles.

Notes

1. Works in Figma design files (styles can’t be created in FigJam).
2. Not affiliated with Meta/Infima or Docusaurus.