# Champagne, emerald and violet rayman palette

The Champagne, emerald and violet rayman palette brings together pale yellow, gold, green, teal, and purple. The colors span a moderate lightness range, combining strong color with clear contrast. Its light and open character suits game interface concepts and stream graphics. Its darkest tone is purple, and its lightest tone is pale yellow.

- Also called: Beige, green, teal and purple linear swatches
- Seed: `kW7BlB6Do_9LFRZVOkXR0jM4`
- Page: https://grabient.com/kW7BlB6Do_9LFRZVOkXR0jM4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.1 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 | `#f0e7ce` | `oklch(92.91% 0.0344 92.11)` | Natural Whisper | black, 17 to 1 |
| 2 | `#e9bf25` | `oklch(81.89% 0.1598 92.11)` | Radiant Sunrise | black, 11.9 to 1 |
| 3 | `#43a924` | `oklch(64.96% 0.1902 139.66)` | Botanical Garden | black, 6.9 to 1 |
| 4 | `#00aba4` | `oklch(66.93% 0.1158 189.33)` | Teal Me No Lies | black, 7.3 to 1 |
| 5 | `#874ed6` | `oklch(55.91% 0.1998 299.23)` | Gloomy Purple | white, 5.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f0e7ce 0.000% 20.000%, #e9bf25 20.000% 40.000%, #43a924 40.000% 60.000%, #00aba4 60.000% 80.000%, #874ed6 80.000% 100.000%);
background: linear-gradient(90deg, oklch(92.91% 0.0344 92.11) 0.000% 20.000%, oklch(81.89% 0.1598 92.11) 20.000% 40.000%, oklch(64.96% 0.1902 139.66) 40.000% 60.000%, oklch(66.93% 0.1158 189.33) 60.000% 80.000%, oklch(55.91% 0.1998 299.23) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.929 | 0.034 | 92.1 |
| 2 | 0.819 | 0.16 | 92.1 |
| 3 | 0.65 | 0.19 | 139.7 |
| 4 | 0.669 | 0.16 | 189.3 |
| 5 | 0.559 | 0.2 | 299.2 |

## In these collections

- [Rayman swatches](https://grabient.com/rayman-swatches)

## Other forms

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