# Navy, red, orange and cyan linear gradient

Navy, red, orange and cyan linear gradient with 32 colors: #00254b, #0c0058, #0e0023, #030004, #000000, #010000, #170204, #450409, #7a0207, #a01100, #bb1d00, #d41200, #e9000e, #fb0014, #ff3725, #ff4f30, #ff6032, #ff722e, #ff8a27, #f7ab45, #eacd76, #e1e7a6, #ddf7c8, #d3ffd8, #c8ffe4, #adffec, #81fff7, #70faff, #69f2ff, #45edff, #00e7fd, #00e2f9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcQ4K0BADMbhCQ7QXj-3cHCniYyd0tEc6jZBY`
- Page: https://grabient.com/kcQ4K0BADMbhCQ7QXj-3cHCniYyd0tEc6jZBY?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 19 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 | `#00254b` | `oklch(26.39% 0.0821 253.28)` | Oxford Blue | white, 15.4 to 1 |
| 2 | `#0c0058` | `oklch(21.49% 0.1393 271.28)` | Ravenclaw | white, 18.1 to 1 |
| 3 | `#0e0023` | `oklch(13.99% 0.0757 297.49)` | Space Grey | white, 20.1 to 1 |
| 4 | `#030004` | `oklch(7.10% 0.0331 325.69)` | Raven’s Coat | white, 20.8 to 1 |
| 5 | `#000000` | `oklch(2.96% 0.0052 351.05)` | Black | white, 20.9 to 1 |
| 6 | `#010000` | `oklch(5.45% 0.0079 6.76)` | Binary Black | white, 20.9 to 1 |
| 7 | `#170204` | `oklch(13.83% 0.0432 16.89)` | Dark Matter | white, 20 to 1 |
| 8 | `#450409` | `oklch(25.21% 0.0952 23.38)` | Brandywine | white, 16.4 to 1 |
| 9 | `#7a0207` | `oklch(36.59% 0.1480 27.61)` | Demon | white, 11.4 to 1 |
| 10 | `#a01100` | `oklch(45.04% 0.1761 30.88)` | Gory Red | white, 8.1 to 1 |
| 11 | `#bb1d00` | `oklch(50.74% 0.1938 31.72)` | Ravishing Rouge | white, 6.4 to 1 |
| 12 | `#d41200` | `oklch(55.16% 0.2202 30.16)` | Dragon’s Breath | white, 5.3 to 1 |
| 13 | `#e9000e` | `oklch(58.78% 0.2404 28.25)` | KU Crimson | white, 4.6 to 1 |
| 14 | `#fb0014` | `oklch(62.06% 0.2536 27.92)` | Minesweeper’s Red | black, 5.1 to 1 |
| 15 | `#ff3725` | `oklch(65.06% 0.2359 29.92)` | Red Card | black, 5.8 to 1 |
| 16 | `#ff4f30` | `oklch(67.22% 0.2167 32.40)` | Flame Angelfish | black, 6.4 to 1 |
| 17 | `#ff6032` | `oklch(69.11% 0.2021 36.42)` | Toxic Orange | black, 6.9 to 1 |
| 18 | `#ff722e` | `oklch(71.39% 0.1883 43.26)` | Extreme Carrot | black, 7.7 to 1 |
| 19 | `#ff8a27` | `oklch(74.74% 0.1738 54.28)` | Orange Avant-Garde | black, 8.8 to 1 |
| 20 | `#f7ab45` | `oklch(79.75% 0.1446 71.00)` | Koji Orange | black, 10.8 to 1 |
| 21 | `#eacd76` | `oklch(85.53% 0.1121 91.40)` | Moscow Mule | black, 13.5 to 1 |
| 22 | `#e1e7a6` | `oklch(90.87% 0.0841 112.58)` | Hip Hop | black, 16.2 to 1 |
| 23 | `#ddf7c8` | `oklch(94.56% 0.0683 131.68)` | Envious Pastel | black, 18.2 to 1 |
| 24 | `#d3ffd8` | `oklch(95.88% 0.0691 148.06)` | Mint Zest | black, 19 to 1 |
| 25 | `#c8ffe4` | `oklch(95.55% 0.0658 163.82)` | Mint Zest | black, 18.8 to 1 |
| 26 | `#adffec` | `oklch(94.22% 0.0839 178.11)` | Blister Pearl | black, 18.2 to 1 |
| 27 | `#81fff7` | `oklch(92.56% 0.1136 189.99)` | Defence Matrix | black, 17.5 to 1 |
| 28 | `#70faff` | `oklch(91.10% 0.1197 198.55)` | Ancient Ice | black, 16.8 to 1 |
| 29 | `#69f2ff` | `oklch(89.15% 0.1201 203.48)` | Robin’s Egg | black, 15.7 to 1 |
| 30 | `#45edff` | `oklch(86.92% 0.1344 205.88)` | Bioluminescence | black, 14.7 to 1 |
| 31 | `#00e7fd` | `oklch(84.87% 0.1455 206.99)` | Whimsical Blue | black, 13.8 to 1 |
| 32 | `#00e2f9` | `oklch(83.47% 0.1435 208.04)` | Cold Heights | black, 13.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00254b 0.0%, #0c0058 3.2%, #0e0023 6.5%, #030004 9.7%, #000000 12.9%, #010000 16.1%, #170204 19.4%, #450409 22.6%, #7a0207 25.8%, #a01100 29.0%, #bb1d00 32.3%, #d41200 35.5%, #e9000e 38.7%, #fb0014 41.9%, #ff3725 45.2%, #ff4f30 48.4%, #ff6032 51.6%, #ff722e 54.8%, #ff8a27 58.1%, #f7ab45 61.3%, #eacd76 64.5%, #e1e7a6 67.7%, #ddf7c8 71.0%, #d3ffd8 74.2%, #c8ffe4 77.4%, #adffec 80.6%, #81fff7 83.9%, #70faff 87.1%, #69f2ff 90.3%, #45edff 93.5%, #00e7fd 96.8%, #00e2f9 100.0%);
background: linear-gradient(90deg in oklch, oklch(26.39% 0.0821 253.28) 0.0%, oklch(21.49% 0.1393 271.28) 3.2%, oklch(13.99% 0.0757 297.49) 6.5%, oklch(7.10% 0.0331 325.69) 9.7%, oklch(2.96% 0.0052 351.05) 12.9%, oklch(5.45% 0.0079 6.76) 16.1%, oklch(13.83% 0.0432 16.89) 19.4%, oklch(25.21% 0.0952 23.38) 22.6%, oklch(36.59% 0.1480 27.61) 25.8%, oklch(45.04% 0.1761 30.88) 29.0%, oklch(50.74% 0.1938 31.72) 32.3%, oklch(55.16% 0.2202 30.16) 35.5%, oklch(58.78% 0.2404 28.25) 38.7%, oklch(62.06% 0.2536 27.92) 41.9%, oklch(65.06% 0.2359 29.92) 45.2%, oklch(67.22% 0.2167 32.40) 48.4%, oklch(69.11% 0.2021 36.42) 51.6%, oklch(71.39% 0.1883 43.26) 54.8%, oklch(74.74% 0.1738 54.28) 58.1%, oklch(79.75% 0.1446 71.00) 61.3%, oklch(85.53% 0.1121 91.40) 64.5%, oklch(90.87% 0.0841 112.58) 67.7%, oklch(94.56% 0.0683 131.68) 71.0%, oklch(95.88% 0.0691 148.06) 74.2%, oklch(95.55% 0.0658 163.82) 77.4%, oklch(94.22% 0.0839 178.11) 80.6%, oklch(92.56% 0.1136 189.99) 83.9%, oklch(91.10% 0.1197 198.55) 87.1%, oklch(89.15% 0.1201 203.48) 90.3%, oklch(86.92% 0.1344 205.88) 93.5%, oklch(84.87% 0.1455 206.99) 96.8%, oklch(83.47% 0.1435 208.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.264 | 0.179 | 253.1 |
| 2 | 0.031 | 0.001 | 358.8 |
| 3 | 0.441 | 0.182 | 390.5 |
| 4 | 0.63 | 0.259 | 388.4 |
| 5 | 0.736 | 0.181 | 410.6 |
| 6 | 0.949 | 0.068 | 494.1 |
| 7 | 0.917 | 0.143 | 555.4 |
| 8 | 0.835 | 0.149 | 568 |

## In these collections

- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)
- [Multicolor gradients](https://grabient.com/multicolor-gradients)

## Other forms

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