# Teal, violet and periwinkle rayman palette

The Teal, violet and periwinkle rayman palette brings together teal, purple, and light blue. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is purple, and its lightest tone is light blue.

- Also called: Vivid teal, purple and blue angular swatches
- Seed: `kSrXSHRkjM9u2vi`
- Page: https://grabient.com/kSrXSHRkjM9u2vi?style=angularSwatches&steps=3&angle=210
- Drawn as: angular swatches, 3 steps, 210 degrees
- Kinds: vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 2 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 | `#00afa8` | `oklch(68.11% 0.1177 189.84)` | Tropical Tree | black, 7.7 to 1 |
| 2 | `#864bd3` | `oklch(55.12% 0.1998 299.75)` | Gloomy Purple | white, 5.3 to 1 |
| 3 | `#9c95fe` | `oklch(72.05% 0.1502 284.95)` | Cobalite | black, 8.1 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #00afa8 0.000% 33.333%, #864bd3 33.333% 66.667%, #9c95fe 66.667% 100.000%);
background: conic-gradient(from 210deg, oklch(68.11% 0.1177 189.84) 0.000% 33.333%, oklch(55.12% 0.1998 299.75) 33.333% 66.667%, oklch(72.05% 0.1502 284.95) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.681 | 0.16 | 189.8 |
| 2 | 0.551 | 0.2 | 299.7 |
| 3 | 0.72 | 0.15 | 285 |

## In these collections

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

## Other forms

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