# Navy, violet and turquoise color palette

The Navy, violet and turquoise color palette brings together dark blue, blue, purple, magenta, and teal. 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 teal.

- Also called: Navy, purple, pink and teal radial swatches
- Seed: `kWQCi_QkI_cHLxBRUscXiwtA`
- Page: https://grabient.com/kWQCi_QkI_cHLxBRUscXiwtA?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: dark to light, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 7.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 | `#17203c` | `oklch(25.20% 0.0551 268.59)` | Nightwalker | white, 16 to 1 |
| 2 | `#315fd0` | `oklch(51.97% 0.1819 264.37)` | Janitor | white, 5.7 to 1 |
| 3 | `#7c3ccb` | `oklch(51.57% 0.2081 299.24)` | Purple Rain | white, 6.2 to 1 |
| 4 | `#ef3487` | `oklch(63.78% 0.2274 359.47)` | Cerise Pink | black, 5.4 to 1 |
| 5 | `#1fc1c9` | `oklch(74.02% 0.1213 199.90)` | Turquoise Surf | black, 9.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #17203c 0.000% 20.000%, #315fd0 20.000% 40.000%, #7c3ccb 40.000% 60.000%, #ef3487 60.000% 80.000%, #1fc1c9 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(25.20% 0.0551 268.59) 0.000% 20.000%, oklch(51.97% 0.1819 264.37) 20.000% 40.000%, oklch(51.57% 0.2081 299.24) 40.000% 60.000%, oklch(63.78% 0.2274 359.47) 60.000% 80.000%, oklch(74.02% 0.1213 199.90) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.055 | 268.6 |
| 2 | 0.52 | 0.182 | 264.4 |
| 3 | 0.516 | 0.208 | 299.2 |
| 4 | 0.638 | 0.227 | 359.5 |
| 5 | 0.74 | 0.121 | 199.9 |

## In these collections

- [Aurora swatches](https://grabient.com/aurora-swatches)
- [Locker sticker collage](https://grabient.com/locker-sticker-collage)

## Other forms

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