# Teal, plum and ochre color palette

The Teal, plum and ochre color palette brings together teal, dark purple, magenta, red, and gold. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark purple, and its lightest tone is gold.

- Also called: Vivid teal, purple, magenta and orange linear gradient
- Seed: `kYvF-FOhrECWlyi-w0R08HF-s7xU`
- Page: https://grabient.com/kYvF-FOhrECWlyi-w0R08HF-s7xU?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 8.7 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 | `#00c5b8` | `oklch(74.02% 0.1292 187.03)` | Swimmers Pool | black, 9.6 to 1 |
| 2 | `#00b9b2` | `oklch(70.92% 0.1224 190.11)` | Super Rare Jade | black, 8.5 to 1 |
| 3 | `#03a9a8` | `oklch(66.54% 0.1134 193.87)` | Jade Orchid | black, 7.2 to 1 |
| 4 | `#13969b` | `oklch(61.39% 0.1013 198.53)` | Sea Fantasy | black, 5.8 to 1 |
| 5 | `#1a838d` | `oklch(55.98% 0.0894 204.29)` | True Teal | black, 4.6 to 1 |
| 6 | `#1d7180` | `oklch(50.82% 0.0796 211.37)` | Billabong | white, 5.6 to 1 |
| 7 | `#1c6376` | `oklch(46.41% 0.0736 219.98)` | Holiday Velvet | white, 6.8 to 1 |
| 8 | `#1c566f` | `oklch(42.73% 0.0723 230.90)` | Canoe Blue | white, 8 to 1 |
| 9 | `#1e496a` | `oklch(39.02% 0.0739 244.73)` | Terror From the Deep | white, 9.5 to 1 |
| 10 | `#233b64` | `oklch(35.55% 0.0779 260.24)` | Midnight Sleigh | white, 11.1 to 1 |
| 11 | `#2a2f5e` | `oklch(32.61% 0.0839 276.17)` | Galaxea | white, 12.6 to 1 |
| 12 | `#312459` | `oklch(30.51% 0.0913 291.26)` | Cluedo Night | white, 13.8 to 1 |
| 13 | `#381b54` | `oklch(29.53% 0.0998 304.24)` | Fabric of Space | white, 14.4 to 1 |
| 14 | `#411753` | `oklch(30.03% 0.1096 314.10)` | Plunged Into Darkness | white, 14.2 to 1 |
| 15 | `#4e1558` | `oklch(32.14% 0.1228 321.51)` | Shani Purple | white, 13.3 to 1 |
| 16 | `#5e1560` | `oklch(35.41% 0.1382 327.30)` | Purple Velour | white, 11.9 to 1 |
| 17 | `#711769` | `oklch(39.35% 0.1540 332.23)` | Purple Curse | white, 10.3 to 1 |
| 18 | `#861b72` | `oklch(43.47% 0.1685 337.08)` | Noble Plum | white, 8.7 to 1 |
| 19 | `#991e76` | `oklch(47.28% 0.1799 342.62)` | Haunted Purple | white, 7.4 to 1 |
| 20 | `#ab2174` | `oklch(50.36% 0.1868 349.53)` | Carroburg Crimson | white, 6.5 to 1 |
| 21 | `#ba276d` | `oklch(53.12% 0.1897 357.30)` | Chaotic Roses | white, 5.8 to 1 |
| 22 | `#c72f64` | `oklch(55.75% 0.1898 5.56)` | Spicy Berry | white, 5.2 to 1 |
| 23 | `#d23a58` | `oklch(58.32% 0.1880 14.07)` | Match Head | white, 4.6 to 1 |
| 24 | `#dc474c` | `oklch(60.90% 0.1852 22.61)` | Re-Entry | black, 5 to 1 |
| 25 | `#e4543f` | `oklch(63.54% 0.1823 30.95)` | Tiger Lily | black, 5.6 to 1 |
| 26 | `#eb6232` | `oklch(66.32% 0.1802 38.89)` | Teri-Gaki Persimmon | black, 6.3 to 1 |
| 27 | `#f27323` | `oklch(69.49% 0.1778 47.14)` | Vivid Tangelo | black, 7.2 to 1 |
| 28 | `#f88413` | `oklch(72.92% 0.1749 55.68)` | Glorious Sunset | black, 8.3 to 1 |
| 29 | `#fc9606` | `oklch(76.37% 0.1717 64.03)` | Aromango | black, 9.5 to 1 |
| 30 | `#fea70e` | `oklch(79.58% 0.1685 71.66)` | Chrome Yellow | black, 10.7 to 1 |
| 31 | `#ffb51e` | `oklch(82.29% 0.1658 78.08)` | Tōō Gold | black, 11.9 to 1 |
| 32 | `#ffc02a` | `oklch(84.25% 0.1638 82.77)` | Not Yo Cheese | black, 12.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00c5b8 0.0%, #00b9b2 3.2%, #03a9a8 6.5%, #13969b 9.7%, #1a838d 12.9%, #1d7180 16.1%, #1c6376 19.4%, #1c566f 22.6%, #1e496a 25.8%, #233b64 29.0%, #2a2f5e 32.3%, #312459 35.5%, #381b54 38.7%, #411753 41.9%, #4e1558 45.2%, #5e1560 48.4%, #711769 51.6%, #861b72 54.8%, #991e76 58.1%, #ab2174 61.3%, #ba276d 64.5%, #c72f64 67.7%, #d23a58 71.0%, #dc474c 74.2%, #e4543f 77.4%, #eb6232 80.6%, #f27323 83.9%, #f88413 87.1%, #fc9606 90.3%, #fea70e 93.5%, #ffb51e 96.8%, #ffc02a 100.0%);
background: linear-gradient(90deg in oklch, oklch(74.02% 0.1292 187.03) 0.0%, oklch(70.92% 0.1224 190.11) 3.2%, oklch(66.54% 0.1134 193.87) 6.5%, oklch(61.39% 0.1013 198.53) 9.7%, oklch(55.98% 0.0894 204.29) 12.9%, oklch(50.82% 0.0796 211.37) 16.1%, oklch(46.41% 0.0736 219.98) 19.4%, oklch(42.73% 0.0723 230.90) 22.6%, oklch(39.02% 0.0739 244.73) 25.8%, oklch(35.55% 0.0779 260.24) 29.0%, oklch(32.61% 0.0839 276.17) 32.3%, oklch(30.51% 0.0913 291.26) 35.5%, oklch(29.53% 0.0998 304.24) 38.7%, oklch(30.03% 0.1096 314.10) 41.9%, oklch(32.14% 0.1228 321.51) 45.2%, oklch(35.41% 0.1382 327.30) 48.4%, oklch(39.35% 0.1540 332.23) 51.6%, oklch(43.47% 0.1685 337.08) 54.8%, oklch(47.28% 0.1799 342.62) 58.1%, oklch(50.36% 0.1868 349.53) 61.3%, oklch(53.12% 0.1897 357.30) 64.5%, oklch(55.75% 0.1898 5.56) 67.7%, oklch(58.32% 0.1880 14.07) 71.0%, oklch(60.90% 0.1852 22.61) 74.2%, oklch(63.54% 0.1823 30.95) 77.4%, oklch(66.32% 0.1802 38.89) 80.6%, oklch(69.49% 0.1778 47.14) 83.9%, oklch(72.92% 0.1749 55.68) 87.1%, oklch(76.37% 0.1717 64.03) 90.3%, oklch(79.58% 0.1685 71.66) 93.5%, oklch(82.29% 0.1658 78.08) 96.8%, oklch(84.25% 0.1638 82.77) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.74 | 0.131 | 187 |
| 2 | 0.457 | 0.073 | 221.9 |
| 3 | 0.295 | 0.103 | 308.6 |
| 4 | 0.492 | 0.185 | 346.6 |
| 5 | 0.657 | 0.181 | 397.3 |
| 6 | 0.843 | 0.164 | 442.8 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [Day of the Dead gradients](https://grabient.com/day-of-the-dead-gradients)

## Other forms

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