# Orange, emerald and navy energetic palette

The Orange, emerald and navy energetic palette brings together orange, blue, gold, and dark blue. 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 gold.

- Also called: Rainbow from orange to navy linear swatches
- Seed: `kUpG8mQ64seG1LUildPg`
- Page: https://grabient.com/kUpG8mQ64seG1LUildPg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: triadic
- Contrast of its darkest and lightest colors: 7.1 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 | `#d36f1c` | `oklch(64.57% 0.1530 53.44)` | Autumn Maple | black, 6 to 1 |
| 2 | `#2270b2` | `oklch(53.15% 0.1268 248.58)` | Planetarium | white, 5.2 to 1 |
| 3 | `#d6af2a` | `oklch(76.77% 0.1461 91.13)` | Metallic Gold | black, 10 to 1 |
| 4 | `#152644` | `oklch(27.17% 0.0593 260.21)` | Eternal Darkness | white, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d36f1c 0.000% 25.000%, #2270b2 25.000% 50.000%, #d6af2a 50.000% 75.000%, #152644 75.000% 100.000%);
background: linear-gradient(90deg, oklch(64.57% 0.1530 53.44) 0.000% 25.000%, oklch(53.15% 0.1268 248.58) 25.000% 50.000%, oklch(76.77% 0.1461 91.13) 50.000% 75.000%, oklch(27.17% 0.0593 260.21) 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.153 | 53.4 |
| 2 | 0.531 | 0.127 | -111.4 |
| 3 | 0.768 | 0.146 | -268.9 |
| 4 | 0.272 | 0.059 | -99.8 |

## In these collections

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

## Other forms

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