# Gray, mauve, blue and teal linear gradient

Gray, mauve, blue and teal linear gradient with 32 colors: #9daaab, #98a8ac, #95a4b0, #979eb2, #9e96ae, #a78da3, #ad8594, #af8085, #af7a7d, #af747e, #aa6f8a, #9e6d9d, #876fb0, #6575ba, #377bb7, #007fa6, #007d96, #007b8d, #007887, #007483, #007081, #006c7f, #00697d, #00657a, #006175, #005d71, #00596c, #005568, #005163, #004e60, #004b5c, #00495a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWuQuNURfU8Ysrc7KT9r7xAI`
- Page: https://grabient.com/kWuQuNURfU8Ysrc7KT9r7xAI?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: light to dark, vivid, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.1 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 | `#9daaab` | `oklch(72.83% 0.0152 198.28)` | Horizon Grey | black, 8.7 to 1 |
| 2 | `#98a8ac` | `oklch(72.11% 0.0191 214.90)` | Celestra Grey | black, 8.5 to 1 |
| 3 | `#95a4b0` | `oklch(71.13% 0.0242 239.66)` | Cadet Grey | black, 8.2 to 1 |
| 4 | `#979eb2` | `oklch(69.97% 0.0304 269.28)` | Screen Test | black, 7.8 to 1 |
| 5 | `#9e96ae` | `oklch(68.68% 0.0372 300.50)` | Night Music | black, 7.3 to 1 |
| 6 | `#a78da3` | `oklch(67.33% 0.0445 330.03)` | Mauve Musk | black, 6.9 to 1 |
| 7 | `#ad8594` | `oklch(65.98% 0.0520 354.61)` | Keepsake Rose | black, 6.5 to 1 |
| 8 | `#af8085` | `oklch(64.68% 0.0594 10.94)` | Audrey’s Blush | black, 6.2 to 1 |
| 9 | `#af7a7d` | `oklch(63.49% 0.0665 15.79)` | Taffeta Darling | black, 5.9 to 1 |
| 10 | `#af747e` | `oklch(62.36% 0.0744 8.24)` | French Marron | black, 5.6 to 1 |
| 11 | `#aa6f8a` | `oklch(61.24% 0.0830 351.06)` | Mauve Orchid | black, 5.3 to 1 |
| 12 | `#9e6d9d` | `oklch(60.12% 0.0919 327.33)` | Scotch Thistle | black, 5.1 to 1 |
| 13 | `#876fb0` | `oklch(59.01% 0.1006 300.17)` | Fairy Wren | black, 4.9 to 1 |
| 14 | `#6575ba` | `oklch(57.90% 0.1087 272.64)` | Flood | black, 4.7 to 1 |
| 15 | `#377bb7` | `oklch(56.79% 0.1156 247.86)` | Mykonos | black, 4.6 to 1 |
| 16 | `#007fa6` | `oklch(55.68% 0.1097 228.93)` | Advertising Blue | white, 4.5 to 1 |
| 17 | `#007d96` | `oklch(54.56% 0.0981 218.11)` | Mosaic Blue | white, 4.7 to 1 |
| 18 | `#007b8d` | `oklch(53.45% 0.0933 212.31)` | Bimini Blue | white, 4.9 to 1 |
| 19 | `#007887` | `oklch(52.34% 0.0905 209.98)` | Biscay Bay | white, 5.2 to 1 |
| 20 | `#007483` | `oklch(51.23% 0.0887 210.22)` | Deep Current | white, 5.4 to 1 |
| 21 | `#007081` | `oklch(50.12% 0.0874 212.09)` | Caribbean Dream | white, 5.7 to 1 |
| 22 | `#006c7f` | `oklch(49.00% 0.0864 214.68)` | Shinbashi Azure | white, 6 to 1 |
| 23 | `#00697d` | `oklch(47.88% 0.0856 217.08)` | Caribbean Splash | white, 6.3 to 1 |
| 24 | `#00657a` | `oklch(46.75% 0.0842 218.35)` | Striking | white, 6.6 to 1 |
| 25 | `#006175` | `oklch(45.56% 0.0820 218.35)` | Ocean Radiance | white, 7 to 1 |
| 26 | `#005d71` | `oklch(44.26% 0.0798 218.48)` | Bosporus | white, 7.4 to 1 |
| 27 | `#00596c` | `oklch(42.91% 0.0775 218.76)` | Sea Creature | white, 7.9 to 1 |
| 28 | `#005568` | `oklch(41.56% 0.0752 219.13)` | Plunge | white, 8.4 to 1 |
| 29 | `#005163` | `oklch(40.27% 0.0731 219.55)` | Sandalwood Grey Blue | white, 8.8 to 1 |
| 30 | `#004e60` | `oklch(39.11% 0.0712 219.96)` | Raging Thunderstorm | white, 9.3 to 1 |
| 31 | `#004b5c` | `oklch(38.14% 0.0696 220.30)` | Nocturnal Expedition | white, 9.7 to 1 |
| 32 | `#00495a` | `oklch(37.41% 0.0684 220.52)` | Midnight Green | white, 10 to 1 |

