# Black, navy, olive and blue linear gradient

Black, navy, olive and blue linear gradient with 7 colors: #1a1301, #002d35, #00444e, #60510c, #00aca8, #007e81, #030200. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWMBtAqJ_SzeerZZLs-CwawI`
- Page: https://grabient.com/kWMBtAqJ_SzeerZZLs-CwawI
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 7.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 | `#1a1301` | `oklch(18.90% 0.0372 90.70)` | Crowshead | white, 18.5 to 1 |
| 2 | `#002d35` | `oklch(27.18% 0.0479 214.60)` | Black Chasm | white, 14.7 to 1 |
| 3 | `#00444e` | `oklch(35.38% 0.0615 211.21)` | Crab Nebula | white, 10.8 to 1 |
| 4 | `#60510c` | `oklch(43.70% 0.0841 94.93)` | Olive Brown | white, 7.8 to 1 |
| 5 | `#00aca8` | `oklch(67.25% 0.1155 191.99)` | Teal Me No Lies | black, 7.4 to 1 |
| 6 | `#007e81` | `oklch(53.84% 0.0916 197.36)` | Macquarie | white, 4.8 to 1 |
| 7 | `#030200` | `oklch(8.66% 0.0178 93.70)` | Armour Wash | white, 20.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1a1301 0.0%, #002d35 16.7%, #00444e 33.3%, #60510c 50.0%, #00aca8 66.7%, #007e81 83.3%, #030200 100.0%);
background: linear-gradient(90deg in oklch, oklch(18.90% 0.0372 90.70) 0.0%, oklch(27.18% 0.0479 214.60) 16.7%, oklch(35.38% 0.0615 211.21) 33.3%, oklch(43.70% 0.0841 94.93) 50.0%, oklch(67.25% 0.1155 191.99) 66.7%, oklch(53.84% 0.0916 197.36) 83.3%, oklch(8.66% 0.0178 93.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.189 | 0.037 | 90.7 |
| 2 | 0.319 | 0.087 | 250.3 |
| 3 | 0.437 | 0.084 | 94.9 |
| 4 | 0.701 | 0.128 | 227 |
| 5 | 0.087 | 0.018 | 93.9 |

## Other forms

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