# Teal Orange Purple Bands

These four diagonal bands move from deep teal through vivid orange, royal purple, and leafy green. The alternating cool and warm regions create sharp separation while preserving the three secondary color families. Use them for event graphics, sports inspired layouts, energetic dashboards, or bold packaging that needs several unmistakable accent roles.

- Also called: Rainbow from teal to green linear swatches
- Seed: `kUdz2A1sMwTXFNBCsSyA`
- Page: https://grabient.com/kUdz2A1sMwTXFNBCsSyA?style=linearSwatches&steps=4&angle=240
- Drawn as: linear swatches, 4 steps, 240 degrees
- Kinds: vivid, rainbow
- Hues: complementary
- 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 | `#02695d` | `oklch(46.85% 0.0841 180.70)` | Bella Vista | white, 6.5 to 1 |
| 2 | `#ef6d00` | `oklch(68.11% 0.1838 48.59)` | Clementine | black, 6.8 to 1 |
| 3 | `#6b1b9a` | `oklch(42.13% 0.1902 308.22)` | Wild Violet | white, 9.3 to 1 |
| 4 | `#2d7d32` | `oklch(52.36% 0.1350 144.42)` | Lush Paradise | white, 5.1 to 1 |

## CSS

```css
background: linear-gradient(240deg, #02695d 0.000% 25.000%, #ef6d00 25.000% 50.000%, #6b1b9a 50.000% 75.000%, #2d7d32 75.000% 100.000%);
background: linear-gradient(240deg, oklch(46.85% 0.0841 180.70) 0.000% 25.000%, oklch(68.11% 0.1838 48.59) 25.000% 50.000%, oklch(42.13% 0.1902 308.22) 50.000% 75.000%, oklch(52.36% 0.1350 144.42) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.469 | 0.084 | 180.7 |
| 2 | 0.681 | 0.185 | 48.6 |
| 3 | 0.421 | 0.19 | -51.8 |
| 4 | 0.524 | 0.135 | -215.6 |

## In these collections

- [Secondary color swatches](https://grabient.com/secondary-color-swatches)

## Other forms

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