# Gray, teal, yellow and blue linear gradient

Gray, teal, yellow and blue linear gradient with 7 colors: #e9e0c4, #6e9588, #21556d, #429b6b, #ffc94c, #78da9d, #6aa8d9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU5hxBthjQe22rpaI1Kg`
- Page: https://grabient.com/kU5hxBthjQe22rpaI1Kg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, pastel, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#e9e0c4` | `oklch(90.55% 0.0386 92.11)` | Sailcloth | black, 15.8 to 1 |
| 2 | `#6e9588` | `oklch(63.80% 0.0479 171.04)` | Up North | black, 6.3 to 1 |
| 3 | `#21556d` | `oklch(42.52% 0.0675 231.60)` | Newport Grey | white, 8.1 to 1 |
| 4 | `#429b6b` | `oklch(62.33% 0.1140 156.97)` | Bulma Hair | black, 6.1 to 1 |
| 5 | `#ffc94c` | `oklch(86.22% 0.1500 84.72)` | Chunky Bee | black, 13.7 to 1 |
| 6 | `#78da9d` | `oklch(81.27% 0.1285 154.79)` | Enchanted Emerald | black, 12.3 to 1 |
| 7 | `#6aa8d9` | `oklch(70.87% 0.0965 243.22)` | Baja Blue | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e9e0c4 0.0%, #6e9588 16.7%, #21556d 33.3%, #429b6b 50.0%, #ffc94c 66.7%, #78da9d 83.3%, #6aa8d9 100.0%);
background: linear-gradient(90deg in oklch, oklch(90.55% 0.0386 92.11) 0.0%, oklch(63.80% 0.0479 171.04) 16.7%, oklch(42.52% 0.0675 231.60) 33.3%, oklch(62.33% 0.1140 156.97) 50.0%, oklch(86.22% 0.1500 84.72) 66.7%, oklch(81.27% 0.1285 154.79) 83.3%, oklch(70.87% 0.0965 243.22) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.906 | 0.039 | 92.1 |
| 2 | 0.425 | 0.068 | 231.6 |
| 3 | 0.862 | 0.15 | 84.7 |
| 4 | 0.709 | 0.096 | 243.2 |

## Other forms

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