# Blue, green and gray linear gradient

Blue, green and gray linear gradient with 32 colors: #7b88bd, #7c8bc1, #7e90c7, #8094cd, #7f97d1, #7c96d3, #7592d4, #6d8dd3, #6587d1, #5f81cc, #5d7ac6, #5d73bd, #5b6db3, #566caa, #4d6fa2, #4a7596, #527a89, #5f7e81, #66827e, #67897c, #6a9174, #729767, #7d995b, #849655, #859154, #828c57, #7a885c, #6f8463, #63806d, #5e7974, #607174, #626c70. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcojvCVqG_M4sP7EpEAyYu29IhuHLlcAQoVLg`
- Page: https://grabient.com/kcojvCVqG_M4sP7EpEAyYu29IhuHLlcAQoVLg?steps=32&angle=315
- Drawn as: linear gradient, 32 steps, 315 degrees
- Kinds: cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 1.8 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 | `#7b88bd` | `oklch(63.78% 0.0813 272.81)` | Iolite | black, 6.1 to 1 |
| 2 | `#7c8bc1` | `oklch(64.68% 0.0827 271.73)` | Larkspur Bouquet | black, 6.3 to 1 |
| 3 | `#7e90c7` | `oklch(66.06% 0.0845 270.14)` | Pansy Garden | black, 6.7 to 1 |
| 4 | `#8094cd` | `oklch(67.38% 0.0871 268.43)` | Purple Gentian | black, 7 to 1 |
| 5 | `#7f97d1` | `oklch(68.11% 0.0905 266.95)` | Purple Gentian | black, 7.2 to 1 |
| 6 | `#7c96d3` | `oklch(67.79% 0.0955 265.96)` | Purple Gentian | black, 7.1 to 1 |
| 7 | `#7592d4` | `oklch(66.58% 0.1033 265.24)` | Organza Violet | black, 6.8 to 1 |
| 8 | `#6d8dd3` | `oklch(64.84% 0.1118 264.73)` | Royal Regatta | black, 6.3 to 1 |
| 9 | `#6587d1` | `oklch(62.93% 0.1186 264.44)` | Livid | black, 5.9 to 1 |
| 10 | `#5f81cc` | `oklch(61.18% 0.1213 264.40)` | Bodega Bay | black, 5.5 to 1 |
| 11 | `#5d7ac6` | `oklch(59.26% 0.1203 266.54)` | Indigo Light | black, 5 to 1 |
| 12 | `#5d73bd` | `oklch(57.16% 0.1166 269.83)` | Gladiola Blue | black, 4.6 to 1 |
| 13 | `#5b6db3` | `oklch(55.30% 0.1105 271.45)` | Loch Ness | white, 4.8 to 1 |
| 14 | `#566caa` | `oklch(54.10% 0.1020 268.53)` | Evening Lagoon | white, 5.1 to 1 |
| 15 | `#4d6fa2` | `oklch(53.89% 0.0895 258.50)` | Chesty Bond | white, 5 to 1 |
| 16 | `#4a7596` | `oklch(54.50% 0.0705 242.12)` | Hammerhead Shark | white, 4.9 to 1 |
| 17 | `#527a89` | `oklch(55.63% 0.0506 222.51)` | Rocky Hill | white, 4.6 to 1 |
| 18 | `#5f7e81` | `oklch(56.96% 0.0358 202.79)` | Refuge | black, 4.7 to 1 |
| 19 | `#66827e` | `oklch(58.25% 0.0322 185.81)` | Aspen Valley | black, 5 to 1 |
| 20 | `#67897c` | `oklch(59.97% 0.0427 169.12)` | Garland | black, 5.4 to 1 |
| 21 | `#6a9174` | `oklch(61.92% 0.0613 152.74)` | Watercress | black, 5.9 to 1 |
| 22 | `#729767` | `oklch(63.61% 0.0802 138.45)` | Van Gogh Olives | black, 6.3 to 1 |
| 23 | `#7d995b` | `oklch(64.53% 0.0917 128.05)` | Pine Leaves | black, 6.5 to 1 |
| 24 | `#849655` | `oklch(64.35% 0.0920 121.66)` | Bold Avocado | black, 6.4 to 1 |
| 25 | `#859154` | `oklch(63.36% 0.0857 117.90)` | Vintage Vibe | black, 6.2 to 1 |
| 26 | `#828c57` | `oklch(61.89% 0.0757 117.86)` | Special Ops | black, 5.8 to 1 |
| 27 | `#7a885c` | `oklch(60.29% 0.0648 122.68)` | Fern Canopy | black, 5.4 to 1 |
| 28 | `#6f8463` | `oklch(58.81% 0.0551 134.13)` | Bladerunner | black, 5.1 to 1 |
| 29 | `#63806d` | `oklch(57.06% 0.0439 156.01)` | Jadite | black, 4.8 to 1 |
| 30 | `#5e7974` | `oklch(55.19% 0.0319 183.17)` | Refreshing Green | white, 4.7 to 1 |
| 31 | `#607174` | `oklch(53.52% 0.0212 208.86)` | Riverway | white, 5.1 to 1 |
| 32 | `#626c70` | `oklch(52.36% 0.0138 226.32)` | Cat Person | white, 5.4 to 1 |

