# Teal, gray, purple and pink linear gradient

Teal, gray, purple and pink linear gradient with 7 colors: #316266, #adc0aa, #ddaa9e, #4b4d99, #82487f, #b1626e, #d27a82. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWdieQb44zTosKxFJUmVihBg`
- Page: https://grabient.com/kWdieQb44zTosKxFJUmVihBg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#316266` | `oklch(46.46% 0.0537 202.50)` | Deep Marine | white, 6.8 to 1 |
| 2 | `#adc0aa` | `oklch(78.67% 0.0369 140.46)` | Young Gecko | black, 10.8 to 1 |
| 3 | `#ddaa9e` | `oklch(78.05% 0.0627 32.56)` | Tamanegi Peel | black, 10.2 to 1 |
| 4 | `#4b4d99` | `oklch(45.67% 0.1213 279.29)` | Liberty | white, 7.4 to 1 |
| 5 | `#82487f` | `oklch(49.21% 0.1101 329.00)` | Visiona Red | white, 6.5 to 1 |
| 6 | `#b1626e` | `oklch(58.94% 0.1030 10.76)` | Cherry Kisses | black, 4.8 to 1 |
| 7 | `#d27a82` | `oklch(67.72% 0.1102 14.40)` | Victorian Rouge | black, 6.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #316266 0.0%, #adc0aa 16.7%, #ddaa9e 33.3%, #4b4d99 50.0%, #82487f 66.7%, #b1626e 83.3%, #d27a82 100.0%);
background: linear-gradient(90deg in oklch, oklch(46.46% 0.0537 202.50) 0.0%, oklch(78.67% 0.0369 140.46) 16.7%, oklch(78.05% 0.0627 32.56) 33.3%, oklch(45.67% 0.1213 279.29) 50.0%, oklch(49.21% 0.1101 329.00) 66.7%, oklch(58.94% 0.1030 10.76) 83.3%, oklch(67.72% 0.1102 14.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.465 | 0.054 | 202.5 |
| 2 | 0.878 | 0.039 | 95.8 |
| 3 | 0.457 | 0.121 | -80.7 |
| 4 | 0.543 | 0.102 | 0.7 |
| 5 | 0.677 | 0.11 | 14.4 |

## In these collections

- [Late winter protea](https://grabient.com/late-winter-protea)

## Other forms

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