ChromaNest

How to choose a color palette

Start from context and constraints — brand emotion, industry norms, and accessibility — then refine with harmony tools and real UI previews.

Generate palettes now

Experiment with harmonies

Lock colors you like, then regenerate the rest.

#7c3aed

hsl(262, 83%, 58%)

#abed3a

hsl(82, 83%, 58%)

#ad8ae9

hsl(262, 68%, 73%)

#91d321

hsl(82, 73%, 48%)

#c969d7

hsl(292, 58%, 63%)

CSS variables

:root {
  --color-1: #7c3aed;
  --color-2: #abed3a;
  --color-3: #ad8ae9;
  --color-4: #91d321;
  --color-5: #c969d7;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#7c3aed",
        200: "#abed3a",
        300: "#ad8ae9",
        400: "#91d321",
        500: "#c969d7",
}

1. Define the job

A fintech dashboard needs trustworthy blues and clear status colors. A kids' game can lean into brighter accents. Write down mood words (calm, bold, playful) before you open a picker.

2. Pick a base, then expand

Choose one hero color (often your brand primary). Expand with a harmony: complementary for high contrast, analogous for calm cohesion, triadic for lively balance, or monochromatic for minimal systems. ChromaNest's generator supports all of these.

3. Check contrast early

Beautiful colors fail if body text is unreadable. Test primary text on backgrounds with the contrast checker and aim for at least WCAG AA (4.5:1 for normal text).

4. Build a scale for UI

Interfaces need more than five flat swatches. Generate a 50–950 Tailwind color scale so hover, border, and muted states stay on-brand.

5. Steal from reality (ethically)

Mood boards and photos are fair game for inspiration. Extract dominant colors locally with palette from image — your file never leaves the browser.