# Monochrome gray, navy and blue linear gradient

Monochrome gray, navy and blue linear gradient with 7 colors: #c8e2ef, #596d80, #07142e, #0e3870, #1574c4, #1b5397, #122858. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU5BijGRRD0Y2PolIUFg`
- Page: https://grabient.com/kU5BijGRRD0Y2PolIUFg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#c8e2ef` | `oklch(89.76% 0.0331 229.22)` | Pale Frost | black, 15.5 to 1 |
| 2 | `#596d80` | `oklch(52.51% 0.0382 246.32)` | Deadwind Pass | white, 5.3 to 1 |
| 3 | `#07142e` | `oklch(19.69% 0.0551 261.98)` | Squid’s Ink | white, 18.2 to 1 |
| 4 | `#0e3870` | `oklch(34.65% 0.1070 257.42)` | Tardis Blue | white, 11.5 to 1 |
| 5 | `#1574c4` | `oklch(55.12% 0.1488 250.35)` | Science Blue | white, 4.8 to 1 |
| 6 | `#1b5397` | `oklch(44.34% 0.1257 255.97)` | Summer Waters | white, 7.7 to 1 |
| 7 | `#122858` | `oklch(29.13% 0.0909 263.03)` | Fibonacci Blue | white, 14.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c8e2ef 0.0%, #596d80 16.7%, #07142e 33.3%, #0e3870 50.0%, #1574c4 66.7%, #1b5397 83.3%, #122858 100.0%);
background: linear-gradient(90deg in oklch, oklch(89.76% 0.0331 229.22) 0.0%, oklch(52.51% 0.0382 246.32) 16.7%, oklch(19.69% 0.0551 261.98) 33.3%, oklch(34.65% 0.1070 257.42) 50.0%, oklch(55.12% 0.1488 250.35) 66.7%, oklch(44.34% 0.1257 255.97) 83.3%, oklch(29.13% 0.0909 263.03) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.898 | 0.033 | 229.2 |
| 2 | 0.197 | 0.055 | 262 |
| 3 | 0.551 | 0.149 | 250.4 |
| 4 | 0.291 | 0.091 | 263 |

## In these collections

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

## Other forms

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