# Navy to lavender linear gradient

Navy to lavender linear gradient with 32 colors: #291b45, #2d1e4a, #332251, #3a265a, #432b63, #4d306e, #563678, #603d83, #69448f, #704c9a, #7454a5, #755daf, #7267b9, #6c73c1, #6380c7, #598cc8, #5497c7, #54a1c4, #5aa9c2, #64b0c0, #6fb5c2, #78bac6, #82bfcd, #8dc3d6, #9ac6df, #a7c8e7, #b5caec, #c3ccf0, #d0cef1, #dad0f1, #e3d1f0, #e8d3f0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUQzfSwq5AV6ZtVxkEyg`
- Page: https://grabient.com/kUQzfSwq5AV6ZtVxkEyg?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 11.2 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 | `#291b45` | `oklch(26.38% 0.0758 296.02)` | Azulado | white, 15.7 to 1 |
| 2 | `#2d1e4a` | `oklch(27.88% 0.0792 296.59)` | Elderberry | white, 15 to 1 |
| 3 | `#332251` | `oklch(29.83% 0.0841 297.83)` | Powerful Violet | white, 14.1 to 1 |
| 4 | `#3a265a` | `oklch(32.14% 0.0901 299.49)` | Stormy Night | white, 13 to 1 |
| 5 | `#432b63` | `oklch(34.73% 0.0968 301.28)` | Violet Indigo | white, 11.8 to 1 |
| 6 | `#4d306e` | `oklch(37.51% 0.1037 302.96)` | Abra Purple | white, 10.6 to 1 |
| 7 | `#563678` | `oklch(40.42% 0.1104 304.27)` | Prism Violet | white, 9.5 to 1 |
| 8 | `#603d83` | `oklch(43.36% 0.1165 304.93)` | Tillandsia Purple | white, 8.4 to 1 |
| 9 | `#69448f` | `oklch(46.25% 0.1215 304.70)` | Lords of the Night | white, 7.4 to 1 |
| 10 | `#704c9a` | `oklch(49.01% 0.1251 303.31)` | Parfait d’Amour | white, 6.6 to 1 |
| 11 | `#7454a5` | `oklch(51.57% 0.1267 300.49)` | Royal Lavender | white, 5.9 to 1 |
| 12 | `#755daf` | `oklch(53.91% 0.1261 295.63)` | Simply Purple | white, 5.3 to 1 |
| 13 | `#7267b9` | `oklch(56.22% 0.1234 287.82)` | Ultra Violet | white, 4.7 to 1 |
| 14 | `#6c73c1` | `oklch(58.51% 0.1191 277.73)` | Flood | black, 4.8 to 1 |
| 15 | `#6380c7` | `oklch(60.76% 0.1134 266.15)` | Bodega Bay | black, 5.4 to 1 |
| 16 | `#598cc8` | `oklch(62.98% 0.1069 253.88)` | Marina | black, 6 to 1 |
| 17 | `#5497c7` | `oklch(65.15% 0.0997 241.71)` | Blue Paradise | black, 6.6 to 1 |
| 18 | `#54a1c4` | `oklch(67.27% 0.0924 230.42)` | Brig | black, 7.2 to 1 |
| 19 | `#5aa9c2` | `oklch(69.32% 0.0854 220.80)` | Blue Mist | black, 7.8 to 1 |
| 20 | `#64b0c0` | `oklch(71.30% 0.0788 213.65)` | Finnish Fiord | black, 8.4 to 1 |
| 21 | `#6fb5c2` | `oklch(73.19% 0.0733 209.76)` | Riverside Blue | black, 9 to 1 |
| 22 | `#78bac6` | `oklch(75.01% 0.0690 209.91)` | Azure Lake | black, 9.6 to 1 |
| 23 | `#82bfcd` | `oklch(76.80% 0.0652 214.38)` | Aftercare | black, 10.2 to 1 |
| 24 | `#8dc3d6` | `oklch(78.56% 0.0618 222.46)` | Dreaming Blue | black, 10.8 to 1 |
| 25 | `#9ac6df` | `oklch(80.29% 0.0587 233.31)` | Pale Cerulean | black, 11.4 to 1 |
| 26 | `#a7c8e7` | `oklch(81.95% 0.0558 246.10)` | Island Light | black, 12 to 1 |
| 27 | `#b5caec` | `oklch(83.52% 0.0532 260.00)` | Tropical Blue | black, 12.6 to 1 |
| 28 | `#c3ccf0` | `oklch(84.99% 0.0509 274.19)` | Miami White | black, 13.2 to 1 |
| 29 | `#d0cef1` | `oklch(86.33% 0.0489 287.83)` | Miami White | black, 13.7 to 1 |
| 30 | `#dad0f1` | `oklch(87.52% 0.0471 300.09)` | Plum’s the Word | black, 14.2 to 1 |
| 31 | `#e3d1f0` | `oklch(88.54% 0.0455 310.14)` | Lavender Princess | black, 14.6 to 1 |
| 32 | `#e8d3f0` | `oklch(89.37% 0.0441 317.15)` | Lavender Princess | black, 15 to 1 |

