# Navy and lavender color palette

The Navy and lavender color palette brings together dark blue, purple, pale purple, magenta, and light purple. 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 blue, and its lightest tone is pale purple.

- Also called: Navy, purple and lavender angular swatches
- Seed: `kYPUHNP8jA_KSQRO0EELbbA2Ckvo`
- Page: https://grabient.com/kYPUHNP8jA_KSQRO0EELbbA2Ckvo?style=angularSwatches&steps=6&angle=135
- Drawn as: angular swatches, 6 steps, 135 degrees
- Kinds: light center, vivid, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#1f1446` | `oklch(24.02% 0.0896 288.28)` | Shadow Planet | white, 16.8 to 1 |
| 2 | `#723cc4` | `oklch(50.00% 0.1998 296.74)` | Purple Rain | white, 6.6 to 1 |
| 3 | `#e7d7f9` | `oklch(90.16% 0.0496 306.25)` | Pouty Purple | black, 15.4 to 1 |
| 4 | `#b74ddd` | `oklch(61.81% 0.2205 315.76)` | Ultraviolet Onsible | black, 5.1 to 1 |
| 5 | `#5f1268` | `oklch(35.83% 0.1502 323.15)` | Purple Dreamer | white, 11.8 to 1 |
| 6 | `#c69fe0` | `oklch(75.98% 0.1006 311.53)` | Silver Rust | black, 9.4 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #1f1446 0.000% 16.667%, #723cc4 16.667% 33.333%, #e7d7f9 33.333% 50.000%, #b74ddd 50.000% 66.667%, #5f1268 66.667% 83.333%, #c69fe0 83.333% 100.000%);
background: conic-gradient(from 135deg, oklch(24.02% 0.0896 288.28) 0.000% 16.667%, oklch(50.00% 0.1998 296.74) 16.667% 33.333%, oklch(90.16% 0.0496 306.25) 33.333% 50.000%, oklch(61.81% 0.2205 315.76) 50.000% 66.667%, oklch(35.83% 0.1502 323.15) 66.667% 83.333%, oklch(75.98% 0.1006 311.53) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.09 | 288.3 |
| 2 | 0.5 | 0.2 | 296.7 |
| 3 | 0.902 | 0.05 | 306.2 |
| 4 | 0.618 | 0.22 | 315.8 |
| 5 | 0.358 | 0.15 | 323.2 |
| 6 | 0.76 | 0.101 | 311.5 |

## In these collections

- [Violet swatches](https://grabient.com/violet-swatches)
- [Purple swatches](https://grabient.com/purple-swatches)

## Other forms

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