# Navy, magenta and orange sunrise palette

The Navy, magenta and orange sunrise palette brings together dark blue, purple, magenta, light red, and pale 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 pale orange.

- Also called: Navy, purple, pink and peach linear gradient
- Seed: `kWQEHDsy9Dci2w3cs0S8qhFw`
- Page: https://grabient.com/kWQEHDsy9Dci2w3cs0S8qhFw?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 11.9 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 | `#171b4c` | `oklch(25.20% 0.0896 274.92)` | Tetsu-Kon Blue | white, 16.2 to 1 |
| 2 | `#1c1d51` | `oklch(26.38% 0.0929 277.29)` | Fly-by-Night | white, 15.6 to 1 |
| 3 | `#221f57` | `oklch(27.95% 0.0975 280.46)` | Spacescape | white, 15 to 1 |
| 4 | `#2a225e` | `oklch(29.81% 0.1030 284.22)` | Cluedo Night | white, 14.1 to 1 |
| 5 | `#322565` | `oklch(31.89% 0.1090 288.41)` | Dark Dreams | white, 13.2 to 1 |
| 6 | `#3c286d` | `oklch(34.10% 0.1151 292.81)` | Her Highness | white, 12.2 to 1 |
| 7 | `#462b74` | `oklch(36.35% 0.1210 297.25)` | Windsor | white, 11.2 to 1 |
| 8 | `#512e7b` | `oklch(38.57% 0.1263 301.52)` | Regalia | white, 10.3 to 1 |
| 9 | `#5b3180` | `oklch(40.67% 0.1305 305.46)` | Deep Amethyst | white, 9.5 to 1 |
| 10 | `#653586` | `oklch(42.79% 0.1343 309.17)` | Violet Magician | white, 8.7 to 1 |
| 11 | `#6f398b` | `oklch(44.96% 0.1378 312.79)` | Perkin Mauve | white, 7.9 to 1 |
| 12 | `#7a3d8f` | `oklch(47.18% 0.1411 316.38)` | Perkin Mauve | white, 7.2 to 1 |
| 13 | `#844193` | `oklch(49.41% 0.1440 320.02)` | Cadmium Violet | white, 6.6 to 1 |
| 14 | `#8f4597` | `oklch(51.64% 0.1465 323.77)` | Murasaki Purple | white, 6 to 1 |
| 15 | `#9a4a99` | `oklch(53.85% 0.1484 327.71)` | Hyacinth Violet | white, 5.5 to 1 |
| 16 | `#a54e9b` | `oklch(56.02% 0.1498 331.89)` | Plum Dust | white, 5 to 1 |
| 17 | `#b0539c` | `oklch(58.13% 0.1505 336.37)` | Magenta Memoir | white, 4.6 to 1 |
| 18 | `#ba579b` | `oklch(60.19% 0.1506 341.06)` | Magenta Memoir | black, 4.9 to 1 |
| 19 | `#c45d9a` | `oklch(62.20% 0.1501 345.94)` | Llilacquered | black, 5.3 to 1 |
| 20 | `#ce6298` | `oklch(64.19% 0.1491 350.99)` | Nocturnal Rose | black, 5.8 to 1 |
| 21 | `#d76895` | `oklch(66.18% 0.1476 356.20)` | Groovy | black, 6.3 to 1 |
| 22 | `#e06e92` | `oklch(68.18% 0.1458 1.59)` | The Sickener | black, 6.8 to 1 |
| 23 | `#e8758f` | `oklch(70.22% 0.1436 7.12)` | Loveland | black, 7.3 to 1 |
| 24 | `#f07d8c` | `oklch(72.30% 0.1412 12.81)` | Flower Blossom Pink | black, 8 to 1 |
| 25 | `#f7868a` | `oklch(74.52% 0.1383 18.90)` | Strawberry Field | black, 8.7 to 1 |
| 26 | `#fe9087` | `oklch(76.98% 0.1345 25.81)` | Prime Pink | black, 9.5 to 1 |
| 27 | `#ff9f8a` | `oklch(79.57% 0.1188 33.20)` | Tangerine Cream | black, 10.6 to 1 |
| 28 | `#ffae90` | `oklch(82.16% 0.1042 40.68)` | Coral Correlation | black, 11.6 to 1 |
| 29 | `#ffbb98` | `oklch(84.64% 0.0919 47.88)` | Cream Puff | black, 12.7 to 1 |
| 30 | `#ffc6a1` | `oklch(86.88% 0.0817 54.40)` | Apricot Froth | black, 13.8 to 1 |
| 31 | `#ffcfaa` | `oklch(88.76% 0.0734 59.88)` | Peach Juice | black, 14.7 to 1 |
| 32 | `#ffd6b1` | `oklch(90.16% 0.0672 63.93)` | Delicious Melon | black, 15.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #171b4c 0.0%, #1c1d51 3.2%, #221f57 6.5%, #2a225e 9.7%, #322565 12.9%, #3c286d 16.1%, #462b74 19.4%, #512e7b 22.6%, #5b3180 25.8%, #653586 29.0%, #6f398b 32.3%, #7a3d8f 35.5%, #844193 38.7%, #8f4597 41.9%, #9a4a99 45.2%, #a54e9b 48.4%, #b0539c 51.6%, #ba579b 54.8%, #c45d9a 58.1%, #ce6298 61.3%, #d76895 64.5%, #e06e92 67.7%, #e8758f 71.0%, #f07d8c 74.2%, #f7868a 77.4%, #fe9087 80.6%, #ff9f8a 83.9%, #ffae90 87.1%, #ffbb98 90.3%, #ffc6a1 93.5%, #ffcfaa 96.8%, #ffd6b1 100.0%);
background: linear-gradient(180deg in oklch, oklch(25.20% 0.0896 274.92) 0.0%, oklch(26.38% 0.0929 277.29) 3.2%, oklch(27.95% 0.0975 280.46) 6.5%, oklch(29.81% 0.1030 284.22) 9.7%, oklch(31.89% 0.1090 288.41) 12.9%, oklch(34.10% 0.1151 292.81) 16.1%, oklch(36.35% 0.1210 297.25) 19.4%, oklch(38.57% 0.1263 301.52) 22.6%, oklch(40.67% 0.1305 305.46) 25.8%, oklch(42.79% 0.1343 309.17) 29.0%, oklch(44.96% 0.1378 312.79) 32.3%, oklch(47.18% 0.1411 316.38) 35.5%, oklch(49.41% 0.1440 320.02) 38.7%, oklch(51.64% 0.1465 323.77) 41.9%, oklch(53.85% 0.1484 327.71) 45.2%, oklch(56.02% 0.1498 331.89) 48.4%, oklch(58.13% 0.1505 336.37) 51.6%, oklch(60.19% 0.1506 341.06) 54.8%, oklch(62.20% 0.1501 345.94) 58.1%, oklch(64.19% 0.1491 350.99) 61.3%, oklch(66.18% 0.1476 356.20) 64.5%, oklch(68.18% 0.1458 1.59) 67.7%, oklch(70.22% 0.1436 7.12) 71.0%, oklch(72.30% 0.1412 12.81) 74.2%, oklch(74.52% 0.1383 18.90) 77.4%, oklch(76.98% 0.1345 25.81) 80.6%, oklch(79.57% 0.1188 33.20) 83.9%, oklch(82.16% 0.1042 40.68) 87.1%, oklch(84.64% 0.0919 47.88) 90.3%, oklch(86.88% 0.0817 54.40) 93.5%, oklch(88.76% 0.0734 59.88) 96.8%, oklch(90.16% 0.0672 63.93) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.09 | 274.9 |
| 2 | 0.402 | 0.13 | 304.5 |
| 3 | 0.571 | 0.15 | 334.1 |
| 4 | 0.728 | 0.141 | 374.3 |
| 5 | 0.902 | 0.11 | 423.9 |

## In these collections

- [Sunrise gradients](https://grabient.com/sunrise-gradients)

## Other forms

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