# Violet and navy color palette

The Violet and navy color palette brings together purple and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is purple.

- Also called: Analogous purple and navy linear swatches
- Seed: `kUl5jgusa-qwzPsmoD2g`
- Page: https://grabient.com/kUl5jgusa-qwzPsmoD2g?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 3 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 | `#ad4ad1` | `oklch(59.45% 0.2094 315.70)` | Purple Yam | black, 4.6 to 1 |
| 2 | `#8c37be` | `oklch(51.92% 0.2039 309.79)` | Dreamscape Purple | white, 6.1 to 1 |
| 3 | `#6827a2` | `oklch(43.54% 0.1860 303.32)` | Wild Violet | white, 8.7 to 1 |
| 4 | `#4b2181` | `oklch(36.44% 0.1518 298.12)` | Occult | white, 11.4 to 1 |
| 5 | `#33246a` | `oklch(32.20% 0.1170 287.79)` | Dark Dreams | white, 13.1 to 1 |
| 6 | `#24285a` | `oklch(30.31% 0.0882 276.60)` | Deep Breath | white, 13.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #ad4ad1 0.000% 16.667%, #8c37be 16.667% 33.333%, #6827a2 33.333% 50.000%, #4b2181 50.000% 66.667%, #33246a 66.667% 83.333%, #24285a 83.333% 100.000%);
background: linear-gradient(180deg, oklch(59.45% 0.2094 315.70) 0.000% 16.667%, oklch(51.92% 0.2039 309.79) 16.667% 33.333%, oklch(43.54% 0.1860 303.32) 33.333% 50.000%, oklch(36.44% 0.1518 298.12) 50.000% 66.667%, oklch(32.20% 0.1170 287.79) 66.667% 83.333%, oklch(30.31% 0.0882 276.60) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.594 | 0.209 | 315.7 |
| 2 | 0.461 | 0.194 | 305.1 |
| 3 | 0.346 | 0.141 | 295.6 |
| 4 | 0.303 | 0.088 | 276.6 |

## In these collections

- [Jewel tone swatches](https://grabient.com/jewel-tone-swatches)
- [Jewel tones](https://grabient.com/jewel-tones)

## Other forms

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