# Analogous navy, blue and purple linear swatches

Analogous navy, blue and purple linear swatches 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?style=linearSwatches
- Drawn as: linear swatches, 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.000% 14.286%, #022f66 14.286% 28.571%, #03619c 28.571% 42.857%, #0d89d0 42.857% 57.143%, #2480e6 57.143% 71.429%, #414ecf 71.429% 85.714%, #6d299f 85.714% 100.000%);
background: linear-gradient(90deg, oklch(27.56% 0.0744 260.86) 0.000% 14.286%, oklch(31.50% 0.1075 256.63) 14.286% 28.571%, oklch(47.64% 0.1213 246.06) 28.571% 42.857%, oklch(60.63% 0.1433 242.89) 42.857% 57.143%, oklch(60.24% 0.1750 254.52) 57.143% 71.429%, oklch(49.61% 0.1970 272.48) 71.429% 85.714%, oklch(44.09% 0.1819 306.30) 85.714% 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)
- [PNG](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.png?style=linearSwatches)
- [SVG](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.svg?style=linearSwatches)
- [CSS](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.css?style=linearSwatches)
- [ASE](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.ase?style=linearSwatches)
- [GPL](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.gpl?style=linearSwatches)
- [GRD](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.grd?style=linearSwatches)
- [Design tokens](https://grabient.com/kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg.tokens.json?style=linearSwatches)
- [Social card](https://grabient.com/api/og?seed=kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg&style=linearSwatches)
- [Palettes like this one](https://grabient.com/palettes?q=kaRja5qCc_bysPrNND-TL_BT9Hwg4QkPg)
- [Guide for agents](https://grabient.com/llms.txt)