# Navy cyan mint gradient

Vivid navy, blue and teal linear gradient with 8 colors: #000042, #000056, #010983, #062dba, #0161e9, #1ba1f9, #02e7eb, #61ffc5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Vivid navy, blue and teal linear gradient
- Seed: `kcLFa8GjO_6RDv-yz7_xE-_dc8vjrNDo8sQ8I`
- Page: https://grabient.com/kcLFa8GjO_6RDv-yz7_xE-_dc8vjrNDo8sQ8I?steps=8&angle=225
- Drawn as: linear gradient, 8 steps, 225 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 15.3 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 | `#000042` | `oklch(17.32% 0.1185 264.38)` | Endless Galaxy | white, 19.4 to 1 |
| 2 | `#000056` | `oklch(20.51% 0.1417 264.39)` | Alucard’s Night | white, 18.5 to 1 |
| 3 | `#010983` | `oklch(28.35% 0.1860 264.38)` | Midnight in Tokyo | white, 15.3 to 1 |
| 4 | `#062dba` | `oklch(39.76% 0.2191 264.38)` | Blue Screen of Death | white, 10 to 1 |
| 5 | `#0161e9` | `oklch(53.54% 0.2191 260.15)` | Old Gungeon Red | white, 5.3 to 1 |
| 6 | `#1ba1f9` | `oklch(68.50% 0.1667 245.35)` | Rockman Blue | black, 7.4 to 1 |
| 7 | `#02e7eb` | `oklch(84.25% 0.1433 196.74)` | Cold Light of Day | black, 13.6 to 1 |
| 8 | `#61ffc5` | `oklch(90.15% 0.1568 165.04)` | Rare Wind | black, 16.6 to 1 |

## CSS

```css
background: linear-gradient(225deg, #000042 0.0%, #000056 14.3%, #010983 28.6%, #062dba 42.9%, #0161e9 57.1%, #1ba1f9 71.4%, #02e7eb 85.7%, #61ffc5 100.0%);
background: linear-gradient(225deg in oklch, oklch(17.32% 0.1185 264.38) 0.0%, oklch(20.51% 0.1417 264.39) 14.3%, oklch(28.35% 0.1860 264.38) 28.6%, oklch(39.76% 0.2191 264.38) 42.9%, oklch(53.54% 0.2191 260.15) 57.1%, oklch(68.50% 0.1667 245.35) 71.4%, oklch(84.25% 0.1433 196.74) 85.7%, oklch(90.15% 0.1568 165.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.119 | 264.4 |
| 2 | 0.205 | 0.142 | 264.4 |
| 3 | 0.283 | 0.186 | 264.4 |
| 4 | 0.398 | 0.219 | 264.4 |
| 5 | 0.535 | 0.219 | 260.1 |
| 6 | 0.685 | 0.167 | 245.4 |
| 7 | 0.843 | 0.143 | 196.7 |
| 8 | 0.902 | 0.187 | 165 |

## In these collections

- [Blue gradients](https://grabient.com/blue-gradients)

## Other forms

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