# Seamless navy, teal, light blue and gray linear gradient

Seamless navy, teal, light blue and gray linear gradient with 8 colors: #111d38, #25486e, #2d7f92, #5abdc2, #d1e4d9, #9396b6, #4b3d66, #151d36. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPCe8Mhw-kaeO7eIb38ok7daRTgyGUHnhI8Y`
- Page: https://grabient.com/kcPCe8Mhw-kaeO7eIb38ok7daRTgyGUHnhI8Y?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: light center, muted, cool, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 12.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 | `#111d38` | `oklch(23.62% 0.0537 264.37)` | Nightwalker | white, 16.6 to 1 |
| 2 | `#25486e` | `oklch(39.37% 0.0772 252.75)` | Grape Blue | white, 9.4 to 1 |
| 3 | `#2d7f92` | `oklch(55.51% 0.0827 216.82)` | Forget-Me-Not Blue | white, 4.6 to 1 |
| 4 | `#5abdc2` | `oklch(74.02% 0.0923 199.91)` | Pharaoh’s Seas | black, 9.4 to 1 |
| 5 | `#d1e4d9` | `oklch(90.16% 0.0248 161.87)` | Summer Breeze | black, 15.8 to 1 |
| 6 | `#9396b6` | `oklch(68.11% 0.0469 281.28)` | Lively Lilac | black, 7.2 to 1 |
| 7 | `#4b3d66` | `oklch(39.37% 0.0689 298.19)` | Geode | white, 9.7 to 1 |
| 8 | `#151d36` | `oklch(23.62% 0.0496 268.60)` | Sombre Night | white, 16.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #111d38 0.0%, #25486e 14.3%, #2d7f92 28.6%, #5abdc2 42.9%, #d1e4d9 57.1%, #9396b6 71.4%, #4b3d66 85.7%, #151d36 100.0%);
background: linear-gradient(90deg in oklch, oklch(23.62% 0.0537 264.37) 0.0%, oklch(39.37% 0.0772 252.75) 14.3%, oklch(55.51% 0.0827 216.82) 28.6%, oklch(74.02% 0.0923 199.91) 42.9%, oklch(90.16% 0.0248 161.87) 57.1%, oklch(68.11% 0.0469 281.28) 71.4%, oklch(39.37% 0.0689 298.19) 85.7%, oklch(23.62% 0.0496 268.60) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.236 | 0.054 | 264.4 |
| 2 | 0.394 | 0.077 | 252.8 |
| 3 | 0.555 | 0.083 | 216.8 |
| 4 | 0.74 | 0.092 | 199.9 |
| 5 | 0.902 | 0.025 | 161.9 |
| 6 | 0.681 | 0.047 | 281.3 |
| 7 | 0.394 | 0.069 | 298.2 |
| 8 | 0.236 | 0.05 | 268.6 |

## In these collections

- [Winter](https://grabient.com/winter)

## Other forms

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