import ColourPaletteBrand from './images/colour-palette-brand.png';
import ColourPaletteAccentPrimary from './images/colour-palette-accent-primary.png';
import ColourPaletteAccentSecondary from './images/colour-palette-accent-secondary.png';
import ColourPaletteAccentTertiary from './images/colour-palette-accent-tertiary.png';
import ColourPaletteGreyscale from './images/colour-palette-greyscale.png';
import ColourPaletteCanvas from './images/colour-palette-canvas.png';

<Meta title="Colour" />

# Colour

- [Brand](#brand)
- [Accent](#accent)
- [Greyscale](#greyscale)
- [Canvas](#canvas)

## Brand

<img src={ColourPaletteBrand} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| Economist Red | #E3120B | 227, 18, 11 | 2°, 91%, 47% | `--ds-color-economist-red` |
| Economist Red 60 | #F6423C | 246, 66, 60 | 2°, 91%, 60% | `--ds-color-economist-red-60` |

---

## Accent

### Primary

<img src={ColourPaletteAccentPrimary} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| Chicago 20 | #141F52 | 20, 31, 82 | 230°, 60%, 20% | `--ds-color-chicago-20` |
| Chicago 30 | #1F2E7A | 31, 46, 122 | 230°, 60%, 30% | `--ds-color-chicago-30` |
| Chicago 45 | #2E45B8 | 46, 69, 184 | 230°, 60%, 45% | `--ds-color-chicago-45` |
| Chicago 55 | #475ED1 | 71, 94, 209 | 230°, 60%, 55% | `--ds-color-chicago-55` |
| Chicago 90 | #D6DBF5 | 214, 219, 245 | 230°, 60%, 90% | `--ds-color-chicago-90` |
| Chicago 95 | #EBEDFA | 235, 237, 250 | 230°, 60%, 95% | `--ds-color-chicago-95` |

### Secondary

<img src={ColourPaletteAccentSecondary} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| Hong Kong 45 | #1DC9A4 | 29, 201, 164 | 167°, 75%, 45% | `--ds-color-hong-kong-45` |
| Hong Kong 55 | #36E2BD | 54, 226, 189 | 167°, 75%, 55% | `--ds-color-hong-kong-55` |
| Hong Kong 90 | #D2F9F0 | 210, 249, 240 | 167°, 75%, 90% | `--ds-color-hong-kong-90` |
| Hong Kong 95 | #E9FCF8 | 233, 252, 248 | 167°, 75%, 95% | `--ds-color-hong-kong-95` |
| Tokyo 45 | #C91D42 | 201, 29, 66 | 347°, 75%, 45% | `--ds-color-tokyo-45` |
| Tokyo 55 | #E2365B | 226, 54, 91 | 347°, 75%, 55% | `--ds-color-tokyo-55` |
| Tokyo 90 | #F9D2DB | 249, 210, 219 | 347°, 75%, 90% | `--ds-color-tokyo-90` |
| Tokyo 95 | #FCE9ED | 252, 233, 237 | 347°, 75%, 95% | `--ds-color-tokyo-95` |

### Tertiary

<img src={ColourPaletteAccentTertiary} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| Singapore 55 | #F97A1F | 249, 122, 31 | 25°, 95%, 55% | `--ds-color-singapore-55` |
| Singapore 65 | #FB9851 | 251, 152, 81 | 25°, 95%, 65% | `--ds-color-singapore-65` |
| Singapore 75 | #FCB583 | 252, 181, 131 | 25°, 95%, 75% | `--ds-color-singapore-75` |
| Singapore 90 | #FEE1CD | 254, 225, 205 | 25°, 95%, 90% | `--ds-color-singapore-90` |
| New York 55 | #F9C31F | 249, 195, 31 | 45°, 95%, 55% | `--ds-color-new-york-55` |
| New York 65 | #FBD051 | 251, 208, 81 | 45°, 95%, 65% | `--ds-color-new-york-65` |
| New York 75 | #FCDE83 | 252, 222, 131 | 45°, 95%, 75% | `--ds-color-new-york-75` |
| New York 90 | #FEF2CD | 254, 242, 205 | 45°, 95%, 90% | `--ds-color-new-york-90` |

## Greyscale

<img src={ColourPaletteGreyscale} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| London 5 | #0D0D0D | 13, 13, 13 | 0°, 0%, 5% | `--ds-color-london-5` |
| London 10 | #1A1A1A | 26, 26, 26 | 0°, 0%, 10% | `--ds-color-london-10` |
| London 20 | #333333 | 51, 51, 51 | 0°, 0%, 20% | `--ds-color-london-20` |
| London 35 | #595959 | 89, 89, 89 | 0°, 0%, 35% | `--ds-color-london-35` |
| London 70 | #B3B3B3 | 179, 179, 179 | 0°, 0%, 70% | `--ds-color-london-70` |
| London 85 | #D9D9D9 | 217, 217, 217 | 0°, 0%, 85% | `--ds-color-london-85` |
| London 95 | #F2F2F2 | 242, 242, 242 | 0°, 0%, 95% | `--ds-color-london-95` |
| London 100 | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% | `--ds-color-london-100` |

## Canvas

<img src={ColourPaletteCanvas} alt="" style={{ maxWidth: '640px', marginTop: '1rem' }} />

| Name | Hex | RGB | HSL | Token |
| --- | --- | --- | --- | --- |
| Los Angeles 85 | #E1DFD0 | 225, 223, 208 | 51°, 22%, 85% | `--ds-color-los-angeles-85` |
| Los Angeles 90 | #EBE9E0 | 235, 233, 224 | 51°, 22%, 90% | `--ds-color-los-angeles-90` |
| Los Angeles 95 | #F5F4EF | 245, 244, 239 | 51°, 22%, 95% | `--ds-color-los-angeles-95` |
| Paris 85 | #D0E1E1 | 208, 225, 225 | 180°, 22%, 85% | `--ds-color-paris-85` |
| Paris 90 | #E0EBEB | 224, 235, 235 | 180°, 22%, 90% | `--ds-color-paris-90` |
| Paris 95 | #EFF5F5 | 239, 245, 245 | 180°, 22%, 95% | `--ds-color-paris-95` |