## CSS

```css
background: linear-gradient(315deg, #7b88bd 0.0%, #7c8bc1 3.2%, #7e90c7 6.5%, #8094cd 9.7%, #7f97d1 12.9%, #7c96d3 16.1%, #7592d4 19.4%, #6d8dd3 22.6%, #6587d1 25.8%, #5f81cc 29.0%, #5d7ac6 32.3%, #5d73bd 35.5%, #5b6db3 38.7%, #566caa 41.9%, #4d6fa2 45.2%, #4a7596 48.4%, #527a89 51.6%, #5f7e81 54.8%, #66827e 58.1%, #67897c 61.3%, #6a9174 64.5%, #729767 67.7%, #7d995b 71.0%, #849655 74.2%, #859154 77.4%, #828c57 80.6%, #7a885c 83.9%, #6f8463 87.1%, #63806d 90.3%, #5e7974 93.5%, #607174 96.8%, #626c70 100.0%);
background: linear-gradient(315deg in oklch, oklch(63.78% 0.0813 272.81) 0.0%, oklch(64.68% 0.0827 271.73) 3.2%, oklch(66.06% 0.0845 270.14) 6.5%, oklch(67.38% 0.0871 268.43) 9.7%, oklch(68.11% 0.0905 266.95) 12.9%, oklch(67.79% 0.0955 265.96) 16.1%, oklch(66.58% 0.1033 265.24) 19.4%, oklch(64.84% 0.1118 264.73) 22.6%, oklch(62.93% 0.1186 264.44) 25.8%, oklch(61.18% 0.1213 264.40) 29.0%, oklch(59.26% 0.1203 266.54) 32.3%, oklch(57.16% 0.1166 269.83) 35.5%, oklch(55.30% 0.1105 271.45) 38.7%, oklch(54.10% 0.1020 268.53) 41.9%, oklch(53.89% 0.0895 258.50) 45.2%, oklch(54.50% 0.0705 242.12) 48.4%, oklch(55.63% 0.0506 222.51) 51.6%, oklch(56.96% 0.0358 202.79) 54.8%, oklch(58.25% 0.0322 185.81) 58.1%, oklch(59.97% 0.0427 169.12) 61.3%, oklch(61.92% 0.0613 152.74) 64.5%, oklch(63.61% 0.0802 138.45) 67.7%, oklch(64.53% 0.0917 128.05) 71.0%, oklch(64.35% 0.0920 121.66) 74.2%, oklch(63.36% 0.0857 117.90) 77.4%, oklch(61.89% 0.0757 117.86) 80.6%, oklch(60.29% 0.0648 122.68) 83.9%, oklch(58.81% 0.0551 134.13) 87.1%, oklch(57.06% 0.0439 156.01) 90.3%, oklch(55.19% 0.0319 183.17) 93.5%, oklch(53.52% 0.0212 208.86) 96.8%, oklch(52.36% 0.0138 226.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.638 | 0.081 | 272.8 |
| 2 | 0.681 | 0.092 | 266.5 |
| 3 | 0.614 | 0.121 | 264.4 |
| 4 | 0.539 | 0.099 | 266.5 |
| 5 | 0.579 | 0.032 | 190.4 |
| 6 | 0.646 | 0.092 | 127 |
| 7 | 0.594 | 0.059 | 128 |
| 8 | 0.524 | 0.014 | 226.3 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)
- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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