# Complementary teal, gray and red linear gradient

Complementary teal, gray and red linear gradient with 7 colors: #147f78, #55a7b6, #8cc0ac, #c4ab90, #e37d56, #d44f34, #a73f29. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWiUGF3pxCOARL7TPzwQLO_g`
- Page: https://grabient.com/kWiUGF3pxCOARL7TPzwQLO_g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 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 | `#147f78` | `oklch(53.94% 0.0896 187.73)` | Coelia Greenshade | white, 4.8 to 1 |
| 2 | `#55a7b6` | `oklch(68.26% 0.0831 211.30)` | Blue Calypso | black, 7.5 to 1 |
| 3 | `#8cc0ac` | `oklch(76.66% 0.0626 168.67)` | Spearmint Frosting | black, 10.2 to 1 |
| 4 | `#c4ab90` | `oklch(75.59% 0.0469 69.38)` | Brown Owl | black, 9.5 to 1 |
| 5 | `#e37d56` | `oklch(69.51% 0.1373 41.47)` | Tangerine Flake | black, 7.3 to 1 |
| 6 | `#d44f34` | `oklch(60.28% 0.1736 33.25)` | Glazed Persimmon | black, 4.9 to 1 |
| 7 | `#a73f29` | `oklch(50.79% 0.1419 33.45)` | Chocolate Chilli | white, 6.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #147f78 0.0%, #55a7b6 16.7%, #8cc0ac 33.3%, #c4ab90 50.0%, #e37d56 66.7%, #d44f34 83.3%, #a73f29 100.0%);
background: linear-gradient(90deg in oklch, oklch(53.94% 0.0896 187.73) 0.0%, oklch(68.26% 0.0831 211.30) 16.7%, oklch(76.66% 0.0626 168.67) 33.3%, oklch(75.59% 0.0469 69.38) 50.0%, oklch(69.51% 0.1373 41.47) 66.7%, oklch(60.28% 0.1736 33.25) 83.3%, oklch(50.79% 0.1419 33.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.539 | 0.09 | 187.7 |
| 2 | 0.744 | 0.077 | 206.8 |
| 3 | 0.756 | 0.047 | 69.4 |
| 4 | 0.654 | 0.174 | 36.6 |
| 5 | 0.508 | 0.142 | 33.4 |

## In these collections

- [Complementary swatches](https://grabient.com/complementary-swatches)

## Other forms

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