# Gray, blue, green and purple linear gradient

Gray, blue, green and purple linear gradient with 32 colors: #c5d4c5, #b5c8bb, #9eb8af, #85a3a1, #6d8c94, #5a7686, #4d6278, #43546e, #3c4d69, #354d6a, #2b536e, #1e5e70, #166a6d, #257566, #3d7d5c, #4f8154, #568151, #568050, #517d52, #4a7956, #42755a, #3b705e, #366b61, #346765, #336469, #35616e, #3b5d72, #445975, #4e5575, #565273, #5d4f6f, #614d6b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW2RNntZLNscgMe8lEXuZPOI`
- Page: https://grabient.com/kW2RNntZLNscgMe8lEXuZPOI?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.6 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 | `#c5d4c5` | `oklch(85.43% 0.0262 145.55)` | Juniper Mist | black, 13.5 to 1 |
| 2 | `#b5c8bb` | `oklch(81.55% 0.0281 156.56)` | Misty Morning | black, 11.9 to 1 |
| 3 | `#9eb8af` | `oklch(75.92% 0.0305 173.08)` | Tropical Bay | black, 9.8 to 1 |
| 4 | `#85a3a1` | `oklch(69.20% 0.0334 192.87)` | Venus Teal | black, 7.7 to 1 |
| 5 | `#6d8c94` | `oklch(62.02% 0.0367 213.64)` | Blue Shoal | black, 5.8 to 1 |
| 6 | `#5a7686` | `oklch(55.04% 0.0403 233.15)` | Ocean Shadow | white, 4.7 to 1 |
| 7 | `#4d6278` | `oklch(48.90% 0.0441 249.12)` | Night Market | white, 6.2 to 1 |
| 8 | `#43546e` | `oklch(44.25% 0.0480 259.31)` | Champlain Blue | white, 7.6 to 1 |
| 9 | `#3c4d69` | `oklch(41.72% 0.0520 261.43)` | Calico Dress | white, 8.5 to 1 |
| 10 | `#354d6a` | `oklch(41.35% 0.0570 254.16)` | Deep Royal | white, 8.6 to 1 |
| 11 | `#2b536e` | `oklch(42.61% 0.0630 239.52)` | Diver Lady | white, 8.1 to 1 |
| 12 | `#1e5e70` | `oklch(44.99% 0.0693 220.11)` | Deep Blue Sea | white, 7.2 to 1 |
| 13 | `#166a6d` | `oklch(47.99% 0.0755 198.52)` | Mayan Blue | white, 6.3 to 1 |
| 14 | `#257566` | `oklch(51.08% 0.0810 177.37)` | Nordic Forest | white, 5.4 to 1 |
| 15 | `#3d7d5c` | `oklch(53.76% 0.0852 159.24)` | Liquid Green Stuff | white, 4.8 to 1 |
| 16 | `#4f8154` | `oklch(55.53% 0.0877 146.75)` | Rambling Green | black, 4.6 to 1 |
| 17 | `#568151` | `oklch(55.98% 0.0880 141.80)` | Rambling Green | black, 4.6 to 1 |
| 18 | `#568050` | `oklch(55.60% 0.0857 141.56)` | Rambling Green | black, 4.6 to 1 |
| 19 | `#517d52` | `oklch(54.66% 0.0816 144.82)` | Melbourne | white, 4.7 to 1 |
| 20 | `#4a7956` | `oklch(53.34% 0.0763 150.96)` | Como | white, 5 to 1 |
| 21 | `#42755a` | `oklch(51.81% 0.0703 159.32)` | Scouring Rush | white, 5.3 to 1 |
| 22 | `#3b705e` | `oklch(50.27% 0.0645 169.28)` | Foliage Green | white, 5.7 to 1 |
| 23 | `#366b61` | `oklch(48.88% 0.0594 180.18)` | Seiheki Green | white, 6 to 1 |
| 24 | `#346765` | `oklch(47.83% 0.0557 191.38)` | Magnetic Green | white, 6.3 to 1 |
| 25 | `#336469` | `oklch(47.17% 0.0537 203.57)` | Deep Marine | white, 6.6 to 1 |
| 26 | `#35616e` | `oklch(46.66% 0.0526 219.02)` | Bermudan Blue | white, 6.7 to 1 |
| 27 | `#3b5d72` | `oklch(46.27% 0.0522 236.65)` | Superior Blue | white, 6.9 to 1 |
| 28 | `#445975` | `oklch(45.97% 0.0523 255.23)` | Chambray | white, 7.1 to 1 |
| 29 | `#4e5575` | `oklch(45.75% 0.0527 273.55)` | Alpha Centauri | white, 7.2 to 1 |
| 30 | `#565273` | `oklch(45.57% 0.0532 290.37)` | Exotic Evening | white, 7.3 to 1 |
| 31 | `#5d4f6f` | `oklch(45.42% 0.0536 304.47)` | Futaai Indigo | white, 7.4 to 1 |
| 32 | `#614d6b` | `oklch(45.28% 0.0537 314.63)` | Futaai Indigo | white, 7.5 to 1 |

