# Colour Palettes

CSS custom properties set on `:root`. Import a palette to use its variables:

```scss
// Example: import the blue palette
@use '@reuters-graphics/graphics-components/scss/colours/primary/blue';
```

Then reference variables with `var(--blue-500)` etc.

## Primary palettes

### Amber

| Variable | Value |
|----------|-------|
| `--amber-50` | `#fffbeb` |
| `--amber-100` | `#fef3c7` |
| `--amber-200` | `#fde68a` |
| `--amber-300` | `#fcd34d` |
| `--amber-400` | `#fbbf24` |
| `--amber-500` | `#f59e0b` |
| `--amber-600` | `#d97706` |
| `--amber-700` | `#b45309` |
| `--amber-800` | `#92400e` |
| `--amber-900` | `#78350f` |
| `--amber-950` | `#451a03` |

### Blue

| Variable | Value |
|----------|-------|
| `--blue-50` | `#eff6ff` |
| `--blue-100` | `#dbeafe` |
| `--blue-200` | `#bfdbfe` |
| `--blue-300` | `#93c5fd` |
| `--blue-400` | `#60a5fa` |
| `--blue-500` | `#3b82f6` |
| `--blue-600` | `#2563eb` |
| `--blue-700` | `#1d4ed8` |
| `--blue-800` | `#1e40af` |
| `--blue-900` | `#1e3a8a` |
| `--blue-950` | `#172554` |

### Cyan

| Variable | Value |
|----------|-------|
| `--cyan-50` | `#ecfeff` |
| `--cyan-100` | `#cffafe` |
| `--cyan-200` | `#a5f3fc` |
| `--cyan-300` | `#67e8f9` |
| `--cyan-400` | `#22d3ee` |
| `--cyan-500` | `#06b6d4` |
| `--cyan-600` | `#0891b2` |
| `--cyan-700` | `#0e7490` |
| `--cyan-800` | `#155e75` |
| `--cyan-900` | `#164e63` |
| `--cyan-950` | `#083344` |

### Emerald

| Variable | Value |
|----------|-------|
| `--emerald-50` | `#ecfdf5` |
| `--emerald-100` | `#d1fae5` |
| `--emerald-200` | `#a7f3d0` |
| `--emerald-300` | `#6ee7b7` |
| `--emerald-400` | `#34d399` |
| `--emerald-500` | `#10b981` |
| `--emerald-600` | `#059669` |
| `--emerald-700` | `#047857` |
| `--emerald-800` | `#065f46` |
| `--emerald-900` | `#064e3b` |
| `--emerald-950` | `#022c22` |

### Fuchsia

| Variable | Value |
|----------|-------|
| `--fuchsia-50` | `#fdf4ff` |
| `--fuchsia-100` | `#fae8ff` |
| `--fuchsia-200` | `#f5d0fe` |
| `--fuchsia-300` | `#f0abfc` |
| `--fuchsia-400` | `#e879f9` |
| `--fuchsia-500` | `#d946ef` |
| `--fuchsia-600` | `#c026d3` |
| `--fuchsia-700` | `#a21caf` |
| `--fuchsia-800` | `#86198f` |
| `--fuchsia-900` | `#701a75` |
| `--fuchsia-950` | `#4a044e` |

### Green

| Variable | Value |
|----------|-------|
| `--green-50` | `#f0fdf4` |
| `--green-100` | `#dcfce7` |
| `--green-200` | `#bbf7d0` |
| `--green-300` | `#86efac` |
| `--green-400` | `#4ade80` |
| `--green-500` | `#22c55e` |
| `--green-600` | `#16a34a` |
| `--green-700` | `#15803d` |
| `--green-800` | `#166534` |
| `--green-900` | `#14532d` |
| `--green-950` | `#052e16` |

### Grey

| Variable | Value |
|----------|-------|
| `--grey-50` | `#f9fafb` |
| `--grey-100` | `#f3f4f6` |
| `--grey-200` | `#e5e7eb` |
| `--grey-300` | `#d1d5db` |
| `--grey-400` | `#9ca3af` |
| `--grey-500` | `#6b7280` |
| `--grey-600` | `#4b5563` |
| `--grey-700` | `#374151` |
| `--grey-800` | `#1f2937` |
| `--grey-900` | `#111827` |
| `--grey-950` | `#030712` |

