# Aubergine and aqua color palette

The Aubergine and aqua color palette brings together dark purple, purple, teal, and light teal. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark purple, and its lightest tone is light teal.

- Also called: Navy, purple, blue and light blue angular swatches
- Seed: `kWNzDRvM0_czRQdXqzRbZ694`
- Page: https://grabient.com/kWNzDRvM0_czRQdXqzRbZ694?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12 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 | `#1c1235` | `oklch(21.65% 0.0661 294.61)` | Midnight Monarch | white, 17.7 to 1 |
| 2 | `#6334c8` | `oklch(47.64% 0.2122 290.38)` | Sagat Purple | white, 7.3 to 1 |
| 3 | `#a34ee7` | `oklch(60.24% 0.2232 306.23)` | Lightish Purple | black, 4.8 to 1 |
| 4 | `#00afc1` | `oklch(68.90% 0.1184 207.96)` | Antigua Blue | black, 7.8 to 1 |
| 5 | `#8de4df` | `oklch(86.22% 0.0841 191.05)` | Aqua Fiesta | black, 14.2 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #1c1235 0.000% 20.000%, #6334c8 20.000% 40.000%, #a34ee7 40.000% 60.000%, #00afc1 60.000% 80.000%, #8de4df 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(21.65% 0.0661 294.61) 0.000% 20.000%, oklch(47.64% 0.2122 290.38) 20.000% 40.000%, oklch(60.24% 0.2232 306.23) 40.000% 60.000%, oklch(68.90% 0.1184 207.96) 60.000% 80.000%, oklch(86.22% 0.0841 191.05) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.066 | 294.6 |
| 2 | 0.476 | 0.212 | 290.4 |
| 3 | 0.602 | 0.223 | 306.2 |
| 4 | 0.689 | 0.119 | 208 |
| 5 | 0.862 | 0.084 | 191 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Bright swatches](https://grabient.com/bright-swatches)

## Other forms

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