# Navy, gray, pink and lavender angular gradient

Navy, gray, pink and lavender angular gradient with 32 colors: #143357, #12385a, #0f3f5e, #0d4862, #0d5066, #135969, #1b606d, #246871, #2d7076, #38777a, #437f7d, #51857f, #628c80, #739183, #829687, #8e9b8c, #99a090, #a3a492, #afa793, #baa995, #c4aa99, #c9aa9e, #cba9a2, #cba9a4, #caa7a5, #c8a4a5, #c5a1a7, #be9ca9, #b596ab, #a890ad, #9c8cae, #938aae. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaUTW0Nxm7seWPNXCTk4I61d6Pu7TE7dA`
- Page: https://grabient.com/kaUTW0Nxm7seWPNXCTk4I61d6Pu7TE7dA?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light center, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#143357` | `oklch(31.89% 0.0730 253.12)` | Incremental Blue | white, 12.7 to 1 |
| 2 | `#12385a` | `oklch(33.36% 0.0728 248.29)` | Poseidon | white, 12 to 1 |
| 3 | `#0f3f5e` | `oklch(35.41% 0.0725 241.39)` | Poseidon | white, 11 to 1 |
| 4 | `#0d4862` | `oklch(37.82% 0.0721 233.42)` | Stegadon Scale Green | white, 9.9 to 1 |
| 5 | `#0d5066` | `oklch(40.40% 0.0714 225.37)` | Hanada Blue | white, 8.8 to 1 |
| 6 | `#135969` | `oklch(42.91% 0.0705 218.23)` | Connor’s Lakefront | white, 7.9 to 1 |
| 7 | `#1b606d` | `oklch(45.32% 0.0694 212.73)` | Excellence | white, 7.1 to 1 |
| 8 | `#246871` | `oklch(47.83% 0.0684 208.36)` | Persian Mosaic | white, 6.3 to 1 |
| 9 | `#2d7076` | `oklch(50.40% 0.0671 204.26)` | Whaling Waters | white, 5.7 to 1 |
| 10 | `#38777a` | `oklch(52.96% 0.0651 199.54)` | Diver’s Eden | white, 5.1 to 1 |
| 11 | `#437f7d` | `oklch(55.48% 0.0620 193.33)` | Bubble Turquoise | white, 4.6 to 1 |
| 12 | `#51857f` | `oklch(57.95% 0.0569 185.14)` | Jericho Jade | black, 5 to 1 |
| 13 | `#628c80` | `oklch(60.46% 0.0492 175.75)` | Chlorite | black, 5.5 to 1 |
| 14 | `#739183` | `oklch(62.95% 0.0404 165.22)` | Hawkesbury | black, 6.1 to 1 |
| 15 | `#829687` | `oklch(65.33% 0.0323 153.51)` | Pointed Cabbage Green | black, 6.6 to 1 |
| 16 | `#8e9b8c` | `oklch(67.51% 0.0264 140.62)` | Ramona | black, 7.2 to 1 |
| 17 | `#99a090` | `oklch(69.45% 0.0243 126.15)` | Bitter Sage | black, 7.7 to 1 |
| 18 | `#a3a492` | `oklch(71.29% 0.0258 108.68)` | Cement | black, 8.2 to 1 |
| 19 | `#afa793` | `oklch(72.98% 0.0296 89.61)` | Spray Green | black, 8.7 to 1 |
| 20 | `#baa995` | `oklch(74.41% 0.0342 70.79)` | Fangtooth Fish | black, 9.1 to 1 |
| 21 | `#c4aa99` | `oklch(75.50% 0.0382 54.04)` | Adirondack Path | black, 9.5 to 1 |
| 22 | `#c9aa9e` | `oklch(76.15% 0.0405 41.21)` | Teatime Mauve | black, 9.7 to 1 |
| 23 | `#cba9a2` | `oklch(76.41% 0.0413 32.83)` | Teatime Mauve | black, 9.7 to 1 |
| 24 | `#cba9a4` | `oklch(76.31% 0.0416 27.20)` | Rosy Tan | black, 9.7 to 1 |
| 25 | `#caa7a5` | `oklch(75.89% 0.0416 22.35)` | Parfait | black, 9.5 to 1 |
| 26 | `#c8a4a5` | `oklch(75.19% 0.0419 16.33)` | Pale Mauve | black, 9.3 to 1 |
| 27 | `#c5a1a7` | `oklch(74.23% 0.0430 7.19)` | Lighthearted Rose | black, 9 to 1 |
| 28 | `#be9ca9` | `oklch(72.69% 0.0449 353.61)` | Artichoke Mauve | black, 8.5 to 1 |
| 29 | `#b596ab` | `oklch(70.68% 0.0473 337.33)` | Roseville | black, 7.8 to 1 |
| 30 | `#a890ad` | `oklch(68.54% 0.0499 320.72)` | Knight’s Tale | black, 7.2 to 1 |
| 31 | `#9c8cae` | `oklch(66.65% 0.0522 306.18)` | Saffron Blossom Mauve | black, 6.7 to 1 |
| 32 | `#938aae` | `oklch(65.35% 0.0537 296.10)` | Larkspur Violet | black, 6.4 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #143357 0.0%, #12385a 3.2%, #0f3f5e 6.5%, #0d4862 9.7%, #0d5066 12.9%, #135969 16.1%, #1b606d 19.4%, #246871 22.6%, #2d7076 25.8%, #38777a 29.0%, #437f7d 32.3%, #51857f 35.5%, #628c80 38.7%, #739183 41.9%, #829687 45.2%, #8e9b8c 48.4%, #99a090 51.6%, #a3a492 54.8%, #afa793 58.1%, #baa995 61.3%, #c4aa99 64.5%, #c9aa9e 67.7%, #cba9a2 71.0%, #cba9a4 74.2%, #caa7a5 77.4%, #c8a4a5 80.6%, #c5a1a7 83.9%, #be9ca9 87.1%, #b596ab 90.3%, #a890ad 93.5%, #9c8cae 96.8%, #938aae 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(31.89% 0.0730 253.12) 0.0%, oklch(33.36% 0.0728 248.29) 3.2%, oklch(35.41% 0.0725 241.39) 6.5%, oklch(37.82% 0.0721 233.42) 9.7%, oklch(40.40% 0.0714 225.37) 12.9%, oklch(42.91% 0.0705 218.23) 16.1%, oklch(45.32% 0.0694 212.73) 19.4%, oklch(47.83% 0.0684 208.36) 22.6%, oklch(50.40% 0.0671 204.26) 25.8%, oklch(52.96% 0.0651 199.54) 29.0%, oklch(55.48% 0.0620 193.33) 32.3%, oklch(57.95% 0.0569 185.14) 35.5%, oklch(60.46% 0.0492 175.75) 38.7%, oklch(62.95% 0.0404 165.22) 41.9%, oklch(65.33% 0.0323 153.51) 45.2%, oklch(67.51% 0.0264 140.62) 48.4%, oklch(69.45% 0.0243 126.15) 51.6%, oklch(71.29% 0.0258 108.68) 54.8%, oklch(72.98% 0.0296 89.61) 58.1%, oklch(74.41% 0.0342 70.79) 61.3%, oklch(75.50% 0.0382 54.04) 64.5%, oklch(76.15% 0.0405 41.21) 67.7%, oklch(76.41% 0.0413 32.83) 71.0%, oklch(76.31% 0.0416 27.20) 74.2%, oklch(75.89% 0.0416 22.35) 77.4%, oklch(75.19% 0.0419 16.33) 80.6%, oklch(74.23% 0.0430 7.19) 83.9%, oklch(72.69% 0.0449 353.61) 87.1%, oklch(70.68% 0.0473 337.33) 90.3%, oklch(68.54% 0.0499 320.72) 93.5%, oklch(66.65% 0.0522 306.18) 96.8%, oklch(65.35% 0.0537 296.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.073 | 253.1 |
| 2 | 0.433 | 0.07 | 217.2 |
| 3 | 0.563 | 0.061 | 190.8 |
| 4 | 0.685 | 0.025 | 133.7 |
| 5 | 0.76 | 0.04 | 44.9 |
| 6 | 0.744 | 0.043 | 9 |
| 7 | 0.654 | 0.054 | -63.9 |

## In these collections

- [Muted rainbow gradients](https://grabient.com/muted-rainbow-gradients)

## Other forms

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