# Crimson, ochre and navy energetic palette

The Crimson, ochre and navy energetic palette brings together red, orange, yellow, and dark 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 dark blue, and its lightest tone is yellow.

- Also called: Red, orange, yellow and navy radial swatches
- Seed: `kUpLAVXEVCfBBxQelSqg`
- Page: https://grabient.com/kUpLAVXEVCfBBxQelSqg?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: light center, vivid, neon, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.6 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 | `#ff3021` | `oklch(64.56% 0.2405 29.53)` | Red Card | black, 5.6 to 1 |
| 2 | `#ff7b05` | `oklch(72.44% 0.1887 50.67)` | Heat Wave | black, 8 to 1 |
| 3 | `#ffd410` | `oklch(88.19% 0.1788 94.00)` | Cyber Yellow | black, 14.7 to 1 |
| 4 | `#171c3a` | `oklch(24.02% 0.0579 274.35)` | Nightwalker | white, 16.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #ff3021 0.000% 25.000%, #ff7b05 25.000% 50.000%, #ffd410 50.000% 75.000%, #171c3a 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(64.56% 0.2405 29.53) 0.000% 25.000%, oklch(72.44% 0.1887 50.67) 25.000% 50.000%, oklch(88.19% 0.1788 94.00) 50.000% 75.000%, oklch(24.02% 0.0579 274.35) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.646 | 0.243 | 29.5 |
| 2 | 0.724 | 0.19 | 50.7 |
| 3 | 0.882 | 0.181 | 94 |
| 4 | 0.24 | 0.058 | -85.7 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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