Skip to content
littlekit.app

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.

About this tool

Palette generator builds a five-color palette from a base color using a chosen harmony rule. It is a fast starting point for a project palette, and every color can be copied as a CSS variable.

The colors are derived mathematically from the base you supply, so the relationships stay consistent. Generation happens locally and no color service is queried.

How to use it

  1. Pick a base color or paste an existing brand value.
  2. Choose the harmony rule, such as complementary or analogous.
  3. Review the five generated colors and adjust the base if needed.
  4. Copy the palette as CSS variables or individual values.

Worked example

From the base colour #52796f, a muted sage green:

Analogous:      #527955 #527962 #52796f #527679 #526979
Complementary:  #52796f #73a094 #79525c #4e353c #ac858f

Analogous palettes use neighbouring hues, which gives calm, cohesive schemes. Complementary palettes pair the base with its opposite on the colour wheel, a dusty rose here, for accent colours that stand out. Triadic and monochromatic harmonies are also available.

From palette to interface

A generated palette is a starting point. For a working interface, assign roles: one colour for primary actions, a neutral for text and surfaces, one accent, and separate colours for success, warning, and error states. The 60-30-10 rule is a useful balance: a dominant neutral, a secondary colour, and a small amount of accent.

Check every text and background combination with the contrast checker. Harmonious colours often have similar lightness, which looks pleasant but gives poor contrast. The output uses CSS custom properties (--palette-1 and so on), so you can paste it into a stylesheet and rename the variables to match their roles.

Frequently asked questions

Are generated colors accessible?

Harmony rules produce pleasing relationships, not accessible contrast. Check text and background pairs with the Contrast checker.

Can I edit individual colors afterward?

Yes. The palette is a starting point; copy the values and refine them in your design tool.

What does the harmony rule change?

It positions the other colors around the color wheel relative to your base, producing a different relationship between hues.

Is the palette based on colour theory?

Yes. The harmonies rotate the hue in HSL space by fixed angles, as on a traditional colour wheel. Perceptual spaces such as OKLCH would give more even lightness, and the results are best treated as a starting point to fine-tune.