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

Generate consistent color palettes with 10 shade levels from any base color

Base Color (HEX)

Paste any 6-digit hex (#RRGGBB).

Generation Settings

Hue LockLock base hue

Saturation Bias+0

Lightness Range (50 → 900)

→

Output Export

JSON

{
  "50": "#E6F5FE",
  "100": "#DAF0FF",
  "200": "#B6E2FF",
  "300": "#81CDFF",
  "400": "#3FB2FF",
  "500": "#0095F8",
  "600": "#006DB6",
  "700": "#004D81",
  "800": "#01385D",
  "900": "#02304F"
}

Tailwind Config

theme: {
  extend: {
    colors: {
      primary: {
      50: '#E6F5FE',
      100: '#DAF0FF',
      200: '#B6E2FF',
      300: '#81CDFF',
      400: '#3FB2FF',
      500: '#0095F8',
      600: '#006DB6',
      700: '#004D81',
      800: '#01385D',
      900: '#02304F',
      }
    }
  }
}

Base HSL: 204°, 100%, 50%|Strategy: Interpolated Ramp

Generated Palette

Copy

#E6F5FE

Contrast18.86:1

100

Copy

#DAF0FF

Contrast17.89:1

200

Copy

#B6E2FF

Contrast15.31:1

300

Copy

#81CDFF

Contrast12.11:1

400

Copy

#3FB2FF

Contrast9.02:1

500

Copy

#0095F8

Contrast6.65:1

600

Copy

#006DB6

Contrast5.44:1

700

Copy

#004D81

Contrast8.83:1

800

Copy

#01385D

Contrast12.17:1

900

Copy

#02304F

Contrast13.65: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

Enter a HEX code or pick a color with the color picker.
The full tints and shades scale generates instantly.
Click any swatch to copy its HEX, RGB, or HSL value.
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.

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

Color Shades Generator