# Gray, dark green, light blue and black linear gradient

Gray, dark green, light blue and black linear gradient with 7 colors: #d2dce2, #4f6a71, #315e3b, #d69646, #7be1ca, #6a87a3, #08090a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW4gqmMBI7lussPmHVMEYFBo`
- Page: https://grabient.com/kW4gqmMBI7lussPmHVMEYFBo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center
- Hues: wide
- Contrast of its darkest and lightest colors: 14.3 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 | `#d2dce2` | `oklch(88.98% 0.0138 233.44)` | Skyscraper | black, 15.1 to 1 |
| 2 | `#4f6a71` | `oklch(50.42% 0.0336 216.80)` | Jabłoński Grey | white, 5.8 to 1 |
| 3 | `#315e3b` | `oklch(43.85% 0.0755 150.15)` | Verde Garrafa | white, 7.5 to 1 |
| 4 | `#d69646` | `oklch(72.05% 0.1226 69.64)` | Georgian Yellow | black, 8.2 to 1 |
| 5 | `#7be1ca` | `oklch(84.06% 0.1010 177.63)` | Sea Foam | black, 13.4 to 1 |
| 6 | `#6a87a3` | `oklch(61.21% 0.0539 247.68)` | Moody Indigo | black, 5.6 to 1 |
| 7 | `#08090a` | `oklch(13.78% 0.0028 246.12)` | Reversed Grey | white, 19.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d2dce2 0.0%, #4f6a71 16.7%, #315e3b 33.3%, #d69646 50.0%, #7be1ca 66.7%, #6a87a3 83.3%, #08090a 100.0%);
background: linear-gradient(90deg in oklch, oklch(88.98% 0.0138 233.44) 0.0%, oklch(50.42% 0.0336 216.80) 16.7%, oklch(43.85% 0.0755 150.15) 33.3%, oklch(72.05% 0.1226 69.64) 50.0%, oklch(84.06% 0.1010 177.63) 66.7%, oklch(61.21% 0.0539 247.68) 83.3%, oklch(13.78% 0.0028 246.12) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.89 | 0.014 | 233.4 |
| 2 | 0.378 | 0.05 | 196.5 |
| 3 | 0.72 | 0.123 | 69.6 |
| 4 | 0.803 | 0.08 | 231.3 |
| 5 | 0.138 | 0.003 | 246.1 |

## Other forms

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