# Near-black and blue cyberpunk palette

The Near-black and blue cyberpunk palette brings together dark blue, blue, teal, and pale teal. 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 dark blue, and its lightest tone is pale teal.

- Also called: Black, navy and light blue linear swatches
- Seed: `kWIxq4pSC_kdIwBnszteQ2_Y`
- Page: https://grabient.com/kWIxq4pSC_kdIwBnszteQ2_Y?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 17.5 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 | `#020817` | `oklch(13.78% 0.0358 259.45)` | Melanophobia | white, 19.9 to 1 |
| 2 | `#072b57` | `oklch(29.13% 0.0896 256.28)` | Dark Tyrian Blue | white, 14.1 to 1 |
| 3 | `#036ee6` | `oklch(55.91% 0.1998 257.34)` | Níu Zǎi Sè Denim | white, 4.7 to 1 |
| 4 | `#27d7ff` | `oklch(81.50% 0.1406 218.24)` | Neon Blue | black, 12.2 to 1 |
| 5 | `#d4f7ff` | `oklch(95.28% 0.0372 214.01)` | Fishious Rend | black, 18.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #020817 0.000% 20.000%, #072b57 20.000% 40.000%, #036ee6 40.000% 60.000%, #27d7ff 60.000% 80.000%, #d4f7ff 80.000% 100.000%);
background: linear-gradient(180deg, oklch(13.78% 0.0358 259.45) 0.000% 20.000%, oklch(29.13% 0.0896 256.28) 20.000% 40.000%, oklch(55.91% 0.1998 257.34) 40.000% 60.000%, oklch(81.50% 0.1406 218.24) 60.000% 80.000%, oklch(95.28% 0.0372 214.01) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.138 | 0.036 | 259.5 |
| 2 | 0.291 | 0.09 | 256.3 |
| 3 | 0.559 | 0.2 | 257.3 |
| 4 | 0.815 | 0.141 | 218.2 |
| 5 | 0.953 | 0.037 | 214 |

## In these collections

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

## Other forms

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