# Navy and violet color palette

The Navy and violet color palette brings together dark blue, purple, light magenta, and pale magenta. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is pale magenta.

- Also called: Analogous navy, purple and pink angular swatches
- Seed: `kWMzrDs0HBs3IwvgukL8pm-I`
- Page: https://grabient.com/kWMzrDs0HBs3IwvgukL8pm-I?style=angularSwatches&steps=5&angle=300
- Drawn as: angular swatches, 5 steps, 300 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#0e0f39` | `oklch(20.08% 0.0799 274.92)` | Grim Reaper | white, 18.3 to 1 |
| 2 | `#4c27a0` | `oklch(40.16% 0.1805 289.72)` | Galactic Purple | white, 9.9 to 1 |
| 3 | `#af54d3` | `oklch(61.02% 0.1998 315.08)` | Medium Orchid | black, 5 to 1 |
| 4 | `#f385d0` | `oklch(75.98% 0.1598 340.44)` | Blushed Bombshell | black, 9 to 1 |
| 5 | `#f8cff8` | `oklch(90.16% 0.0703 325.65)` | Sassy Pink | black, 15.2 to 1 |

## CSS

```css
background: conic-gradient(from 300deg, #0e0f39 0.000% 20.000%, #4c27a0 20.000% 40.000%, #af54d3 40.000% 60.000%, #f385d0 60.000% 80.000%, #f8cff8 80.000% 100.000%);
background: conic-gradient(from 300deg, oklch(20.08% 0.0799 274.92) 0.000% 20.000%, oklch(40.16% 0.1805 289.72) 20.000% 40.000%, oklch(61.02% 0.1998 315.08) 40.000% 60.000%, oklch(75.98% 0.1598 340.44) 60.000% 80.000%, oklch(90.16% 0.0703 325.65) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.08 | 274.9 |
| 2 | 0.402 | 0.181 | 289.7 |
| 3 | 0.61 | 0.2 | 315.1 |
| 4 | 0.76 | 0.16 | 340.4 |
| 5 | 0.902 | 0.07 | 325.6 |

## In these collections

- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Aurora swatches](https://grabient.com/aurora-swatches)

## Other forms

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