David Ewins

Colours

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.

Harmony
Start from a meaning

Palette

Tap any colour to copy its hex.

What these colours mean

Red

Primary, Accent

Surveys in Europe and the United States link red with heat, activity, passion, sexuality, anger, love and joy. As the colour of blood it has long stood for sacrifice, danger and courage. In China, India and many other Asian countries it stands for happiness and good fortune. Source

  • Ferrari. The works team has always raced in red, following rosso corsa, Italy's motor racing colour. Source
  • Christian Louboutin. The red sole is protected as a trademark in several countries. Source
What red means in branding

Orange

Secondary

Surveys in Europe and the United States link orange with amusement, the unconventional, extroversion, warmth, fire, energy, activity, danger, taste and aroma, and autumn. It has long been the national colour of the Netherlands. Source

  • easyJet. Painted its booking phone number in bright orange on the side of its aircraft. Source
  • Orange. The telecoms company's orange is close to easyJet's. Source
  • Hermès. Orange became the house colour during the Second World War, because of shortages under the German occupation of France. Source
What orange means in branding

Light and dark

Every text and background pair, checked against WCAG 2 contrast. AA needs 4.5:1 and AAA needs 7:1 for normal size text.

Light

Order confirmed

Your table is booked for 8pm. We'll text you if anything changes.

View bookingShareNew

Questions? Contact us

  • Text on background

    17.10:1AApassAAApass

  • Muted text on background

    6.22:1AApassAAAfail

  • Text on surface

    18.16:1AApassAAApass

  • Muted text on surface

    6.60:1AApassAAAfail

  • Primary as text on background

    4.26:1AAfailAAAfail

  • Label on primary

    4.52:1AApassAAAfail

  • Label on secondary

    4.28:1AAfailAAAfail

  • Label on accent

    4.59:1AApassAAAfail

Dark

Order confirmed

Your table is booked for 8pm. We'll text you if anything changes.

View bookingShareNew

Questions? Contact us

  • Text on background

    17.05:1AApassAAApass

  • Muted text on background

    7.72:1AApassAAApass

  • Text on surface

    15.36:1AApassAAApass

  • Muted text on surface

    6.95:1AApassAAAfail

  • Primary as text on background

    4.75:1AApassAAAfail

  • Label on primary

    4.65:1AApassAAAfail

  • Label on secondary

    4.93:1AApassAAAfail

  • Label on accent

    4.61:1AApassAAAfail

Export

Plain custom properties. Use them as var(--primary).

theme.css
/* Light by default, dark when the system asks for it. */
:root {
  color-scheme: light;
  --background: #fcf7f6;
  --surface: #ffffff;
  --border: #e6dbda;
  --text: #1e1311;
  --muted: #675a58;
  --primary: #e0312b;
  --on-primary: #ffffff;
  --secondary: #ba6400;
  --on-secondary: #ffffff;
  --accent: #d72e7d;
  --on-accent: #ffffff;
  --brand-50: #fff2f0;
  --brand-100: #ffe0db;
  --brand-200: #ffc4bb;
  --brand-300: #ff9b8f;
  --brand-400: #ff6c5e;
  --brand-500: #ee4037;
  --brand-600: #d11c1c;
  --brand-700: #ad000a;
  --brand-800: #860006;
  --brand-900: #610003;
  --brand-950: #430001;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #140d0c;
    --surface: #201917;
    --border: #342c2a;
    --text: #f6f0ef;
    --muted: #aca2a0;
    --primary: #ea3c34;
    --on-primary: #17100f;
    --secondary: #c66b00;
    --on-secondary: #17100f;
    --accent: #e13a86;
    --on-accent: #17100f;
  }
}

The colours

How it works

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.

Sources

27 pages, all read when this was written.