|
|
Skip to shade generator
Tools

Shade Generator

One color.
Every shade.

Design system
Brand color help

Hex, RGB, HSL, or a color name. Use an opaque color.

Palette name help

Used as the Figma variable prefix: brand/…

Your palette

About this palette

A custom OKLCH scale with Tailwind naming. Your brand color is preserved at 500.

Click a shade to copy its hex. Copy the Figma prompt to recreate the displayed palettes with your Figma agent.

Ratios compare each shade with its displayed black or white text. AA for normal text starts at 4.5:1; check the actual pair in your design.

Colors are processed on your device.

Design system source ↗ (opens in a new tab)

brand

#F8F9FF
#EFF2FF
#D9DFFF
#BBC4FE
#8F9AFA
#6366F1
#4E51C2
#3A3C95
#262868
#14153E
#030414
Made with ♥