Stax

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.

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 has a 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