## CSS

```css
background: linear-gradient(225deg, #c5d4c5 0.0%, #b5c8bb 3.2%, #9eb8af 6.5%, #85a3a1 9.7%, #6d8c94 12.9%, #5a7686 16.1%, #4d6278 19.4%, #43546e 22.6%, #3c4d69 25.8%, #354d6a 29.0%, #2b536e 32.3%, #1e5e70 35.5%, #166a6d 38.7%, #257566 41.9%, #3d7d5c 45.2%, #4f8154 48.4%, #568151 51.6%, #568050 54.8%, #517d52 58.1%, #4a7956 61.3%, #42755a 64.5%, #3b705e 67.7%, #366b61 71.0%, #346765 74.2%, #336469 77.4%, #35616e 80.6%, #3b5d72 83.9%, #445975 87.1%, #4e5575 90.3%, #565273 93.5%, #5d4f6f 96.8%, #614d6b 100.0%);
background: linear-gradient(225deg in oklch, oklch(85.43% 0.0262 145.55) 0.0%, oklch(81.55% 0.0281 156.56) 3.2%, oklch(75.92% 0.0305 173.08) 6.5%, oklch(69.20% 0.0334 192.87) 9.7%, oklch(62.02% 0.0367 213.64) 12.9%, oklch(55.04% 0.0403 233.15) 16.1%, oklch(48.90% 0.0441 249.12) 19.4%, oklch(44.25% 0.0480 259.31) 22.6%, oklch(41.72% 0.0520 261.43) 25.8%, oklch(41.35% 0.0570 254.16) 29.0%, oklch(42.61% 0.0630 239.52) 32.3%, oklch(44.99% 0.0693 220.11) 35.5%, oklch(47.99% 0.0755 198.52) 38.7%, oklch(51.08% 0.0810 177.37) 41.9%, oklch(53.76% 0.0852 159.24) 45.2%, oklch(55.53% 0.0877 146.75) 48.4%, oklch(55.98% 0.0880 141.80) 51.6%, oklch(55.60% 0.0857 141.56) 54.8%, oklch(54.66% 0.0816 144.82) 58.1%, oklch(53.34% 0.0763 150.96) 61.3%, oklch(51.81% 0.0703 159.32) 64.5%, oklch(50.27% 0.0645 169.28) 67.7%, oklch(48.88% 0.0594 180.18) 71.0%, oklch(47.83% 0.0557 191.38) 74.2%, oklch(47.17% 0.0537 203.57) 77.4%, oklch(46.66% 0.0526 219.02) 80.6%, oklch(46.27% 0.0522 236.65) 83.9%, oklch(45.97% 0.0523 255.23) 87.1%, oklch(45.75% 0.0527 273.55) 90.3%, oklch(45.57% 0.0532 290.37) 93.5%, oklch(45.42% 0.0536 304.47) 96.8%, oklch(45.28% 0.0537 314.63) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.854 | 0.026 | 145.5 |
| 2 | 0.421 | 0.051 | 261.8 |
| 3 | 0.559 | 0.088 | 143.4 |
| 4 | 0.476 | 0.055 | 194.2 |
| 5 | 0.453 | 0.054 | 314.6 |

## Other forms

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