ECECHFind a tool
HomeAppsColour Palette Generator

DESIGN & COLOR · LOCAL WORKBENCH

Colour Palette Generator

Generate a five-role interface palette in analogous, triadic or monochrome harmony; lock colours while exploring alternatives, check lightness and text contrast, preview the palette in context, and export CSS variables, Tailwind, JSON, HEX or SVG.

DESIGN & COLOR · LOCAL WORKBENCH · BROWSER WORKSPACE

Build a preview you can inspect.

Generate a five-role interface palette in analogous, triadic or monochrome harmony; lock colours while exploring alternatives, check lightness and text contrast, preview the palette in context, and export CSS variables, Tailwind, JSON, HEX or SVG.

01 · BUILD A USABLE COLOUR SYSTEM

Keep one colour. Explore the rest.

Five colours are spaced across lightness so the palette can handle page backgrounds, surfaces, borders, muted text and headings.

01 · bg#E7F8F8
contrast · 1.1:1 white / 19.2:1 black
White —Black AA
02 · surface#99CCEB
contrast · 1.7:1 white / 12.2:1 black
White —Black AA
03 · border#3768E7
contrast · 4.9:1 white / 4.3:1 black
White AABlack —
04 · muted#2118A0
contrast · 12.3:1 white / 1.7:1 black
White AABlack —
05 · ink#240F42
contrast · 17.2:1 white / 1.2:1 black
White AABlack —
LIGHTNESS SPREAD90%
Wide enough to establish light and dark roles.
RELATIVE LUMINANCE · NOT HUELIGHT → DARK
91%bg56%surface16%border4%muted1%inkRelative luminance controls how light or dark a colour appears to the eye.
02 · SEE IT AS AN INTERFACEROLE PREVIEW
FIELD NOTES · ISSUE 08

A card in this palette

Swatches can look balanced while small text becomes hard to read. Check colour in context before you ship it.

PageSurfaceBorderMutedInk
03 · EXPORT THE PALETTE5 FORMATS
:root {
  --color-bg: #e7f8f8;
  --color-surface: #99cceb;
  --color-border: #3768e7;
  --color-muted: #2118a0;
  --color-ink: #240f42;
}
◎

Runs in this browser. Results are estimates or editing cues. Review the assumptions and source-specific limits before using them in a consequential decision.

Back to the tool library ↗

Need a feature from the original version? Open the current ECECH tool

How this app works

Generate a five-role interface palette in analogous, triadic or monochrome harmony; lock colours while exploring alternatives, check lightness and text contrast, preview the palette in context, and export CSS variables, Tailwind, JSON, HEX or SVG. Results update as you adjust inputs and stay in this browser.