# Navy and violet blue and purple palette

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

- Also called: Analogous navy and purple radial swatches
- Seed: `kYSz-5riVAzEsQc0M0IO7XA8ssQE`
- Page: https://grabient.com/kYSz-5riVAzEsQc0M0IO7XA8ssQE?style=radialSwatches&steps=6
- Drawn as: radial swatches, 6 steps, 90 degrees
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.2 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 | `#112a57` | `oklch(29.53% 0.0868 260.86)` | Dark Tyrian Blue | white, 13.9 to 1 |
| 2 | `#273973` | `oklch(36.22% 0.1020 268.26)` | Blue Expanse | white, 10.9 to 1 |
| 3 | `#3f3681` | `oklch(38.58% 0.1213 284.11)` | Majestic Eggplant | white, 10.1 to 1 |
| 4 | `#5a3188` | `oklch(40.94% 0.1406 302.07)` | Purple Patch | white, 9.4 to 1 |
| 5 | `#743c96` | `oklch(46.85% 0.1474 310.53)` | Perkin Mauve | white, 7.4 to 1 |
| 6 | `#9766b0` | `oklch(59.06% 0.1213 313.70)` | Knight Elf | black, 4.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #112a57 0.000% 16.667%, #273973 16.667% 33.333%, #3f3681 33.333% 50.000%, #5a3188 50.000% 66.667%, #743c96 66.667% 83.333%, #9766b0 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(29.53% 0.0868 260.86) 0.000% 16.667%, oklch(36.22% 0.1020 268.26) 16.667% 33.333%, oklch(38.58% 0.1213 284.11) 33.333% 50.000%, oklch(40.94% 0.1406 302.07) 50.000% 66.667%, oklch(46.85% 0.1474 310.53) 66.667% 83.333%, oklch(59.06% 0.1213 313.70) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.295 | 0.087 | 260.9 |
| 2 | 0.362 | 0.102 | 268.3 |
| 3 | 0.386 | 0.121 | 284.1 |
| 4 | 0.409 | 0.141 | 302.1 |
| 5 | 0.469 | 0.147 | 310.5 |
| 6 | 0.591 | 0.121 | 313.7 |

## In these collections

- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)

## Other forms

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