# Navy, light blue and beige linear gradient

Navy, light blue and beige linear gradient with 7 colors: #0a1a3a, #15356b, #2764a8, #49a2de, #a0d4f3, #d1f5ed, #fff6d6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWOTC6tKq_dcsvfzEL1e4-xI`
- Page: https://grabient.com/kWOTC6tKq_dcsvfzEL1e4-xI
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.9 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 | `#0a1a3a` | `oklch(22.44% 0.0661 262.27)` | Naval Night | white, 17.2 to 1 |
| 2 | `#15356b` | `oklch(33.73% 0.1016 260.54)` | Atlantic Navy | white, 12 to 1 |
| 3 | `#2764a8` | `oklch(49.97% 0.1254 253.54)` | Nebulas Blue | white, 6 to 1 |
| 4 | `#49a2de` | `oklch(68.50% 0.1226 241.13)` | Waimea Blue | black, 7.5 to 1 |
| 5 | `#a0d4f3` | `oklch(84.53% 0.0687 234.12)` | Juzcar Blue | black, 13.2 to 1 |
| 6 | `#d1f5ed` | `oklch(94.17% 0.0389 180.35)` | Waterslide | black, 17.9 to 1 |
| 7 | `#fff6d6` | `oklch(97.24% 0.0424 94.26)` | Natural Wool | black, 19.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0a1a3a 0.0%, #15356b 16.7%, #2764a8 33.3%, #49a2de 50.0%, #a0d4f3 66.7%, #d1f5ed 83.3%, #fff6d6 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.44% 0.0661 262.27) 0.0%, oklch(33.73% 0.1016 260.54) 16.7%, oklch(49.97% 0.1254 253.54) 33.3%, oklch(68.50% 0.1226 241.13) 50.0%, oklch(84.53% 0.0687 234.12) 66.7%, oklch(94.17% 0.0389 180.35) 83.3%, oklch(97.24% 0.0424 94.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.224 | 0.066 | 262.3 |
| 2 | 0.413 | 0.117 | 258 |
| 3 | 0.685 | 0.123 | 241.1 |
| 4 | 0.906 | 0.045 | 218.9 |
| 5 | 0.972 | 0.043 | 94.2 |

## In these collections

- [Liminal Places](https://grabient.com/liminal-places)

## Other forms

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