# Monochrome navy and blue linear gradient

Monochrome navy and blue linear gradient with 7 colors: #101b34, #38567d, #3f71a6, #225b9b, #144688, #102f67, #0c1d46. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWOiW8Q5--burwCuKsCHx1Ag`
- Page: https://grabient.com/kWOiW8Q5--burwCuKsCHx1Ag
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#101b34` | `oklch(22.83% 0.0510 264.37)` | Trapped Darkness | white, 17 to 1 |
| 2 | `#38567d` | `oklch(44.63% 0.0737 255.29)` | Overtake | white, 7.5 to 1 |
| 3 | `#3f71a6` | `oklch(53.92% 0.0994 251.19)` | Flat Blue | white, 5 to 1 |
| 4 | `#225b9b` | `oklch(46.85% 0.1199 253.81)` | Beacon Blue | white, 6.8 to 1 |
| 5 | `#144688` | `oklch(40.01% 0.1219 257.21)` | Mondrian Blue | white, 9.3 to 1 |
| 6 | `#102f67` | `oklch(31.93% 0.1059 261.05)` | Funnel Cloud | white, 12.9 to 1 |
| 7 | `#0c1d46` | `oklch(24.41% 0.0799 264.38)` | Oxford Blue | white, 16.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #101b34 0.0%, #38567d 16.7%, #3f71a6 33.3%, #225b9b 50.0%, #144688 66.7%, #102f67 83.3%, #0c1d46 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.83% 0.0510 264.37) 0.0%, oklch(44.63% 0.0737 255.29) 16.7%, oklch(53.92% 0.0994 251.19) 33.3%, oklch(46.85% 0.1199 253.81) 50.0%, oklch(40.01% 0.1219 257.21) 66.7%, oklch(31.93% 0.1059 261.05) 83.3%, oklch(24.41% 0.0799 264.38) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.051 | 264.4 |
| 2 | 0.531 | 0.087 | 251.7 |
| 3 | 0.469 | 0.12 | 253.8 |
| 4 | 0.362 | 0.117 | 259.1 |
| 5 | 0.244 | 0.08 | 264.4 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)
- [Cool blue](https://grabient.com/cool-blue)

## Other forms

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