# Navy, purple and blue linear gradient

Navy, purple and blue linear gradient with 32 colors: #100a2f, #130b33, #160d38, #1a103e, #1f1245, #24154d, #2a1855, #311b5d, #381e65, #3f226c, #462573, #4d2879, #562b7e, #602d81, #6a3084, #753386, #7f3688, #88398a, #903e8e, #974393, #9b499b, #9c51a5, #995ab3, #9266c2, #8673d0, #7681d8, #648edc, #519bda, #42a5d3, #3caecb, #40b4c3, #47b8be. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kULjPKra9BsY2wvbpLEg`
- Page: https://grabient.com/kULjPKra9BsY2wvbpLEg?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.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 | `#100a2f` | `oklch(18.11% 0.0703 284.77)` | Spanish Roast | white, 18.9 to 1 |
| 2 | `#130b33` | `oklch(19.12% 0.0738 285.57)` | Spanish Roast | white, 18.6 to 1 |
| 3 | `#160d38` | `oklch(20.40% 0.0786 286.54)` | Grim Reaper | white, 18.2 to 1 |
| 4 | `#1a103e` | `oklch(21.91% 0.0843 287.66)` | Deadly Depths | white, 17.6 to 1 |
| 5 | `#1f1245` | `oklch(23.61% 0.0907 288.93)` | Shadow Planet | white, 17 to 1 |
| 6 | `#24154d` | `oklch(25.45% 0.0975 290.33)` | Praise of Shadow | white, 16.2 to 1 |
| 7 | `#2a1855` | `oklch(27.38% 0.1044 291.85)` | Voldemort | white, 15.4 to 1 |
| 8 | `#311b5d` | `oklch(29.37% 0.1112 293.48)` | Night Fog | white, 14.5 to 1 |
| 9 | `#381e65` | `oklch(31.37% 0.1176 295.21)` | Christalle | white, 13.5 to 1 |
| 10 | `#3f226c` | `oklch(33.34% 0.1233 297.03)` | Fading Horizon | white, 12.7 to 1 |
| 11 | `#462573` | `oklch(35.22% 0.1282 298.92)` | Windsor | white, 11.8 to 1 |
| 12 | `#4d2879` | `oklch(37.03% 0.1321 301.19)` | Mystic Nights | white, 11 to 1 |
| 13 | `#562b7e` | `oklch(38.87% 0.1358 304.69)` | Regalia | white, 10.3 to 1 |
| 14 | `#602d81` | `oklch(40.75% 0.1393 309.06)` | Deep Amethyst | white, 9.5 to 1 |
| 15 | `#6a3084` | `oklch(42.65% 0.1426 313.87)` | Galactic Grapevine | white, 8.8 to 1 |
| 16 | `#753386` | `oklch(44.56% 0.1454 318.69)` | Maximum Purple | white, 8.1 to 1 |
| 17 | `#7f3688` | `oklch(46.48% 0.1478 323.07)` | Dull Violet | white, 7.5 to 1 |
| 18 | `#88398a` | `oklch(48.38% 0.1496 326.58)` | Purple Sultan | white, 6.9 to 1 |
| 19 | `#903e8e` | `oklch(50.27% 0.1508 328.77)` | Dahlia | white, 6.4 to 1 |
| 20 | `#974393` | `oklch(52.12% 0.1513 329.23)` | Hyacinth Violet | white, 5.9 to 1 |
| 21 | `#9b499b` | `oklch(53.94% 0.1509 327.50)` | Hyacinth Violet | white, 5.5 to 1 |
| 22 | `#9c51a5` | `oklch(55.71% 0.1496 323.10)` | Purpureus | white, 5 to 1 |
| 23 | `#995ab3` | `oklch(57.54% 0.1469 315.27)` | Liberal Lilac | white, 4.6 to 1 |
| 24 | `#9266c2` | `oklch(59.43% 0.1428 304.46)` | Amethyst | black, 4.8 to 1 |
| 25 | `#8673d0` | `oklch(61.35% 0.1376 291.41)` | True V | black, 5.3 to 1 |
| 26 | `#7681d8` | `oklch(63.25% 0.1318 276.87)` | Tanzine | black, 5.8 to 1 |
| 27 | `#648edc` | `oklch(65.09% 0.1256 261.59)` | United Nations Blue | black, 6.4 to 1 |
| 28 | `#519bda` | `oklch(66.83% 0.1194 246.32)` | Flax Flower Blue | black, 7 to 1 |
| 29 | `#42a5d3` | `oklch(68.44% 0.1135 231.80)` | Blue Tango | black, 7.5 to 1 |
| 30 | `#3caecb` | `oklch(69.87% 0.1081 218.78)` | River Blue | black, 8 to 1 |
| 31 | `#40b4c3` | `oklch(71.09% 0.1037 208.01)` | Glassmith | black, 8.5 to 1 |
| 32 | `#47b8be` | `oklch(72.05% 0.1006 200.23)` | Montego Bay | black, 8.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #100a2f 0.0%, #130b33 3.2%, #160d38 6.5%, #1a103e 9.7%, #1f1245 12.9%, #24154d 16.1%, #2a1855 19.4%, #311b5d 22.6%, #381e65 25.8%, #3f226c 29.0%, #462573 32.3%, #4d2879 35.5%, #562b7e 38.7%, #602d81 41.9%, #6a3084 45.2%, #753386 48.4%, #7f3688 51.6%, #88398a 54.8%, #903e8e 58.1%, #974393 61.3%, #9b499b 64.5%, #9c51a5 67.7%, #995ab3 71.0%, #9266c2 74.2%, #8673d0 77.4%, #7681d8 80.6%, #648edc 83.9%, #519bda 87.1%, #42a5d3 90.3%, #3caecb 93.5%, #40b4c3 96.8%, #47b8be 100.0%);
background: linear-gradient(135deg in oklch, oklch(18.11% 0.0703 284.77) 0.0%, oklch(19.12% 0.0738 285.57) 3.2%, oklch(20.40% 0.0786 286.54) 6.5%, oklch(21.91% 0.0843 287.66) 9.7%, oklch(23.61% 0.0907 288.93) 12.9%, oklch(25.45% 0.0975 290.33) 16.1%, oklch(27.38% 0.1044 291.85) 19.4%, oklch(29.37% 0.1112 293.48) 22.6%, oklch(31.37% 0.1176 295.21) 25.8%, oklch(33.34% 0.1233 297.03) 29.0%, oklch(35.22% 0.1282 298.92) 32.3%, oklch(37.03% 0.1321 301.19) 35.5%, oklch(38.87% 0.1358 304.69) 38.7%, oklch(40.75% 0.1393 309.06) 41.9%, oklch(42.65% 0.1426 313.87) 45.2%, oklch(44.56% 0.1454 318.69) 48.4%, oklch(46.48% 0.1478 323.07) 51.6%, oklch(48.38% 0.1496 326.58) 54.8%, oklch(50.27% 0.1508 328.77) 58.1%, oklch(52.12% 0.1513 329.23) 61.3%, oklch(53.94% 0.1509 327.50) 64.5%, oklch(55.71% 0.1496 323.10) 67.7%, oklch(57.54% 0.1469 315.27) 71.0%, oklch(59.43% 0.1428 304.46) 74.2%, oklch(61.35% 0.1376 291.41) 77.4%, oklch(63.25% 0.1318 276.87) 80.6%, oklch(65.09% 0.1256 261.59) 83.9%, oklch(66.83% 0.1194 246.32) 87.1%, oklch(68.44% 0.1135 231.80) 90.3%, oklch(69.87% 0.1081 218.78) 93.5%, oklch(71.09% 0.1037 208.01) 96.8%, oklch(72.05% 0.1006 200.23) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.07 | 284.8 |
| 2 | 0.358 | 0.13 | 299.6 |
| 3 | 0.551 | 0.15 | 324.9 |
| 4 | 0.72 | 0.101 | 200.2 |

## In these collections

- [Underwater colors](https://grabient.com/underwater-colors)

## Other forms

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