Copy icon
Table Form Top navigation Side navigation Context menus Checkbox list Radio button list Toggle switch button Button Text field Date field Combobox Dropdown TreeView Charts
Squircle Color Shade Generator

Color Shade Generator

Pick one base color and get a full 50–950 shade scale out of it. The hue (and saturation) stay exactly what you picked - only lightness changes across the scale - so every shade reads as "the same color", just lighter or darker. Click any swatch to copy its hex code.
How it looks in a real app
New project
1,204
Total users
$12.4k
Revenue
89
Active now
Weekly activity
Traffic sources
Direct 55% Referral 25% Other 20%
Goal progress
68%
3:1 (large text / UI) 4.5:1 (AA, normal text)

How the 50-950 scale is generated

The tool converts your hex color to HSL (Hue, Saturation, Lightness), then holds the hue and saturation fixed and swaps in a different lightness value for each step from 50 up to 950, 50 apart - lower numbers are lighter, higher numbers are darker. Because only lightness changes, every shade in the scale is recognizably the same color, just lighter or darker - useful for building a consistent design system, chart series, or UI theme from one brand color. The red arrow marks the swatch closest to the color you picked.