# Navy and violet analogous palette

The Navy and violet analogous palette brings together dark blue, purple, and light magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and campaign graphics. Its darkest tone is dark blue, and its lightest tone is light magenta.

- Also called: Vivid analogous navy, purple and pink linear swatches
- Seed: `kSMl6-xE5DuomQ8`
- Page: https://grabient.com/kSMl6-xE5DuomQ8?style=linearSwatches&steps=3&angle=180
- Drawn as: linear swatches, 3 steps, 180 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.8 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 | `#05014e` | `oklch(19.69% 0.1295 267.89)` | Night Blue | white, 18.7 to 1 |
| 2 | `#8340d5` | `oklch(53.54% 0.2150 299.59)` | Thick Purple | white, 5.7 to 1 |
| 3 | `#f2b0e7` | `oklch(83.46% 0.1047 332.35)` | Hanami Pink | black, 12 to 1 |

## CSS

```css
background: linear-gradient(180deg, #05014e 0.000% 33.333%, #8340d5 33.333% 66.667%, #f2b0e7 66.667% 100.000%);
background: linear-gradient(180deg, oklch(19.69% 0.1295 267.89) 0.000% 33.333%, oklch(53.54% 0.2150 299.59) 33.333% 66.667%, oklch(83.46% 0.1047 332.35) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.13 | 267.9 |
| 2 | 0.535 | 0.215 | 299.6 |
| 3 | 0.835 | 0.105 | 332.4 |

## In these collections

- [Analogous swatches](https://grabient.com/analogous-swatches)

## Other forms

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