### Indigo

| Variable | Value |
|----------|-------|
| `--indigo-50` | `#eef2ff` |
| `--indigo-100` | `#e0e7ff` |
| `--indigo-200` | `#c7d2fe` |
| `--indigo-300` | `#a5b4fc` |
| `--indigo-400` | `#818cf8` |
| `--indigo-500` | `#6366f1` |
| `--indigo-600` | `#4f46e5` |
| `--indigo-700` | `#4338ca` |
| `--indigo-800` | `#3730a3` |
| `--indigo-900` | `#312e81` |
| `--indigo-950` | `#1e1b4b` |

### Lime

| Variable | Value |
|----------|-------|
| `--lime-50` | `#f7fee7` |
| `--lime-100` | `#ecfccb` |
| `--lime-200` | `#d9f99d` |
| `--lime-300` | `#bef264` |
| `--lime-400` | `#a3e635` |
| `--lime-500` | `#84cc16` |
| `--lime-600` | `#65a30d` |
| `--lime-700` | `#4d7c0f` |
| `--lime-800` | `#3f6212` |
| `--lime-900` | `#365314` |
| `--lime-950` | `#1a2e05` |

### Neutral

| Variable | Value |
|----------|-------|
| `--neutral-50` | `#fafafa` |
| `--neutral-100` | `#f5f5f5` |
| `--neutral-200` | `#e5e5e5` |
| `--neutral-300` | `#d4d4d4` |
| `--neutral-400` | `#a3a3a3` |
| `--neutral-500` | `#737373` |
| `--neutral-600` | `#525252` |
| `--neutral-700` | `#404040` |
| `--neutral-800` | `#262626` |
| `--neutral-900` | `#171717` |
| `--neutral-950` | `#0a0a0a` |

### Orange

| Variable | Value |
|----------|-------|
| `--orange-50` | `#fff7ed` |
| `--orange-100` | `#ffedd5` |
| `--orange-200` | `#fed7aa` |
| `--orange-300` | `#fdba74` |
| `--orange-400` | `#fb923c` |
| `--orange-500` | `#f97316` |
| `--orange-600` | `#ea580c` |
| `--orange-700` | `#c2410c` |
| `--orange-800` | `#9a3412` |
| `--orange-900` | `#7c2d12` |
| `--orange-950` | `#431407` |

### Pink

| Variable | Value |
|----------|-------|
| `--pink-50` | `#fdf2f8` |
| `--pink-100` | `#fce7f3` |
| `--pink-200` | `#fbcfe8` |
| `--pink-300` | `#f9a8d4` |
| `--pink-400` | `#f472b6` |
| `--pink-500` | `#ec4899` |
| `--pink-600` | `#db2777` |
| `--pink-700` | `#be185d` |
| `--pink-800` | `#9d174d` |
| `--pink-900` | `#831843` |
| `--pink-950` | `#500724` |

### Purple

| Variable | Value |
|----------|-------|
| `--purple-50` | `#faf5ff` |
| `--purple-100` | `#f3e8ff` |
| `--purple-200` | `#e9d5ff` |
| `--purple-300` | `#d8b4fe` |
| `--purple-400` | `#c084fc` |
| `--purple-500` | `#a855f7` |
| `--purple-600` | `#9333ea` |
| `--purple-700` | `#7e22ce` |
| `--purple-800` | `#6b21a8` |
| `--purple-900` | `#581c87` |
| `--purple-950` | `#3b0764` |

### Red

| Variable | Value |
|----------|-------|
| `--red-50` | `#fef2f2` |
| `--red-100` | `#fee2e2` |
| `--red-200` | `#fecaca` |
| `--red-300` | `#fca5a5` |
| `--red-400` | `#f87171` |
| `--red-500` | `#ef4444` |
| `--red-600` | `#dc2626` |
| `--red-700` | `#b91c1c` |
| `--red-800` | `#991b1b` |
| `--red-900` | `#7f1d1d` |
| `--red-950` | `#450a0a` |

