Shade Color
Generate Random Shade ColorPalette is always built in HSL (locked H & S). Format only changes how values are shown — use HEX when exporting CSS variables.
Generated Shade Palette
Showing HSL (recommended) · tap any stop to copy
:root {
--blue-50: #F1F0F9;
--blue-100: #DDDAF1;
--blue-200: #BBB6E2;
--blue-300: #9991D4;
--blue-400: #776CC6;
--blue-500: #5447B8;
--blue-600: #473C9A;
--blue-700: #39317D;
--blue-800: #2C255F;
--blue-900: #1E1A42;
--blue-950: #110E25;
}
// Paste into theme.extend.colors in tailwind.config.js
blue: {
'50': '#F1F0F9',
'100': '#DDDAF1',
'200': '#BBB6E2',
'300': '#9991D4',
'400': '#776CC6',
'500': '#5447B8',
'600': '#473C9A',
'700': '#39317D',
'800': '#2C255F',
'900': '#1E1A42',
'950': '#110E25',
},
Popular Shade Collections
Browse named shade galleries, or stay here to generate a custom 50–950 palette from any base color.
FAQ
What is Shade Color?
Shade Color builds a design-token palette from one base color in HSL: hue (H) and saturation (S) stay locked, and only lightness (L) changes across the standard stops 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (same convention as Tailwind / MUI / Figma tokens).
This avoids hue drift on pale stops and keeps saturation stable, so the scale is clean enough for CSS variables and design systems.
How does Shade Color work?
From a single base color it creates an 11-stop token scale. Hue and saturation stay fixed in HSL; only lightness steps from pale (50) to deep (950). Display Format (HEX / RGB / HSL / HSV) only changes how values are shown — the palette itself stays the same.
How do I use Shade Color?
- Pick a base color: Tap Pick color on the main swatch to open the picker, or use Generate Random Shade Color.
-
Review the 50–950 scale: Each stop is ready to map to CSS variables like
--color-500. - Copy values: Click any stop or value to copy. Prefer HEX when exporting. Below the palette, switch between CSS variables and Tailwind then copy the active snippet into your project. Check base-color contrast (on white / on black) before using it for body text.
- Browse named galleries: Use Popular Shade Collections above for curated shade directories.
What does Display Format change?
Display Format only changes how each swatch’s value is shown (HSL / HEX / RGB / HSV). The palette is always generated with locked H and S in HSL. Use HSL while designing; copy HEX for production CSS.
Pro tip: Pick one strong base color, generate the ladder, then assign 50–200 to backgrounds, 500–600 to accents, and 800–950 to text.