# Analogous navy, blue and purple linear gradient

Analogous navy, blue and purple linear gradient with 7 colors: #11264c, #022f66, #03619c, #0d89d0, #2480e6, #414ecf, #6d299f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg`
- Page: https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#11264c` | `oklch(27.56% 0.0744 260.86)` | Rurikon Blue | white, 14.9 to 1 |
| 2 | `#022f66` | `oklch(31.50% 0.1075 256.63)` | Cool Black | white, 13 to 1 |
| 3 | `#03619c` | `oklch(47.64% 0.1213 246.06)` | Rave Regatta | white, 6.6 to 1 |
| 4 | `#0d89d0` | `oklch(60.63% 0.1433 242.89)` | Way Beyond the Blue | black, 5.5 to 1 |
| 5 | `#2480e6` | `oklch(60.24% 0.1750 254.52)` | Soothing Sapphire | black, 5.3 to 1 |
| 6 | `#414ecf` | `oklch(49.61% 0.1970 272.48)` | Gorgonzola Blue | white, 6.5 to 1 |
| 7 | `#6d299f` | `oklch(44.09% 0.1819 306.30)` | Purple Heart | white, 8.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #11264c 0.0%, #022f66 16.7%, #03619c 33.3%, #0d89d0 50.0%, #2480e6 66.7%, #414ecf 83.3%, #6d299f 100.0%);
background: linear-gradient(90deg in oklch, oklch(27.56% 0.0744 260.86) 0.0%, oklch(31.50% 0.1075 256.63) 16.7%, oklch(47.64% 0.1213 246.06) 33.3%, oklch(60.63% 0.1433 242.89) 50.0%, oklch(60.24% 0.1750 254.52) 66.7%, oklch(49.61% 0.1970 272.48) 83.3%, oklch(44.09% 0.1819 306.30) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.074 | 260.9 |
| 2 | 0.315 | 0.107 | 256.6 |
| 3 | 0.476 | 0.121 | 246.1 |
| 4 | 0.606 | 0.143 | 242.9 |
| 5 | 0.602 | 0.175 | 254.5 |
| 6 | 0.496 | 0.197 | 272.5 |
| 7 | 0.441 | 0.182 | 306.3 |

## In these collections

- [Galaxy gradients](https://grabient.com/galaxy-gradients)
- [Blue and purple gradients](https://grabient.com/blue-and-purple-gradients)

## Other forms

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