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, Secondary, Accent
Surveys in Europe and the United States link white with perfection, the good, honesty, cleanliness, the beginning, the new, neutrality and exactitude. In many Asian cultures it is also the colour of mourning. Source
What white means in brandingEvery 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: #f8f8f8;
--surface: #ffffff;
--border: #dedede;
--text: #161616;
--muted: #5d5d5d;
--primary: #f7f7f5;
--on-primary: #161616;
--secondary: #adaeaf;
--on-secondary: #161616;
--accent: #aeadaf;
--on-accent: #161616;
--brand-50: #f5f5f4;
--brand-100: #e8e8e7;
--brand-200: #d4d4d3;
--brand-300: #bbbbb9;
--brand-400: #a1a1a0;
--brand-500: #898987;
--brand-600: #727270;
--brand-700: #5b5b59;
--brand-800: #454544;
--brand-900: #30302f;
--brand-950: #1f1f1e;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--background: #0f0f0f;
--surface: #1b1b1a;
--border: #2e2e2e;
--text: #f2f2f2;
--muted: #a4a4a4;
--primary: #d1d1cf;
--on-primary: #121211;
--secondary: #d0d1d3;
--on-secondary: #121211;
--accent: #d2d0d2;
--on-accent: #121211;
}
}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.