# Navy, mustard and pale aqua cyberpunk palette

The Navy, mustard and pale aqua cyberpunk palette brings together dark blue, black, gold, teal, and off-white. 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 black, and its lightest tone is off-white.

- Also called: Navy, yellow, teal and light blue linear swatches
- Seed: `kWOFC5DIe3GXFNxZSMn-Ie_4`
- Page: https://grabient.com/kWOFC5DIe3GXFNxZSMn-Ie_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 17.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 | `#001644` | `oklch(22.07% 0.0920 260.39)` | Cetacean Blue | white, 17.4 to 1 |
| 2 | `#000404` | `oklch(9.93% 0.0176 184.46)` | Armour Wash | white, 20.5 to 1 |
| 3 | `#c5c600` | `oklch(79.92% 0.1746 110.10)` | Key Lime Pie | black, 11.4 to 1 |
| 4 | `#00b5b5` | `oklch(70.08% 0.1197 194.64)` | Cyan Sky | black, 8.3 to 1 |
| 5 | `#dff3f2` | `oklch(94.88% 0.0207 194.64)` | Bone-Chilling | black, 18.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001644 0.000% 20.000%, #000404 20.000% 40.000%, #c5c600 40.000% 60.000%, #00b5b5 60.000% 80.000%, #dff3f2 80.000% 100.000%);
background: linear-gradient(90deg, oklch(22.07% 0.0920 260.39) 0.000% 20.000%, oklch(9.93% 0.0176 184.46) 20.000% 40.000%, oklch(79.92% 0.1746 110.10) 40.000% 60.000%, oklch(70.08% 0.1197 194.64) 60.000% 80.000%, oklch(94.88% 0.0207 194.64) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.11 | 260.2 |
| 2 | 0.098 | 0.021 | 185.1 |
| 3 | 0.799 | 0.19 | 110.1 |
| 4 | 0.701 | 0.2 | 194.6 |
| 5 | 0.949 | 0.021 | 194.6 |

## In these collections

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

## Other forms

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