## CSS

```css
background: linear-gradient(135deg, #291b45 0.0%, #2d1e4a 3.2%, #332251 6.5%, #3a265a 9.7%, #432b63 12.9%, #4d306e 16.1%, #563678 19.4%, #603d83 22.6%, #69448f 25.8%, #704c9a 29.0%, #7454a5 32.3%, #755daf 35.5%, #7267b9 38.7%, #6c73c1 41.9%, #6380c7 45.2%, #598cc8 48.4%, #5497c7 51.6%, #54a1c4 54.8%, #5aa9c2 58.1%, #64b0c0 61.3%, #6fb5c2 64.5%, #78bac6 67.7%, #82bfcd 71.0%, #8dc3d6 74.2%, #9ac6df 77.4%, #a7c8e7 80.6%, #b5caec 83.9%, #c3ccf0 87.1%, #d0cef1 90.3%, #dad0f1 93.5%, #e3d1f0 96.8%, #e8d3f0 100.0%);
background: linear-gradient(135deg in oklch, oklch(26.38% 0.0758 296.02) 0.0%, oklch(27.88% 0.0792 296.59) 3.2%, oklch(29.83% 0.0841 297.83) 6.5%, oklch(32.14% 0.0901 299.49) 9.7%, oklch(34.73% 0.0968 301.28) 12.9%, oklch(37.51% 0.1037 302.96) 16.1%, oklch(40.42% 0.1104 304.27) 19.4%, oklch(43.36% 0.1165 304.93) 22.6%, oklch(46.25% 0.1215 304.70) 25.8%, oklch(49.01% 0.1251 303.31) 29.0%, oklch(51.57% 0.1267 300.49) 32.3%, oklch(53.91% 0.1261 295.63) 35.5%, oklch(56.22% 0.1234 287.82) 38.7%, oklch(58.51% 0.1191 277.73) 41.9%, oklch(60.76% 0.1134 266.15) 45.2%, oklch(62.98% 0.1069 253.88) 48.4%, oklch(65.15% 0.0997 241.71) 51.6%, oklch(67.27% 0.0924 230.42) 54.8%, oklch(69.32% 0.0854 220.80) 58.1%, oklch(71.30% 0.0788 213.65) 61.3%, oklch(73.19% 0.0733 209.76) 64.5%, oklch(75.01% 0.0690 209.91) 67.7%, oklch(76.80% 0.0652 214.38) 71.0%, oklch(78.56% 0.0618 222.46) 74.2%, oklch(80.29% 0.0587 233.31) 77.4%, oklch(81.95% 0.0558 246.10) 80.6%, oklch(83.52% 0.0532 260.00) 83.9%, oklch(84.99% 0.0509 274.19) 87.1%, oklch(86.33% 0.0489 287.83) 90.3%, oklch(87.52% 0.0471 300.09) 93.5%, oklch(88.54% 0.0455 310.14) 96.8%, oklch(89.37% 0.0441 317.15) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.264 | 0.076 | 296 |
| 2 | 0.524 | 0.127 | 299.2 |
| 3 | 0.744 | 0.07 | 209.4 |
| 4 | 0.894 | 0.044 | 317.2 |

## In these collections

- [Iridescent glass interface](https://grabient.com/iridescent-glass-interface)

## Other forms

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