Skip to content
littlekit.app
All tools

Palette generator

Build harmonious five-color palettes from a base color and copy them as CSS variables.

Color 1#527955
Color 2#527962
Color 3#52796f
Color 4#527679
Color 5#526979
HEX, RGB or HSL · alpha supported

Start with a hue, then find a relationship. Check contrast before using these colors for text.

Generated CSS
:root {
  --palette-1: #527955;
  --palette-2: #527962;
  --palette-3: #52796f;
  --palette-4: #527679;
  --palette-5: #526979;
}
Processed on your device

How it works & useful details

How to use this tool

Choose a base color and harmony. Click any palette tile to copy its HEX value, or export the complete CSS palette.

Supported values and limitations

Deterministic HSL harmonies, not a color-science guarantee of visual uniformity or accessibility. Alpha is preserved in the HEX output. Check important foreground/background pairs with Contrast checker.