# Colours

> Pick a colour or start from a meaning and get light and dark palettes, WCAG contrast checks, what each colour means with sources, and code for CSS, Tailwind, React Native, SwiftUI and Figma.

Web page: https://davidewins.com/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.

## How to use it

- **Base colour**: pick a colour or type a hex value.
- **Harmony**: Analogous, Complementary, Triadic, Split. Sets how the secondary and accent colours are turned from the base.
- **Or start from a meaning**: pick a mood and the base colour switches to the first colour listed for it below.
- **Palette**: primary, secondary and accent swatches and a 50 to 950 scale.
- **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.
- **Export**: CSS, Tailwind v4, React Native, SwiftUI, Figma, Uniwind.

### Meanings

- **Calm** (blue): Blue is linked with calmness and harmony. Based on European and US colour surveys.
- **Confidence** (blue, white): Blue is linked with confidence and knowledge, white with honesty. Based on European and US colour surveys.
- **Energy** (orange, red): Orange is linked with energy and activity, red with activity and heat. Based on European and US colour surveys.
- **Fun** (yellow, orange): Yellow is linked with amusement, humour and happiness, orange with amusement. Based on European and US colour surveys.
- **Luxury** (purple, black): Purple is linked with luxury and rarity, black with elegance. Based on European and US colour surveys.
- **Passion** (red): Red is linked with passion and love. Based on European and US colour surveys.
- **Nature** (green, brown): Green is linked with nature and life, brown with the natural world. Based on European and US colour surveys.
- **Health** (green, white): Green is linked with health, white with cleanliness. Based on European and US colour surveys.
- **Sweet** (pink): Pink is the colour most linked with sweet foods and drinks. Based on European and US colour surveys.
- **Mystery** (purple, black): Purple is linked with magic and mystery, black with secrets and magic. Based on European and US colour surveys.

## The colours

- [Red](https://davidewins.com/colours/red) (#e0312b): heat, activity, passion, anger, love, joy
- [Orange](https://davidewins.com/colours/orange) (#f2771a): amusement, warmth, energy, activity, extroversion
- [Yellow](https://davidewins.com/colours/yellow) (#f5c518): amusement, gentleness, humour, happiness, spontaneity
- [Green](https://davidewins.com/colours/green) (#2e9e4f): nature, life, health, youth, hope
- [Blue](https://davidewins.com/colours/blue) (#2563eb): harmony, confidence, knowledge, intelligence, calmness
- [Purple](https://davidewins.com/colours/purple) (#7e3fbf): rarity, royalty, luxury, ambition, mystery
- [Pink](https://davidewins.com/colours/pink) (#ec5f9e): sweetness, innocence, femininity
- [Brown](https://davidewins.com/colours/brown) (#8a5a3b): earth, nature, reliability
- [Black](https://davidewins.com/colours/black) (#141414): elegance, authority, secrets, force
- [White](https://davidewins.com/colours/white) (#f7f7f5): perfection, honesty, cleanliness, the new, neutrality

## 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

- [Björn Ottosson: A perceptual color space for image processing (OKLab)](https://bottosson.github.io/posts/oklab/)
- [WCAG 2.1: Contrast (Minimum), AA](https://www.w3.org/TR/WCAG21/#contrast-minimum)
- [WCAG 2.1: Contrast (Enhanced), AAA](https://www.w3.org/TR/WCAG21/#contrast-enhanced)
- [Figma Help: Modes for variables (importing design tokens)](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables)
- [Uniwind docs: Custom themes](https://docs.uniwind.dev/theming/custom-themes)
- [Wikipedia: Red](https://en.wikipedia.org/wiki/Red)
- [Wikipedia: Rosso corsa](https://en.wikipedia.org/wiki/Rosso_corsa)
- [Wikipedia: Christian Louboutin](https://en.wikipedia.org/wiki/Christian_Louboutin)
- [Wikipedia: Orange (colour)](https://en.wikipedia.org/wiki/Orange_(colour))
- [Wikipedia: easyJet](https://en.wikipedia.org/wiki/EasyJet)
- [Wikipedia: Hermès](https://en.wikipedia.org/wiki/Herm%C3%A8s)
- [Wikipedia: Yellow](https://en.wikipedia.org/wiki/Yellow)
- [Wikipedia: Caterpillar Inc.](https://en.wikipedia.org/wiki/Caterpillar_Inc.)
- [Wikipedia: National Geographic](https://en.wikipedia.org/wiki/National_Geographic)
- [Wikipedia: IKEA](https://en.wikipedia.org/wiki/IKEA)
- [Wikipedia: Green](https://en.wikipedia.org/wiki/Green)
- [Wikipedia: John Deere](https://en.wikipedia.org/wiki/John_Deere)
- [Wikipedia: Blue](https://en.wikipedia.org/wiki/Blue)
- [Wikipedia: IBM](https://en.wikipedia.org/wiki/IBM)
- [Wikipedia: Tiffany Blue](https://en.wikipedia.org/wiki/Tiffany_Blue)
- [Wikipedia: Purple](https://en.wikipedia.org/wiki/Purple)
- [Wikipedia: Cadbury](https://en.wikipedia.org/wiki/Cadbury)
- [Wikipedia: Pink](https://en.wikipedia.org/wiki/Pink)
- [Wikipedia: Magenta](https://en.wikipedia.org/wiki/Magenta)
- [Wikipedia: Brown](https://en.wikipedia.org/wiki/Brown)
- [Wikipedia: Black](https://en.wikipedia.org/wiki/Black)
- [Wikipedia: White](https://en.wikipedia.org/wiki/White)