### Rose

| Variable | Value |
|----------|-------|
| `--rose-50` | `#fff1f2` |
| `--rose-100` | `#ffe4e6` |
| `--rose-200` | `#fecdd3` |
| `--rose-300` | `#fda4af` |
| `--rose-400` | `#fb7185` |
| `--rose-500` | `#f43f5e` |
| `--rose-600` | `#e11d48` |
| `--rose-700` | `#be123c` |
| `--rose-800` | `#9f1239` |
| `--rose-900` | `#881337` |
| `--rose-950` | `#4c0519` |

### Sky

| Variable | Value |
|----------|-------|
| `--sky-50` | `#f0f9ff` |
| `--sky-100` | `#e0f2fe` |
| `--sky-200` | `#bae6fd` |
| `--sky-300` | `#7dd3fc` |
| `--sky-400` | `#38bdf8` |
| `--sky-500` | `#0ea5e9` |
| `--sky-600` | `#0284c7` |
| `--sky-700` | `#0369a1` |
| `--sky-800` | `#075985` |
| `--sky-900` | `#0c4a6e` |
| `--sky-950` | `#082f49` |

### Slate

| Variable | Value |
|----------|-------|
| `--slate-50` | `#f8fafc` |
| `--slate-100` | `#f1f5f9` |
| `--slate-200` | `#e2e8f0` |
| `--slate-300` | `#cbd5e1` |
| `--slate-400` | `#94a3b8` |
| `--slate-500` | `#64748b` |
| `--slate-600` | `#475569` |
| `--slate-700` | `#334155` |
| `--slate-800` | `#1e293b` |
| `--slate-900` | `#0f172a` |
| `--slate-950` | `#020617` |

### Stone

| Variable | Value |
|----------|-------|
| `--stone-50` | `#fafaf9` |
| `--stone-100` | `#f5f5f4` |
| `--stone-200` | `#e7e5e4` |
| `--stone-300` | `#d6d3d1` |
| `--stone-400` | `#a8a29e` |
| `--stone-500` | `#78716c` |
| `--stone-600` | `#57534e` |
| `--stone-700` | `#44403c` |
| `--stone-800` | `#292524` |
| `--stone-900` | `#1c1917` |
| `--stone-950` | `#0c0a09` |

### Teal

| Variable | Value |
|----------|-------|
| `--teal-50` | `#f0fdfa` |
| `--teal-100` | `#ccfbf1` |
| `--teal-200` | `#99f6e4` |
| `--teal-300` | `#5eead4` |
| `--teal-400` | `#2dd4bf` |
| `--teal-500` | `#14b8a6` |
| `--teal-600` | `#0d9488` |
| `--teal-700` | `#0f766e` |
| `--teal-800` | `#115e59` |
| `--teal-900` | `#134e4a` |
| `--teal-950` | `#042f2e` |

### Violet

| Variable | Value |
|----------|-------|
| `--violet-50` | `#f5f3ff` |
| `--violet-100` | `#ede9fe` |
| `--violet-200` | `#ddd6fe` |
| `--violet-300` | `#c4b5fd` |
| `--violet-400` | `#a78bfa` |
| `--violet-500` | `#8b5cf6` |
| `--violet-600` | `#7c3aed` |
| `--violet-700` | `#6d28d9` |
| `--violet-800` | `#5b21b6` |
| `--violet-900` | `#4c1d95` |
| `--violet-950` | `#2e1065` |

### Yellow

| Variable | Value |
|----------|-------|
| `--yellow-50` | `#fefce8` |
| `--yellow-100` | `#fef9c3` |
| `--yellow-200` | `#fef08a` |
| `--yellow-300` | `#fde047` |
| `--yellow-400` | `#facc15` |
| `--yellow-500` | `#eab308` |
| `--yellow-600` | `#ca8a04` |
| `--yellow-700` | `#a16207` |
| `--yellow-800` | `#854d0e` |
| `--yellow-900` | `#713f12` |
| `--yellow-950` | `#422006` |

### Zinc

