# Aubergine, turquoise and stone color palette

The Aubergine, turquoise and stone color palette brings together dark purple, purple, teal, light teal, and light gray. 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 purple, and its lightest tone is light teal.

- Also called: Navy, purple, blue and gray angular swatches
- Seed: `kWPDjRP0zAV0stVtpL34YbIo`
- Page: https://grabient.com/kWPDjRP0zAV0stVtpL34YbIo?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.6 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 | `#21143e` | `oklch(23.62% 0.0772 293.91)` | Prune Plum | white, 16.9 to 1 |
| 2 | `#7336c8` | `oklch(49.61% 0.2108 297.08)` | Sagat Purple | white, 6.7 to 1 |
| 3 | `#17bdd0` | `oklch(73.23% 0.1226 207.25)` | Holiday Blue | black, 9.2 to 1 |
| 4 | `#7be7e1` | `oklch(86.22% 0.1006 190.34)` | Blue Crystal Landscape | black, 14.3 to 1 |
| 5 | `#aeb4bf` | `oklch(76.77% 0.0179 264.32)` | Glistening Grey | black, 10 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #21143e 0.000% 20.000%, #7336c8 20.000% 40.000%, #17bdd0 40.000% 60.000%, #7be7e1 60.000% 80.000%, #aeb4bf 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(23.62% 0.0772 293.91) 0.000% 20.000%, oklch(49.61% 0.2108 297.08) 20.000% 40.000%, oklch(73.23% 0.1226 207.25) 40.000% 60.000%, oklch(86.22% 0.1006 190.34) 60.000% 80.000%, oklch(76.77% 0.0179 264.32) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.236 | 0.077 | 293.9 |
| 2 | 0.496 | 0.211 | 297.1 |
| 3 | 0.732 | 0.123 | 207.3 |
| 4 | 0.862 | 0.101 | 190.3 |
| 5 | 0.768 | 0.018 | 264.3 |

## In these collections

- [Rayman swatches](https://grabient.com/rayman-swatches)
- [Locker sticker collage](https://grabient.com/locker-sticker-collage)

## Other forms

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