Color Shades Generator

Generate a complete color scale from any base color.
Create Tailwind-style 50-950 shades instantly.

Click any shade to copy its hex value

Base Color (becomes shade 500)

Preset Colors

Tint Amount (lightness of 50)50%

Less lightMore light

Shade Amount (darkness of 950)50%

Less darkMore dark

Desaturation (dark shades)30%

Keep saturatedDesaturate

Export Format

--primary-50: #f3f7fe;
--primary-100: #d9e7fd;
--primary-200: #a6c6fb;
--primary-300: #72a5f9;
--primary-400: #3f84f6;
--primary-500: #0b64f4;
--primary-600: #0c4fbd;
--primary-700: #0b3b88;
--primary-800: #082655;
--primary-900: #041024;
--primary-950: #01050b;

Extract any color palette from the web

See a color palette you love? Frontend Hero's Color Palette Explorer extracts all colors from any website in one click. Works on any website.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →