# Navy, violet and blush cyberpunk palette

The Navy, violet and blush cyberpunk palette brings together blue, purple, and magenta. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is magenta.

- Also called: Vivid analogous blue, purple and pink linear swatches
- Seed: `kUU3q-OFjBEjZxJbx0Ng`
- Page: https://grabient.com/kUU3q-OFjBEjZxJbx0Ng?style=linearSwatches&steps=4&angle=45
- Drawn as: linear swatches, 4 steps, 45 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.7 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 | `#112288` | `oklch(32.68% 0.1681 267.19)` | Naval Adventures | white, 13 to 1 |
| 2 | `#3f24d4` | `oklch(44.09% 0.2439 276.70)` | Blue Copper Ore | white, 8.7 to 1 |
| 3 | `#ac2dd6` | `oklch(57.09% 0.2467 315.80)` | Telemagenta | white, 5 to 1 |
| 4 | `#f669c0` | `oklch(72.05% 0.1957 345.39)` | Crumbly Lipstick | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #112288 0.000% 25.000%, #3f24d4 25.000% 50.000%, #ac2dd6 50.000% 75.000%, #f669c0 75.000% 100.000%);
background: linear-gradient(45deg, oklch(32.68% 0.1681 267.19) 0.000% 25.000%, oklch(44.09% 0.2439 276.70) 25.000% 50.000%, oklch(57.09% 0.2467 315.80) 50.000% 75.000%, oklch(72.05% 0.1957 345.39) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.327 | 0.168 | 267.2 |
| 2 | 0.441 | 0.244 | 276.7 |
| 3 | 0.571 | 0.247 | 315.8 |
| 4 | 0.72 | 0.196 | 345.4 |

## In these collections

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

## Other forms

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