I built this to get from one brand colour to a theme I can ship. Pick a colour, or start from what you want the brand to say, and you get a full light and dark palette that passes contrast, with the code.
Tap any colour to copy its hex.
Primary
Surveys in Europe and the United States link purple with rarity, royalty, luxury, ambition, magic, mystery, piety and spirituality. Source
Secondary
Brown is the colour of soil, wood and bark, and is strongly tied to the natural world. In surveys in Europe and the United States it came out as the least popular colour. Researchers have suggested it reads as competence in advertising, because it is linked with reliability and support. Source
Accent
Surveys in American, European and Islamic countries link green with nature, life, health, youth, spring, hope and envy. It is the colour of the environmental movement and of safety and permission: a green light means go. Source
Every text and background pair, checked against WCAG 2 contrast. AA needs 4.5:1 and AAA needs 7:1 for normal size text.
Order confirmed
Your table is booked for 8pm. We'll text you if anything changes.
Questions? Contact us
Text on background
Muted text on background
Text on surface
Muted text on surface
Primary as text on background
Label on primary
Label on secondary
Label on accent
Order confirmed
Your table is booked for 8pm. We'll text you if anything changes.
Questions? Contact us
Text on background
Muted text on background
Text on surface
Muted text on surface
Primary as text on background
Label on primary
Label on secondary
Label on accent
Plain custom properties. Use them as var(--primary).
/* Light by default, dark when the system asks for it. */
:root {
color-scheme: light;
--background: #f9f7fc;
--surface: #ffffff;
--border: #dfdce5;
--text: #18141d;
--muted: #5f5b66;
--primary: #7e3fbf;
--on-primary: #ffffff;
--secondary: #7c6400;
--on-secondary: #ffffff;
--accent: #007b3f;
--on-accent: #ffffff;
--brand-50: #f7f3ff;
--brand-100: #ede2ff;
--brand-200: #dec9ff;
--brand-300: #cba6ff;
--brand-400: #b980ff;
--brand-500: #a165e7;
--brand-600: #894bcc;
--brand-700: #7135ad;
--brand-800: #58228b;
--brand-900: #3f1466;
--brand-950: #2a0a47;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--background: #100e14;
--surface: #1c191f;
--border: #2f2c33;
--text: #f2f1f5;
--muted: #a6a3ab;
--primary: #9e61e3;
--on-primary: #131016;
--secondary: #a18300;
--on-secondary: #131016;
--accent: #00a154;
--on-accent: #131016;
}
}Red
heat, activity, passion, anger, love, joy
Orange
amusement, warmth, energy, activity, extroversion
Yellow
amusement, gentleness, humour, happiness, spontaneity
Green
nature, life, health, youth, hope
Blue
harmony, confidence, knowledge, intelligence, calmness
Purple
rarity, royalty, luxury, ambition, mystery
Pink
sweetness, innocence, femininity
Brown
earth, nature, reliability
Black
elegance, authority, secrets, force
White
perfection, honesty, cleanliness, the new, neutrality
The palette is worked out in OKLCH, a colour space where equal steps in lightness look like equal steps to the eye. Secondary and accent colours turn the hue and keep the lightness and chroma. Anything outside what a normal screen can show has its chroma lowered until it fits.
Contrast uses the WCAG 2 formula. The meanings come from colour surveys in Europe and the United States, so they won't hold everywhere: in China, red stands for happiness and good fortune, and in many Asian cultures white is the colour of mourning.
Swatch colours on this page are my own picks, not official brand values. Brands are named only where a source says they are known for the colour.
27 pages, all read when this was written.