How to create a color palette
Good palettes rarely come from picking five hex codes by eye. They usually start from one base colour, follow a simple harmony rule, and are then checked in a real layout. Here is a workflow that works for websites, apps, slides and brand work.
1. Start from one base hue
If you already have a brand or logo colour, use it as the base. If not, choose a colour that fits the mood: blues and greens tend to feel calm and trustworthy, oranges and reds energetic, purples creative. In HueSnap, drag the base hue slider to anchor the palette.
2. Pick a harmony rule
- Monochrome: one hue at different lightness levels. Safe and tidy; ideal for interfaces and dashboards.
- Analogous: neighbouring hues on the colour wheel, such as blue, blue-green and teal. Harmonious and low-contrast; good for backgrounds and illustrations.
- Complementary: opposite hues, such as blue and orange. High contrast; use one as the main colour and the other sparingly as an accent.
- Triadic: three hues evenly spaced around the wheel. Lively; works best when one colour dominates and the others support it.
- Random: useful for exploration. Lock the colours you like and keep rolling the rest.
3. Lock what works and regenerate the rest
Click the lock on any swatch you want to keep, then press Regenerate unlocked. Repeat until the open slots fit. Click a swatch to copy its hex code into Figma, CSS, or your notes.
4. Make room for neutrals
Most real layouts are mostly white, off-white, grey, or near-black, with colour used for emphasis. A practical five-colour set often looks like this: one very light background, one dark text colour, one primary colour, one secondary colour, and one accent. A slightly tinted neutral (a grey with a hint of your base hue) usually looks more polished than pure grey.
5. Balance with the 60-30-10 rule
A long-standing interior-design guideline that also works on screens: about 60% of the area in a dominant colour (often a neutral background), 30% in a secondary colour (cards, sidebars, sections), and 10% in an accent (buttons, links, highlights). It is a starting point rather than a law, but it stops a palette from feeling noisy.
6. Check contrast before you commit
Colours that look good as swatches can still be unreadable as text. HueSnap shows WCAG contrast ratios for colour pairs. For normal-size body text, aim for at least 4.5:1 against its background. See the WCAG contrast guide for the details and how to fix a failing pair.
7. Test it in a real layout
Put the colours into a quick mock-up: a heading, a paragraph, a button, a card and a link. Problems that swatches hide show up quickly: an accent that fights the primary colour, or a background that makes text look washed out. Also check the palette in dark mode if your product has one, and on a phone screen in daylight.
8. Export and keep it in your project
Export CSS custom properties, a Tailwind snippet, or a PNG strip for mood boards (see exporting CSS variables). Keeping the palette in code makes it easy to reuse and change in one place.
Common mistakes
- Using five saturated colours at equal weight. Pick one star and let the others support it.
- Relying on colour alone to carry meaning, such as red and green for errors and success. Add icons or text for people with colour-vision deficiencies.
- Choosing text colours last. Decide text and background first, then build accents around them.
Generating, locking, contrast checks and exports in HueSnap are all free.