Color Shades Generator

Generate a full range of tints and shades from any HEX color. Tailwind-compatible 50-950 scale, copy HEX/RGB/HSL values instantly. Free online color palette tool.

Color Shades Generator

Tailwind style 50 to 950 scale of tints and shades from any base color

Paste any 6-digit hex (#RRGGBB).

Hue
Click a swatch to copy as
Saturation Bias+0
→
CSS Custom Properties
:root {
  --color-primary-50: #E6F5FE;
  --color-primary-100: #DBF1FF;
  --color-primary-200: #BDE5FF;
  --color-primary-300: #8ED2FF;
  --color-primary-400: #53BAFF;
  --color-primary-500: #12A0FF;
  --color-primary-600: #007CCF;
  --color-primary-700: #005994;
  --color-primary-800: #003D66;
  --color-primary-900: #012B47;
  --color-primary-950: #02243B;
}
JSON
{
  "50": "#E6F5FE",
  "100": "#DBF1FF",
  "200": "#BDE5FF",
  "300": "#8ED2FF",
  "400": "#53BAFF",
  "500": "#12A0FF",
  "600": "#007CCF",
  "700": "#005994",
  "800": "#003D66",
  "900": "#012B47",
  "950": "#02243B"
}
Tailwind Config
theme: {
  extend: {
    colors: {
      primary: {
      50: '#E6F5FE',
      100: '#DBF1FF',
      200: '#BDE5FF',
      300: '#8ED2FF',
      400: '#53BAFF',
      500: '#12A0FF',
      600: '#007CCF',
      700: '#005994',
      800: '#003D66',
      900: '#012B47',
      950: '#02243B',
      }
    }
  }
}
Base HSL: 204°, 100%, 50%Strategy: Interpolated Ramp

Generated Palette

50
Copy
#E6F5FE
Lightness95%
Contrast18.86:1
100
Copy
#DBF1FF
Lightness93%
Contrast18.04:1
200
Copy
#BDE5FF
Lightness87%
Contrast15.82:1
300
Copy
#8ED2FF
Lightness78%
Contrast12.81:1
400
Copy
#53BAFF
Lightness66%
Contrast9.84:1
500
Copy
#12A0FF
Lightness54%
Contrast7.50:1
600
Copy
#007CCF
Lightness41%
Contrast4.78:1
700
Copy
#005994
Lightness29%
Contrast7.35:1
800
Copy
#003D66
Lightness20%
Contrast11.29:1
900
Copy
#012B47
Lightness14%
Contrast14.61:1
950
Copy
#02243B
Lightness12%
Contrast15.93:1

Color Shades and Tints Generator

A color shades generator takes a single base color and produces a mathematically balanced range of lighter tints and darker shades. A well-structured color scale is the foundation of design systems, UI component libraries, and brand palettes, replacing guesswork with consistent, predictable results.

This tool generates a Tailwind CSS-compatible 50-950 scale from any HEX color, ready to drop into your config file or CSS custom properties.

Tints vs shades: what is the difference?

  • Tints: A color mixed with white, producing progressively lighter variants. Used for backgrounds, hover states, and subtle UI surfaces.
  • Shades: A color mixed with black, producing progressively darker variants. Used for text, borders, and pressed/active states.
  • Tailwind scale: The 50-950 naming convention (50 = lightest, 950 = darkest) matches Tailwind CSS color palettes exactly, making it easy to add custom colors to your config.

How to generate color shades

  1. Enter a HEX code or pick a color with the color picker.
  2. The full tints and shades scale generates instantly.
  3. Click any swatch to copy its HEX, RGB, or HSL value.
  4. Export the full scale as CSS custom properties for use in any project.

Using color shades in Tailwind CSS

Copy the generated scale and paste it into your tailwind.config.js under theme.extend.colors:

  • Each step (50, 100, 200, ... 950) maps directly to a Tailwind utility class like bg-brand-500 or text-brand-700.
  • Use the 500 step as your primary brand color, 100-300 for backgrounds, and 700-900 for text.

Common use cases

  • Design tokens: Generate the full color ramp for a brand color and export it as CSS variables.
  • Hover and focus states: Use one shade darker (e.g., 600 instead of 500) for hover states and two shades darker for active/pressed states.
  • Accessible contrast: Pick lighter tints for backgrounds and darker shades for text to meet WCAG contrast ratios.
  • Material Design: Adapt generated scales to the Material Design 100-900 system by mapping steps accordingly.

Frequently Asked Questions

What is the difference between a tint and a shade?

A tint is the base color mixed with white, so lighter, and a shade is the base mixed with black, so darker. Here both come from the same hue and saturation with the lightness spread from the 50 step (lightest) to the 950 step (darkest), which keeps the ramp consistent instead of muddy.

How do I add the scale to Tailwind CSS?

Copy the Tailwind export and paste it under theme.extend.colors in tailwind.config.js. The keys 50 to 950 match the built in palettes, so bg-primary-100, border-primary-300 and text-primary-700 work immediately. Rename primary to your brand name if you have several colors.

Which step should be my main brand color?

Usually 500 or 600. Generate the scale from your brand HEX and check where it lands: if the base is light it will sit near 300 or 400, if it is dark near 700. Use 50 to 200 for backgrounds, 600 to 700 for hover and active states and 800 to 950 for text on light surfaces.

What does the hue lock do?

With the lock on every step keeps exactly the hue of the base color. With the lock off the light tints drift a few degrees warmer and the dark shades a few degrees cooler, a trick designers use so a ramp looks natural rather than washed out. Compare the two and keep the one that fits your palette.

Can I copy RGB or HSL instead of HEX?

Yes. Pick the format above the swatches and every click copies that notation; the labels under the swatches switch too. The JSON, Tailwind and CSS exports always use HEX.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project