color shades [oser]

About this plugin

Description

Generate accessible color shade palettes using the OKLCH color space. Pick a base color, get 11 shades (50–950) with optional nuanced text colors, and export them as Figma Variables, Paint Styles, or a visual palette frame — all in one click.

What makes it different

Unlike HSL-based generators, color shades [oser] uses OKLCH — a perceptually uniform color space where equal lightness steps look equal to the human eye. Combined with gamut-aware chroma mapping and adaptive hue shifting, the result: smooth, natural shade ramps without muddy midtones or blown-out highlights — even for tricky hues like yellow and amber.

Features

1. 11 shade levels following the Tailwind convention (50 to 950) with optional nuanced text colors tinted with your palette hue
2. Accessibility built-in — every shade is checked against WCAG 2.1 (AA/AAA) and APCA contrast standards, with auto-adjustment to fix issues while preserving palette order
3. 3 output modes — Figma Variables (with a dedicated collection), Paint Styles, and a visual Shades Frame with auto-layout and variable bindings
4. Multi-format input — enter colors in HEX, RGB, HSL, OKLCH, or CMYK with shorthand support
5. Click-to-copy — click any shade card to copy its value in the active format
6. Snap base color — smoothly centers the palette around your base color with attenuated curve shift

How to use

1. Open the plugin and pick a base color (via color picker, channel inputs, or format of your choice)
2. Toggle advanced options if needed (WCAG, APCA, nuanced text, snap base)
3. Choose your generation options: Variables, Styles, Shades Frame — or all three
4. Hit Generate