# Complementary purple, pink and teal linear gradient

Complementary purple, pink and teal linear gradient with 8 colors: #4d1833, #752644, #9f3b5c, #b15070, #745568, #44626c, #127579, #0d5b64. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcTT_6sqnA7-xwDHrz_PhK9jyOMZBHj2NxnAo`
- Page: https://grabient.com/kcTT_6sqnA7-xwDHrz_PhK9jyOMZBHj2NxnAo?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.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 | `#4d1833` | `oklch(30.31% 0.0868 352.27)` | Chilli Black Red | white, 14 to 1 |
| 2 | `#752644` | `oklch(39.76% 0.1144 0.72)` | Palace Red | white, 9.9 to 1 |
| 3 | `#9f3b5c` | `oklch(50.00% 0.1364 2.83)` | Boysenberry Pink | white, 6.4 to 1 |
| 4 | `#b15070` | `oklch(56.30% 0.1295 1.78)` | Diva Glam | white, 4.9 to 1 |
| 5 | `#745568` | `oklch(48.82% 0.0510 341.70)` | Hothouse Orchid | white, 6.4 to 1 |
| 6 | `#44626c` | `oklch(47.64% 0.0386 220.17)` | Tempe Star | white, 6.5 to 1 |
| 7 | `#127579` | `oklch(51.18% 0.0827 200.09)` | Maxi Teal | white, 5.4 to 1 |
| 8 | `#0d5b64` | `oklch(43.31% 0.0703 206.43)` | Enamelled Jewel | white, 7.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #4d1833 0.0%, #752644 14.3%, #9f3b5c 28.6%, #b15070 42.9%, #745568 57.1%, #44626c 71.4%, #127579 85.7%, #0d5b64 100.0%);
background: linear-gradient(90deg in oklch, oklch(30.31% 0.0868 352.27) 0.0%, oklch(39.76% 0.1144 0.72) 14.3%, oklch(50.00% 0.1364 2.83) 28.6%, oklch(56.30% 0.1295 1.78) 42.9%, oklch(48.82% 0.0510 341.70) 57.1%, oklch(47.64% 0.0386 220.17) 71.4%, oklch(51.18% 0.0827 200.09) 85.7%, oklch(43.31% 0.0703 206.43) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.303 | 0.087 | 352.3 |
| 2 | 0.398 | 0.114 | 360.7 |
| 3 | 0.5 | 0.136 | 362.8 |
| 4 | 0.563 | 0.13 | 361.8 |
| 5 | 0.488 | 0.051 | 341.7 |
| 6 | 0.476 | 0.039 | 220.2 |
| 7 | 0.512 | 0.083 | 200.1 |
| 8 | 0.433 | 0.07 | 206.4 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [Pink and teal gradients](https://grabient.com/pink-and-teal-gradients)

## Other forms

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