# Retro teal violet diagonal

Yellow, teal, blue and purple linear gradient with 32 colors: #f4d547, #e4d448, #d0d24c, #b7d055, #99cc61, #78c76e, #51c07c, #17b789, #00aa94, #009c99, #00909c, #00849d, #00799f, #006fa2, #1d65a1, #2d5d9d, #37579a, #3e5398, #445196, #494f95, #4e4f95, #535096, #575198, #5b539a, #60559c, #64589f, #675ba2, #6b5da5, #6e60a8, #7161aa, #7463ac, #7664ac. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Yellow, teal, blue and purple linear gradient
- Seed: `kS3nJEvCpTUYow-`
- Page: https://grabient.com/kS3nJEvCpTUYow-?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: light to dark, cool, multicolor
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 5 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 | `#f4d547` | `oklch(87.40% 0.1571 96.33)` | Anna Banana | black, 14.4 to 1 |
| 2 | `#e4d448` | `oklch(85.85% 0.1555 102.52)` | Aurora | black, 13.8 to 1 |
| 3 | `#d0d24c` | `oklch(83.84% 0.1535 110.39)` | Southern Platyfish | black, 13 to 1 |
| 4 | `#b7d055` | `oklch(81.43% 0.1511 119.68)` | Citrus Leaf | black, 12.1 to 1 |
| 5 | `#99cc61` | `oklch(78.70% 0.1484 130.18)` | Bright Lettuce | black, 11.1 to 1 |
| 6 | `#78c76e` | `oklch(75.73% 0.1455 141.62)` | Emerald Rain | black, 10.1 to 1 |
| 7 | `#51c07c` | `oklch(72.57% 0.1424 153.79)` | Heart Chakra | black, 9.1 to 1 |
| 8 | `#17b789` | `oklch(69.31% 0.1391 166.45)` | Green Velour | black, 8.1 to 1 |
| 9 | `#00aa94` | `oklch(66.01% 0.1203 179.34)` | Shindig | black, 7.1 to 1 |
| 10 | `#009c99` | `oklch(62.74% 0.1076 192.26)` | Caribbean Turquoise | black, 6.2 to 1 |
| 11 | `#00909c` | `oklch(59.58% 0.1017 204.95)` | Coral Coast | black, 5.4 to 1 |
| 12 | `#00849d` | `oklch(56.59% 0.1012 217.19)` | Zircon Blue | black, 4.7 to 1 |
| 13 | `#00799f` | `oklch(53.86% 0.1058 228.72)` | Mitchell Blue | white, 4.9 to 1 |
| 14 | `#006fa2` | `oklch(51.44% 0.1165 239.32)` | Cat’s Purr | white, 5.5 to 1 |
| 15 | `#1d65a1` | `oklch(49.40% 0.1185 248.71)` | LED Blue | white, 6.1 to 1 |
| 16 | `#2d5d9d` | `oklch(47.83% 0.1165 256.72)` | Neptune Blue | white, 6.6 to 1 |
| 17 | `#37579a` | `oklch(46.78% 0.1151 263.20)` | Muted Lavender | white, 6.9 to 1 |
| 18 | `#3e5398` | `oklch(46.14% 0.1139 268.67)` | Crushed Velvet | white, 7.2 to 1 |
| 19 | `#445196` | `oklch(45.88% 0.1129 273.32)` | Crushed Velvet | white, 7.3 to 1 |
| 20 | `#494f95` | `oklch(45.93% 0.1122 277.22)` | Crushed Velvet | white, 7.3 to 1 |
| 21 | `#4e4f95` | `oklch(46.25% 0.1117 280.46)` | Liberty | white, 7.2 to 1 |
| 22 | `#535096` | `oklch(46.81% 0.1114 283.10)` | Blue Ember | white, 7.1 to 1 |
| 23 | `#575198` | `oklch(47.55% 0.1112 285.22)` | Coronation Blue | white, 6.9 to 1 |
| 24 | `#5b539a` | `oklch(48.43% 0.1111 286.91)` | Coronation Blue | white, 6.6 to 1 |
| 25 | `#60559c` | `oklch(49.41% 0.1111 288.23)` | Purple Opulence | white, 6.3 to 1 |
| 26 | `#64589f` | `oklch(50.44% 0.1112 289.28)` | Purple Opulence | white, 6.1 to 1 |
| 27 | `#675ba2` | `oklch(51.47% 0.1113 290.12)` | Giant Onion | white, 5.8 to 1 |
| 28 | `#6b5da5` | `oklch(52.46% 0.1115 290.83)` | Giant Onion | white, 5.6 to 1 |
| 29 | `#6e60a8` | `oklch(53.36% 0.1116 291.49)` | Genestealer Purple | white, 5.4 to 1 |
| 30 | `#7161aa` | `oklch(54.14% 0.1117 292.17)` | Genestealer Purple | white, 5.2 to 1 |
| 31 | `#7463ac` | `oklch(54.74% 0.1117 292.97)` | Genestealer Purple | white, 5.1 to 1 |
| 32 | `#7664ac` | `oklch(55.12% 0.1116 293.94)` | Genestealer Purple | white, 5 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f4d547 0.0%, #e4d448 3.2%, #d0d24c 6.5%, #b7d055 9.7%, #99cc61 12.9%, #78c76e 16.1%, #51c07c 19.4%, #17b789 22.6%, #00aa94 25.8%, #009c99 29.0%, #00909c 32.3%, #00849d 35.5%, #00799f 38.7%, #006fa2 41.9%, #1d65a1 45.2%, #2d5d9d 48.4%, #37579a 51.6%, #3e5398 54.8%, #445196 58.1%, #494f95 61.3%, #4e4f95 64.5%, #535096 67.7%, #575198 71.0%, #5b539a 74.2%, #60559c 77.4%, #64589f 80.6%, #675ba2 83.9%, #6b5da5 87.1%, #6e60a8 90.3%, #7161aa 93.5%, #7463ac 96.8%, #7664ac 100.0%);
background: linear-gradient(45deg in oklch, oklch(87.40% 0.1571 96.33) 0.0%, oklch(85.85% 0.1555 102.52) 3.2%, oklch(83.84% 0.1535 110.39) 6.5%, oklch(81.43% 0.1511 119.68) 9.7%, oklch(78.70% 0.1484 130.18) 12.9%, oklch(75.73% 0.1455 141.62) 16.1%, oklch(72.57% 0.1424 153.79) 19.4%, oklch(69.31% 0.1391 166.45) 22.6%, oklch(66.01% 0.1203 179.34) 25.8%, oklch(62.74% 0.1076 192.26) 29.0%, oklch(59.58% 0.1017 204.95) 32.3%, oklch(56.59% 0.1012 217.19) 35.5%, oklch(53.86% 0.1058 228.72) 38.7%, oklch(51.44% 0.1165 239.32) 41.9%, oklch(49.40% 0.1185 248.71) 45.2%, oklch(47.83% 0.1165 256.72) 48.4%, oklch(46.78% 0.1151 263.20) 51.6%, oklch(46.14% 0.1139 268.67) 54.8%, oklch(45.88% 0.1129 273.32) 58.1%, oklch(45.93% 0.1122 277.22) 61.3%, oklch(46.25% 0.1117 280.46) 64.5%, oklch(46.81% 0.1114 283.10) 67.7%, oklch(47.55% 0.1112 285.22) 71.0%, oklch(48.43% 0.1111 286.91) 74.2%, oklch(49.41% 0.1111 288.23) 77.4%, oklch(50.44% 0.1112 289.28) 80.6%, oklch(51.47% 0.1113 290.12) 83.9%, oklch(52.46% 0.1115 290.83) 87.1%, oklch(53.36% 0.1116 291.49) 90.3%, oklch(54.14% 0.1117 292.17) 93.5%, oklch(54.74% 0.1117 292.97) 96.8%, oklch(55.12% 0.1116 293.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.157 | 96.3 |
| 2 | 0.472 | 0.116 | 260.1 |
| 3 | 0.551 | 0.112 | 293.9 |

## In these collections

- [Throwback kid](https://grabient.com/throwback-kid)

## Other forms

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