# Tritone cyan, blue and purple linear gradient

Tritone cyan, blue and purple linear gradient with 7 colors: #33d7d0, #3fc2aa, #18a6af, #587dbc, #785fad, #9a4c99, #c04383. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWy12H2Sk-0smyVEL0YST7Eo`
- Page: https://grabient.com/kWy12H2Sk-0smyVEL0YST7Eo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid
- Hues: two-hue
- 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 | `#33d7d0` | `oklch(79.92% 0.1281 190.55)` | Turquoise Panic | black, 11.8 to 1 |
| 2 | `#3fc2aa` | `oklch(73.81% 0.1180 177.98)` | Melbourne Cup | black, 9.5 to 1 |
| 3 | `#18a6af` | `oklch(66.29% 0.1090 201.90)` | Blue Bolero | black, 7.1 to 1 |
| 4 | `#587dbc` | `oklch(59.06% 0.1061 260.29)` | Blue Iolite | black, 5 to 1 |
| 5 | `#785fad` | `oklch(54.48% 0.1192 296.69)` | Genestealer Purple | white, 5.1 to 1 |
| 6 | `#9a4c99` | `oklch(54.30% 0.1439 327.81)` | Hyacinth Violet | white, 5.3 to 1 |
| 7 | `#c04383` | `oklch(57.48% 0.1722 352.23)` | Orchid Ecstasy | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #33d7d0 0.0%, #3fc2aa 16.7%, #18a6af 33.3%, #587dbc 50.0%, #785fad 66.7%, #9a4c99 83.3%, #c04383 100.0%);
background: linear-gradient(90deg in oklch, oklch(79.92% 0.1281 190.55) 0.0%, oklch(73.81% 0.1180 177.98) 16.7%, oklch(66.29% 0.1090 201.90) 33.3%, oklch(59.06% 0.1061 260.29) 50.0%, oklch(54.48% 0.1192 296.69) 66.7%, oklch(54.30% 0.1439 327.81) 83.3%, oklch(57.48% 0.1722 352.23) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.128 | 190.5 |
| 2 | 0.701 | 0.113 | 181 |
| 3 | 0.591 | 0.106 | 260.3 |
| 4 | 0.535 | 0.13 | 312.1 |
| 5 | 0.575 | 0.172 | 352.2 |

## In these collections

- [Retro swatches](https://grabient.com/retro-swatches)

## Other forms

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