# Navy, deep cyan and orange aurora palette

The Navy, deep cyan and orange aurora palette brings together dark blue, blue, teal, and orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Navy, teal and orange angular swatches
- Seed: `kUNiq8MClAE0lNpesi_A`
- Page: https://grabient.com/kUNiq8MClAE0lNpesi_A?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.4 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 | `#0b1733` | `oklch(21.26% 0.0579 264.38)` | Liberty Blue | white, 17.6 to 1 |
| 2 | `#243d7d` | `oklch(37.80% 0.1130 265.43)` | Mazarine Blue | white, 10.2 to 1 |
| 3 | `#17958b` | `oklch(60.63% 0.1020 186.18)` | Lights at Sea | black, 5.7 to 1 |
| 4 | `#f19057` | `oklch(74.41% 0.1378 49.85)` | Chinese Lantern | black, 8.8 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #0b1733 0.000% 25.000%, #243d7d 25.000% 50.000%, #17958b 50.000% 75.000%, #f19057 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(21.26% 0.0579 264.38) 0.000% 25.000%, oklch(37.80% 0.1130 265.43) 25.000% 50.000%, oklch(60.63% 0.1020 186.18) 50.000% 75.000%, oklch(74.41% 0.1378 49.85) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.058 | 264.4 |
| 2 | 0.378 | 0.113 | 265.4 |
| 3 | 0.606 | 0.102 | 186.2 |
| 4 | 0.744 | 0.138 | 49.9 |

## In these collections

- [Aurora swatches](https://grabient.com/aurora-swatches)

## Other forms

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