# Orange, teal and wine color palette

The Orange, teal and wine color palette brings together orange, blue, yellow, and dark magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark magenta, and its lightest tone is yellow.

- Also called: Rainbow from orange to purple linear swatches
- Seed: `kUvJElQkivPA6LClK7KA`
- Page: https://grabient.com/kUvJElQkivPA6LClK7KA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#ff8526` | `oklch(74.01% 0.1772 52.03)` | Fluorescent Red Orange | black, 8.6 to 1 |
| 2 | `#4157d9` | `oklch(51.97% 0.1998 270.43)` | Warm Blue | white, 5.8 to 1 |
| 3 | `#ebdc4c` | `oklch(88.19% 0.1598 103.46)` | Orb of Harmony | black, 14.8 to 1 |
| 4 | `#530133` | `oklch(29.13% 0.1199 350.39)` | Mulberry Wood | white, 14.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ff8526 0.000% 25.000%, #4157d9 25.000% 50.000%, #ebdc4c 50.000% 75.000%, #530133 75.000% 100.000%);
background: linear-gradient(90deg, oklch(74.01% 0.1772 52.03) 0.000% 25.000%, oklch(51.97% 0.1998 270.43) 25.000% 50.000%, oklch(88.19% 0.1598 103.46) 50.000% 75.000%, oklch(29.13% 0.1199 350.39) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.74 | 0.2 | 52 |
| 2 | 0.52 | 0.2 | -89.6 |
| 3 | 0.882 | 0.16 | -256.5 |
| 4 | 0.291 | 0.12 | -369.6 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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