# Color Palette Generator

URL: https://phishdestroy.io/developer-tools/color-palette-generator
Category: Misc
Where it runs: Runs locally (nothing you enter is uploaded)

Start from one base color and get 11 shades with the same hue and saturation, as a swatch strip and as CSS variables.

## Example input

Blue base color

```
#3b82f6
```

11 blues with hue 217° and saturation 91%, from --color-100: #010a18 (5% lightness) to --color-1100: #e7f0fe (95%).

## FAQ

### How are the shades made?

The base color is converted to HSL; its hue and saturation are kept and the lightness is set to 5, 10, 20, 30, 40, 50, 60, 70, 80, 90 and 95%. The base color itself is usually not one of the 11 shades.

### Which input works, and how are the variables named?

Only a 6-digit hex value, with or without #; 3-digit hex, rgb() or color names produce invalid #NaN values. Variables run from --color-100 (darkest) to --color-1100 (lightest), the reverse of scales like Tailwind's, so rename them if needed.

### Is anything uploaded?

No. The palette is calculated in your browser.

## Related tools

- [Color Converter](https://phishdestroy.io/developer-tools/color-converter)
- [Color Contrast Checker](https://phishdestroy.io/developer-tools/color-contrast-checker)
- [CSS Gradient Builder](https://phishdestroy.io/developer-tools/css-gradient-builder)
- [CSS Box-Shadow Builder](https://phishdestroy.io/developer-tools/box-shadow-builder)
- [SVG Placeholder Generator](https://phishdestroy.io/developer-tools/svg-placeholder-generator)

All tools: https://phishdestroy.io/developer-tools