Color Shades Generator

Create lighter and darker shades of a HEX color instantly.

Color Shades Generator

Base color (HEX)

Tip: you can paste any 6-digit hex (#RRGGBB).

Hue lock Lock base hue

Saturation bias

Adjust saturation across the ramp (− desaturate · + saturate)

Lightness range

Lightest (tone 50)

Darkest (tone 900)

Higher Lightest = brighter 50; lower Darkest = deeper 900.

Output

JSON palette

{
  "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',
      }
    }
  }
}

#E6F5FEcontrast 18.86:1

100

#DAF0FFcontrast 17.89:1

200

#B6E2FFcontrast 15.31:1

300

#81CDFFcontrast 12.11:1

400

#3FB2FFcontrast 9.02:1

500

#0095F8contrast 6.65:1

600

#006DB6contrast 5.44:1

700

#004D81contrast 8.83:1

800

#01385Dcontrast 12.17:1

900

#02304Fcontrast 13.65:1

Base HSL: 204°, 100%, 50% • Strategy: HSL ramp with hue locked and saturation bias +0