color shades [oser]

DescriptionGenerate 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 differentUnlike 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.

Features11 shade levels following the Tailwind convention (50 to 950) with optional nuanced text colors tinted with your palette hueAccessibility 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 order3 output modes — Figma Variables (with a dedicated collection), Paint Styles, and a visual Shades Frame with auto-layout and variable bindingsMulti-format input — enter colors in HEX, RGB, HSL, OKLCH, or CMYK with shorthand supportClick-to-copy — click any shade card to copy its value in the active formatSnap base color — smoothly centers the palette around your base color with attenuated curve shiftHow to useOpen the plugin and pick a base color (via color picker, channel inputs, or format of your choice)Toggle advanced options if needed (WCAG, APCA, nuanced text, snap base)Choose your generation options: Variables, Styles, Shades Frame — or all threeHit Generate