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

Yellow

Primary

Surveys in Europe, Canada, the United States and elsewhere link yellow with amusement, gentleness, humour, happiness and spontaneity. It can also suggest duplicity, envy, jealousy and greed. In China and many Asian countries it is the colour of royalty, respect and wisdom. Source

  • Caterpillar. Its machines are known by their "Caterpillar Yellow" paint. Source
  • National Geographic. The magazine is known for its yellow rectangular border. Source
  • IKEA. Stores are usually blue buildings with yellow accents, Sweden's national colours. Source
What yellow means in branding

Blue

Secondary

In the United States and across Europe, blue is the colour people most often pick as their favourite. Surveys there link it with harmony, confidence, knowledge, intelligence, calmness, distance, the imagination, cold and sadness. Because of its link with harmony it was chosen for the flags of the United Nations and the European Union. Source

  • IBM. Nicknamed Big Blue, partly because of its blue logo and colour scheme. Source
  • Tiffany & Co.. Tiffany Blue has been a registered colour trademark since 1998. Its Pantone number, 1837, is the year the company was founded. Source
What blue means in branding

Pink

Accent

Surveys in Europe and the United States link pink with sweet foods and drinks, and it is one of the few colours tied to a smell, roses. Pink with white suggests innocence. Today it is seen as a symbol of femininity, though before the second half of the 20th century it often signalled masculinity. Source

  • Owens Corning. Dyes its insulation pink and was the first company in the United States to trademark a colour. Source
  • Schiaparelli. Shocking pink was the signature colour of designer Elsa Schiaparelli. Source
  • Deutsche Telekom. Uses a magenta logo and has tried to stop other businesses using similar colours. Source
What pink 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.04:1AApassAAApass

  • Muted text on background

    6.19:1AApassAAAfail

  • Text on surface

    18.07:1AApassAAApass

  • Muted text on surface

    6.57:1AApassAAAfail

  • Primary as text on background

    1.54:1AAfailAAAfail

  • Label on primary

    11.09:1AApassAAApass

  • Label on secondary

    8.47:1AApassAAApass

  • Label on accent

    7.52:1AApassAAApass

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.09:1AApassAAApass

  • Muted text on background

    7.69:1AApassAAApass

  • Text on surface

    15.48:1AApassAAApass

  • Muted text on surface

    6.97:1AApassAAAfail

  • Primary as text on background

    11.75:1AApassAAApass

  • Label on primary

    11.55:1AApassAAApass

  • Label on secondary

    12.18:1AApassAAApass

  • Label on accent

    10.92:1AApassAAApass

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: #faf8f4;
  --surface: #ffffff;
  --border: #e1ded5;
  --text: #19160d;
  --muted: #615d52;
  --primary: #f5c518;
  --on-primary: #19160d;
  --secondary: #00c3dc;
  --on-secondary: #19160d;
  --accent: #e883df;
  --on-accent: #19160d;
  --brand-50: #fff5d8;
  --brand-100: #fbe7ae;
  --brand-200: #f2d175;
  --brand-300: #e0b529;
  --brand-400: #c49c00;
  --brand-500: #a78500;
  --brand-600: #8b6e00;
  --brand-700: #6f5800;
  --brand-800: #554300;
  --brand-900: #3d2e00;
  --brand-950: #281e00;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #110f09;
    --surface: #1d1a14;
    --border: #302e27;
    --text: #f3f2ed;
    --muted: #a7a49c;
    --primary: #f5c518;
    --on-primary: #14110c;
    --secondary: #19e4ff;
    --on-secondary: #14110c;
    --accent: #ffa8f6;
    --on-accent: #14110c;
  }
}

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.