Stax
Tools

Color Palette Generator

Generate 10 lightness shades and harmonic colours from any hex colour.

HSL(217°, 91%, 60%)

Lightness scale from 10% (darkest) to 90% (lightest). Click any swatch to copy its hex value.

What makes a good colour palette?

A strong colour palette typically has three layers: a base colour that represents your brand or concept, a set of harmonics that create visual variety while staying pleasing to the eye, and a lightness scale that gives you options for backgrounds, borders, text, and accents without introducing new hues.

Colour harmony rules

  • Complementary: High contrast, energetic. Use for call-to-action buttons against a brand colour.
  • Analogous: Low contrast, harmonious. Great for calm, cohesive UI or nature-inspired designs.
  • Triadic: Balanced, vibrant. Works well for playful brands or data visualisation with three categories.
  • Split-complementary: Less tension than complementary, more variety than analogous. A versatile choice for web design.
  • Tetradic: Rich, complex. Best when one colour dominates and the others serve as accents.

Using palettes in code

Copy hex values directly into your CSS custom properties, Tailwind config, or design token files. The shade scale (100–1000) maps directly to Tailwind's naming convention — paste the shades into your tailwind.config.js under theme.colors to get a fully custom colour system that works with all utility classes.

Choosing a brand colour that works at scale

A brand colour must perform across many contexts: large hero backgrounds, small icon fills, white text overlaid on it, and dark backgrounds behind it. Colours in the medium lightness range (HSL 40–60% lightness) tend to be the most versatile — they are vivid enough to read on white backgrounds and dark enough to hold white text at sufficient contrast.

When evaluating a palette, check: does the 500 shade (your base) pass WCAG AA contrast against white? Does the 100 shade (your lightest) work as a subtle background tint? Does the 900 shade work as text colour on white? If all three work, you have a production-ready colour scale. Use the hex codes from this generator in a contrast checker to verify before committing to a brand palette.

Frequently asked questions

What is a colour palette?
A colour palette is a curated set of colours used consistently across a design — brand identity, UI, or illustration. A good palette typically h primary colour, a few harmonics (colours that work well together based on colour theory), and a lightness scale (shades from very dark to very light).
What are colour harmonics?
Colour harmonics are colours related to your base by their position on the colour wheel. Complementary is directly opposite (180°); analogous colours are neighbours (±30°); triadic colours are equally spaced at 120°; split-complementary replaces the direct complement with two adjacent colours at ±150°; tetradic (square) uses four colours at 90° intervals.
How do the shades work?
The shade scale keeps your hue and saturation constant and varies lightness from 10% (very dark) to ~90% (very light) in equal steps — generating 10 swatches labelled 100–1000, similar to Tailwind CSS colour scales.
How do I copy a colour?
Click any swatch to copy its hex code to your clipboard. A 'Copied!' confirmation appears briefly. You can then paste the hex code into Figma, CSS, or any design tool.
What colour model does this tool use internally?
All calculations are done in HSL (Hue, Saturation, Lightness) which makes it easy to rotate hue for harmonics and vary lightness for shades. The display and copy values are standard hex codes.

Related tools