Color Shades Generator

Create lighter and darker shades of a HEX color instantly.

🌗 Color Shades Generator

Paste any 6-digit hex (#RRGGBB).

Hue Lock
Saturation Bias+0
→
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

50
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

🔧Related Color Tools

Color Converter & Analyzer
Professional color converter with HEX, RGB, HSL, CMYK support. Features WCAG accessibility checker, color blindness simulator, harmony generator, and eyedropper tool.
Color Palette Generator
Generate harmonious color palettes with Material Design, accessibility checker, and undo/redo. Create monochrome, analogous, complementary, triadic palettes. Export to CSS, SCSS, JSON, Tailwind.
Image Color Picker
Pick colors from images with k-means palette extraction. Get HEX/RGB/HSL, extract dominant colors, and export to CSS/JSON/Tailwind—all client-side with magnifier.