Color Shades Generator

Generate 10 Tailwind-style color shades (50–900) from any base color. Displays HEX, HSL, and RGB values for each shade. Click to copy individual colors or copy all as CSS variables. 100% browser-based.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
Click any shade to copy its HEX value

Related Tools

Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. Color Palette Generator Generate complementary, analogous, triadic, and tetradic color palettes from any base color. Enter HEX or pick a color to instantly see 4 harmonious palettes. Click to copy individual colors or copy all HEX values per palette. 100% browser-based. CSS Gradient Generator Generate CSS gradients visually. Linear, radial, and conic types. Adjust angle, position, and up to 6 color stops with live preview and instant copy. Free online gradient generator. UUID Generator Generate v4 UUIDs instantly — single or batch. Regex Tester Test regular expressions in real time with match highlighting and capture group details. Timestamp Converter Convert Unix timestamps to human-readable dates and vice versa. Auto-detects seconds vs milliseconds.

How to Use

  1. Use the color picker or type a HEX value (e.g. #3b82f6) to set your base color.
  2. The palette updates instantly, showing 10 shades from lightest (50) to darkest (900).
  3. Each shade card shows the HEX, HSL, and RGB values.
  4. Click any shade card to copy its HEX value to your clipboard.
  5. Click Copy All as CSS Variables to copy all shades as a :root CSS block.

Output Format (Copy All)

:root {
  --color-50: #EFF6FF;
  --color-100: #DBEAFE;
  --color-200: #BFDBFE;
  --color-300: #93C5FD;
  --color-400: #60A5FA;
  --color-500: #3B82F6;
  --color-600: #2563EB;
  --color-700: #1D4ED8;
  --color-800: #1E40AF;
  --color-900: #1E3A8A;
}

Using Shades in Design Systems

A 10-step shade scale is ideal for:

  • Primary / accent colors: use 500 as the main brand color, lighter shades for backgrounds and hover states, darker shades for text and borders
  • State feedback: use 50–100 for tinted alert backgrounds, 700–900 for text on those backgrounds
  • Dark mode: swap scale direction — use 900 as the background and 50 as text
  • Component variants: a button’s default, hover, and active states can be 500, 600, and 700 respectively

HSL Color Model Explained

  • Hue (H): the color angle on the color wheel, 0–360°. Red is 0°, green is 120°, blue is 240°.
  • Saturation (S): the intensity of the color. 0% is grey, 100% is fully vivid.
  • Lightness (L): 0% is black, 50% is the “pure” color, 100% is white.

Related Tools

FAQ

How are the shades calculated?

The tool converts your base color to HSL (Hue, Saturation, Lightness), keeps the hue and saturation constant, then interpolates lightness across 10 levels — from approximately 96% (lightest, scale 50) down to 10% (darkest, scale 900). This produces a natural-looking palette similar to Tailwind CSS color scales.

What is Tailwind-style shade naming?

Tailwind CSS uses a numeric scale from 50 to 900 to represent color lightness. 50 is the lightest tint (near white), and 900 is the darkest shade (near black). The 500 level is closest to the pure input color. This naming convention has become a standard pattern in design systems.

What color formats are displayed?

Each shade shows three formats: HEX (e.g. #3b82f6), HSL (e.g. hsl(217, 91%, 60%)), and RGB (e.g. rgb(59, 130, 246)). Click any shade card to copy its HEX value.

How do I copy all shades at once?

Click the 'Copy All as CSS Variables' button to copy all 10 shades formatted as a :root block with --color-50 through --color-900 CSS custom property names.

Is the tool fully client-side?

Yes. All color math runs in your browser. No data is sent to any server.