# Teal, off-white, peach and red linear gradient

Teal, off-white, peach and red linear gradient with 7 colors: #3baea6, #b7e0d0, #f9ecd8, #febf9e, #fe8d72, #ef5b58, #b93549. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `karkqGbxG9viLNVsnzxYLQ-NTCvtDvT7g`
- Page: https://grabient.com/karkqGbxG9viLNVsnzxYLQ-NTCvtDvT7g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, warm, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.9 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 | `#3baea6` | `oklch(68.50% 0.1020 188.44)` | Waterfall | black, 7.7 to 1 |
| 2 | `#b7e0d0` | `oklch(87.40% 0.0482 169.42)` | Jade Sea | black, 14.6 to 1 |
| 3 | `#f9ecd8` | `oklch(94.88% 0.0303 79.59)` | Ajo Lily | black, 18 to 1 |
| 4 | `#febf9e` | `oklch(85.43% 0.0854 48.95)` | Blushing Cinnamon | black, 13.1 to 1 |
| 5 | `#fe8d72` | `oklch(75.98% 0.1433 34.15)` | Alexandria | black, 9.2 to 1 |
| 6 | `#ef5b58` | `oklch(66.54% 0.1833 24.64)` | Amour | black, 6.3 to 1 |
| 7 | `#b93549` | `oklch(53.15% 0.1681 16.19)` | Rust Effect | white, 5.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3baea6 0.0%, #b7e0d0 16.7%, #f9ecd8 33.3%, #febf9e 50.0%, #fe8d72 66.7%, #ef5b58 83.3%, #b93549 100.0%);
background: linear-gradient(90deg in oklch, oklch(68.50% 0.1020 188.44) 0.0%, oklch(87.40% 0.0482 169.42) 16.7%, oklch(94.88% 0.0303 79.59) 33.3%, oklch(85.43% 0.0854 48.95) 50.0%, oklch(75.98% 0.1433 34.15) 66.7%, oklch(66.54% 0.1833 24.64) 83.3%, oklch(53.15% 0.1681 16.19) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.685 | 0.102 | 188.4 |
| 2 | 0.874 | 0.048 | 169.4 |
| 3 | 0.949 | 0.03 | 79.6 |
| 4 | 0.854 | 0.085 | 48.9 |
| 5 | 0.76 | 0.143 | 34.2 |
| 6 | 0.665 | 0.183 | 24.6 |
| 7 | 0.531 | 0.168 | 16.2 |

## In these collections

- [Coral color palette](https://grabient.com/coral-color-palette)

## Other forms

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