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.
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.
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.