| Variable | Value |
|----------|-------|
| `--zinc-50` | `#fafafa` |
| `--zinc-100` | `#f4f4f5` |
| `--zinc-200` | `#e4e4e7` |
| `--zinc-300` | `#d4d4d8` |
| `--zinc-400` | `#a1a1aa` |
| `--zinc-500` | `#71717a` |
| `--zinc-600` | `#52525b` |
| `--zinc-700` | `#3f3f46` |
| `--zinc-800` | `#27272a` |
| `--zinc-900` | `#18181b` |
| `--zinc-950` | `#09090b` |

## Thematic palettes

Import thematic palettes to access branded colour tokens used by the `Theme` component.

### Nord

| Variable | Value |
|----------|-------|
| `--nord-0` | `#2e3440` |
| `--nord-polar-night-0` | `#2e3440` |
| `--nord-black` | `#2e3440` |
| `--nord-1` | `#3b4252` |
| `--nord-polar-night-1` | `#3b4252` |
| `--nord-2` | `#434c5e` |
| `--nord-polar-night-2` | `#434c5e` |
| `--nord-3` | `#4c566a` |
| `--nord-polar-night-3` | `#4c566a` |
| `--nord-4` | `#d8dee9` |
| `--nord-snow-storm-0` | `#d8dee9` |
| `--nord-5` | `#e5e9f0` |
| `--nord-snow-storm-1` | `#e5e9f0` |
| `--nord-6` | `#eceff4` |
| `--nord-snow-storm-2` | `#eceff4` |
| `--nord-white` | `#eceff4` |
| `--nord-7` | `#8fbcbb` |
| `--nord-frost-0` | `#8fbcbb` |
| `--nord-8` | `#88c0d0` |
| `--nord-frost-1` | `#88c0d0` |
| `--nord-9` | `#81a1c1` |
| `--nord-frost-2` | `#81a1c1` |
| `--nord-10` | `#5e81ac` |
| `--nord-frost-3` | `#5e81ac` |
| `--nord-blue` | `#5e81ac` |
| `--nord-11` | `#bf616a` |
| `--nord-aurora-0` | `#bf616a` |
| `--nord-red` | `#bf616a` |
| `--nord-12` | `#d08770` |
| `--nord-aurora-1` | `#d08770` |
| `--nord-orange` | `#d08770` |
| `--nord-13` | `#ebcb8b` |
| `--nord-aurora-2` | `#ebcb8b` |
| `--nord-yellow` | `#ebcb8b` |
| `--nord-14` | `#a3be8c` |
| `--nord-aurora-3` | `#a3be8c` |
| `--nord-green` | `#a3be8c` |
| `--nord-15` | `#b48ead` |
| `--nord-aurora-4` | `#b48ead` |
| `--nord-purple` | `#b48ead` |

### Tr

| Variable | Value |
|----------|-------|
| `--tr-orange` | `#fa6400` |
| `--tr-dark-orange` | `#dc4300` |
| `--tr-light-orange` | `#ffa100` |
| `--tr-dark-grey` | `#404040` |
| `--tr-medium-grey` | `#666666` |
| `--tr-light-grey` | `#afafaf` |
| `--tr-muted-grey` | `#d0d0d0` |
| `--tr-contrast-grey` | `#949494` |
| `--tr-hover-background-grey` | `#f8f8f8` |
| `--tr-light-muted-grey` | `#f4f4f4` |
| `--tr-ultra-light-grey` | `#fafafa` |
| `--tr-dark-blue` | `#005da2` |
| `--tr-light-blue` | `#0099c4` |
| `--tr-muted-blue` | `#4386b9` |
| `--tr-lighter-blue` | `#7facce` |
| `--tr-superlight-blue` | `#e5eef5` |
| `--tr-dark-purple` | `#621f95` |
| `--tr-light-purple` | `#6e3ab7` |
| `--tr-dark-red` | `#a00000` |
| `--tr-light-red` | `#dc0a0a` |
| `--tr-dark-green` | `#387c2b` |
| `--tr-light-green` | `#77a22d` |
| `--tr-black` | `#000` |
| `--tr-white` | `#fff` |
| `--tr-ad-placeholder` | `#ffb1b1` |