# Analogous navy, blue and purple linear swatches

Analogous navy, blue and purple linear swatches with 13 colors: #11264c, #0b2856, #022f66, #00467f, #03619c, #0978b8, #0d89d0, #128bdf, #2480e6, #2f6ade, #414ecf, #5d37b8, #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?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#11264c` | `oklch(27.56% 0.0744 260.86)` | Rurikon Blue | white, 14.9 to 1 |
| 2 | `#0b2856` | `oklch(28.52% 0.0901 259.41)` | Dark Tyrian Blue | white, 14.4 to 1 |
| 3 | `#022f66` | `oklch(31.50% 0.1075 256.63)` | Cool Black | white, 13 to 1 |
| 4 | `#00467f` | `oklch(39.01% 0.1145 251.33)` | Lost River | white, 9.6 to 1 |
| 5 | `#03619c` | `oklch(47.64% 0.1213 246.06)` | Rave Regatta | white, 6.6 to 1 |
| 6 | `#0978b8` | `oklch(55.17% 0.1312 243.09)` | Americana | white, 4.7 to 1 |
| 7 | `#0d89d0` | `oklch(60.63% 0.1433 242.89)` | Way Beyond the Blue | black, 5.5 to 1 |
| 8 | `#128bdf` | `oklch(61.91% 0.1592 247.39)` | Blue Cola | black, 5.7 to 1 |
| 9 | `#2480e6` | `oklch(60.24% 0.1750 254.52)` | Soothing Sapphire | black, 5.3 to 1 |
| 10 | `#2f6ade` | `oklch(55.24% 0.1890 262.11)` | Enchanting Sapphire | white, 4.9 to 1 |
| 11 | `#414ecf` | `oklch(49.61% 0.1970 272.48)` | Gorgonzola Blue | white, 6.5 to 1 |
| 12 | `#5d37b8` | `oklch(46.19% 0.1908 290.51)` | Purple Emperor | white, 7.7 to 1 |
| 13 | `#6d299f` | `oklch(44.09% 0.1819 306.30)` | Purple Heart | white, 8.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #11264c 0.000% 7.692%, #0b2856 7.692% 15.385%, #022f66 15.385% 23.077%, #00467f 23.077% 30.769%, #03619c 30.769% 38.462%, #0978b8 38.462% 46.154%, #0d89d0 46.154% 53.846%, #128bdf 53.846% 61.538%, #2480e6 61.538% 69.231%, #2f6ade 69.231% 76.923%, #414ecf 76.923% 84.615%, #5d37b8 84.615% 92.308%, #6d299f 92.308% 100.000%);
background: linear-gradient(90deg, oklch(27.56% 0.0744 260.86) 0.000% 7.692%, oklch(28.52% 0.0901 259.41) 7.692% 15.385%, oklch(31.50% 0.1075 256.63) 15.385% 23.077%, oklch(39.01% 0.1145 251.33) 23.077% 30.769%, oklch(47.64% 0.1213 246.06) 30.769% 38.462%, oklch(55.17% 0.1312 243.09) 38.462% 46.154%, oklch(60.63% 0.1433 242.89) 46.154% 53.846%, oklch(61.91% 0.1592 247.39) 53.846% 61.538%, oklch(60.24% 0.1750 254.52) 61.538% 69.231%, oklch(55.24% 0.1890 262.11) 69.231% 76.923%, oklch(49.61% 0.1970 272.48) 76.923% 84.615%, oklch(46.19% 0.1908 290.51) 84.615% 92.308%, oklch(44.09% 0.1819 306.30) 92.308% 100.000%);
```

## 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?style=linearSwatches&steps=13)
- [PNG](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.png?style=linearSwatches&steps=13)
- [SVG](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.svg?style=linearSwatches&steps=13)
- [CSS](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.css?style=linearSwatches&steps=13)
- [ASE](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.ase?style=linearSwatches&steps=13)
- [GPL](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.gpl?style=linearSwatches&steps=13)
- [GRD](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.grd?style=linearSwatches&steps=13)
- [Design tokens](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.tokens.json?style=linearSwatches&steps=13)
- [Social card](https://grabient.com/api/og?seed=kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg&style=linearSwatches&steps=13)
- [Palettes like this one](https://grabient.com/palettes?q=kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg)
- [Guide for agents](https://grabient.com/llms.txt)