# Crimson, ochre and navy primary color palette

The Crimson, ochre and navy primary color palette brings together red, gold, and blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is gold.

- Also called: Vivid red, yellow and blue radial swatches
- Seed: `kWfIoOTNNAOs9yC-wtPrDZAY`
- Page: https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light center, vivid
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 7.3 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#b20d30` | `oklch(48.82% 0.1902 19.69)` | Barbados Cherry | white, 6.9 to 1 |
| 2 | `#ea203d` | `oklch(60.24% 0.2287 21.80)` | Bloodthirsty Warlock | black, 4.7 to 1 |
| 3 | `#f4c614` | `oklch(84.25% 0.1695 91.55)` | Leery Lemon | black, 12.9 to 1 |
| 4 | `#1859c6` | `oklch(49.21% 0.1833 260.63)` | Dead Blue Eyes | white, 6.4 to 1 |
| 5 | `#112f85` | `oklch(34.65% 0.1488 264.85)` | One Minute to Midnight | white, 11.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #b20d30 0.000% 20.000%, #ea203d 20.000% 40.000%, #f4c614 40.000% 60.000%, #1859c6 60.000% 80.000%, #112f85 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(48.82% 0.1902 19.69) 0.000% 20.000%, oklch(60.24% 0.2287 21.80) 20.000% 40.000%, oklch(84.25% 0.1695 91.55) 40.000% 60.000%, oklch(49.21% 0.1833 260.63) 60.000% 80.000%, oklch(34.65% 0.1488 264.85) 80.000% 100.000%);
```

## Keyframes

5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.19 | 19.7 |
| 2 | 0.602 | 0.229 | 21.8 |
| 3 | 0.843 | 0.169 | 91.5 |
| 4 | 0.492 | 0.183 | 260.6 |
| 5 | 0.346 | 0.149 | 264.9 |

## In these collections

- [Primary color swatches](https://grabient.com/primary-color-swatches)

## Other forms

- [JSON](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.json?style=radialSwatches&steps=5&angle=0)
- [PNG](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.png?style=radialSwatches&steps=5&angle=0)
- [SVG](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.svg?style=radialSwatches&steps=5&angle=0)
- [CSS](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.css?style=radialSwatches&steps=5&angle=0)
- [ASE](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.ase?style=radialSwatches&steps=5&angle=0)
- [GPL](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.gpl?style=radialSwatches&steps=5&angle=0)
- [GRD](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.grd?style=radialSwatches&steps=5&angle=0)
- [Design tokens](https://grabient.com/kWfIoOTNNAOs9yC-wtPrDZAY.tokens.json?style=radialSwatches&steps=5&angle=0)
- [Social card](https://grabient.com/api/og?seed=kWfIoOTNNAOs9yC-wtPrDZAY&style=radialSwatches&steps=5&angle=0)
- [Palettes like this one](https://grabient.com/palettes?q=kWfIoOTNNAOs9yC-wtPrDZAY)
- [Guide for agents](https://grabient.com/llms.txt)