## CSS

```css
background: linear-gradient(225deg, #9daaab 0.0%, #98a8ac 3.2%, #95a4b0 6.5%, #979eb2 9.7%, #9e96ae 12.9%, #a78da3 16.1%, #ad8594 19.4%, #af8085 22.6%, #af7a7d 25.8%, #af747e 29.0%, #aa6f8a 32.3%, #9e6d9d 35.5%, #876fb0 38.7%, #6575ba 41.9%, #377bb7 45.2%, #007fa6 48.4%, #007d96 51.6%, #007b8d 54.8%, #007887 58.1%, #007483 61.3%, #007081 64.5%, #006c7f 67.7%, #00697d 71.0%, #00657a 74.2%, #006175 77.4%, #005d71 80.6%, #00596c 83.9%, #005568 87.1%, #005163 90.3%, #004e60 93.5%, #004b5c 96.8%, #00495a 100.0%);
background: linear-gradient(225deg in oklch, oklch(72.83% 0.0152 198.28) 0.0%, oklch(72.11% 0.0191 214.90) 3.2%, oklch(71.13% 0.0242 239.66) 6.5%, oklch(69.97% 0.0304 269.28) 9.7%, oklch(68.68% 0.0372 300.50) 12.9%, oklch(67.33% 0.0445 330.03) 16.1%, oklch(65.98% 0.0520 354.61) 19.4%, oklch(64.68% 0.0594 10.94) 22.6%, oklch(63.49% 0.0665 15.79) 25.8%, oklch(62.36% 0.0744 8.24) 29.0%, oklch(61.24% 0.0830 351.06) 32.3%, oklch(60.12% 0.0919 327.33) 35.5%, oklch(59.01% 0.1006 300.17) 38.7%, oklch(57.90% 0.1087 272.64) 41.9%, oklch(56.79% 0.1156 247.86) 45.2%, oklch(55.68% 0.1097 228.93) 48.4%, oklch(54.56% 0.0981 218.11) 51.6%, oklch(53.45% 0.0933 212.31) 54.8%, oklch(52.34% 0.0905 209.98) 58.1%, oklch(51.23% 0.0887 210.22) 61.3%, oklch(50.12% 0.0874 212.09) 64.5%, oklch(49.00% 0.0864 214.68) 67.7%, oklch(47.88% 0.0856 217.08) 71.0%, oklch(46.75% 0.0842 218.35) 74.2%, oklch(45.56% 0.0820 218.35) 77.4%, oklch(44.26% 0.0798 218.48) 80.6%, oklch(42.91% 0.0775 218.76) 83.9%, oklch(41.56% 0.0752 219.13) 87.1%, oklch(40.27% 0.0731 219.55) 90.3%, oklch(39.11% 0.0712 219.96) 93.5%, oklch(38.14% 0.0696 220.30) 96.8%, oklch(37.41% 0.0684 220.52) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.728 | 0.015 | 198.3 |
| 2 | 0.638 | 0.065 | 375.8 |
| 3 | 0.551 | 0.123 | 222.6 |
| 4 | 0.465 | 0.113 | 218.4 |
| 5 | 0.374 | 0.165 | 220.5 |

## Other forms

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