# Colour Palette

## Purpose

The full set of hues and their steps, forming one palette.

## Decisions

- **Twelve hues**, from red-pink round to magenta. Five colours are kept exactly: **red-pink `#ff0050`, orange `#ff8000`, emerald `#34d399`, blue `#3b9eff`, violet `#7520ff`**. The other seven (coral, amber, lime, teal, sky, purple, magenta) were generated at one shared brightness so none shouts.
- **Nine steps per hue, 100 to 900**.
- **Names are colour and step**, such as `violet-600` or `teal-400`.
- **Core interface colours keep their roles** (violet primary, red-pink danger, orange warning, emerald success, blue info). Other hues are for things that have a conventional colour of their own (a rating star tends to be yellow, for example), chosen from this palette, and for categories, charts, tags and illustrations. They must never be read as a warning, error or success.
- **Hover and pressed shades come from the steps**, not from mixing a percentage: for a button in `violet-500` (`#7520ff`), hover is `violet-600` and pressed is `violet-700`.

### How the steps are made

Each hue's exact base colour is at **step 500**. Steps 100 to 400 are tints of it that lighten towards near-white and lose some chroma; steps 600 to 900 darken towards near-black. Step values are rounded to whole hex colours.

_White-outlined swatches are step 500, the base colour._

| Hue | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| red-pink | `#fee2e3` | `#fecacc` | `#fea9ac` | `#fe7a85` | `#ff0050` | `#cb063f` | `#9a012d` | `#6d001c` | `#41000e` |
| coral | `#fee7e1` | `#fed6cc` | `#febfaf` | `#ff9f87` | `#fc7756` | `#ce5739` | `#a2371c` | `#761a00` | `#450a00` |
| orange | `#fee9dc` | `#fdd9c4` | `#fdc4a0` | `#fda870` | `#ff8000` | `#c9650a` | `#964a04` | `#673001` | `#3b1900` |
| amber | `#fbebc9` | `#f4deb1` | `#eacd8f` | `#ddb762` | `#ce9c09` | `#a37a00` | `#795b07` | `#523c01` | `#2f2100` |
| lime | `#e4f4cc` | `#d5eab4` | `#c1dc93` | `#a8cb68` | `#8cb623` | `#6d9006` | `#506b01` | `#354800` | `#1c2800` |
| emerald | `#d1fae5` | `#bdf4d8` | `#a0ebc7` | `#78e0b2` | `#34d399` | `#03a876` | `#007c56` | `#005439` | `#002e1d` |
| teal | `#cff5f7` | `#b8ecef` | `#97dfe3` | `#6acfd4` | `#04bbc3` | `#08939a` | `#096d72` | `#074a4d` | `#00292b` |
| sky | `#d7f2ff` | `#bae9fe` | `#97dbfa` | `#6acaf2` | `#11b4e8` | `#088eb8` | `#02698a` | `#00475e` | `#002736` |
| blue | `#dfeefe` | `#c6e1ff` | `#a6d0ff` | `#7abaff` | `#3b9eff` | `#1c7cd3` | `#015ca4` | `#003e72` | `#002243` |
| violet | `#e5e3fe` | `#cfcafe` | `#b3a7fe` | `#9378fe` | `#7520ff` | `#5f03d5` | `#4801a5` | `#320078` | `#1e004e` |
| purple | `#f6e6fe` | `#f0d5fe` | `#e9bdfe` | `#dca2f6` | `#cc80ed` | `#a460c2` | `#7e4098` | `#5a2270` | `#38024a` |
| magenta | `#fde5f2` | `#fed2e9` | `#ffb7df` | `#f899d0` | `#ed74bd` | `#c15497` | `#963673` | `#6d1750` | `#44002f` |