# Slate ice diagonal

Navy, light blue, blue and gray linear gradient with 32 colors: #0e3446, #1f4354, #385b6a, #577985, #799aa3, #9abac1, #b7d4da, #cae6eb, #cfebf0, #c3dfe6, #abc8d2, #8da9b7, #6d8899, #50687d, #3a4e66, #2b3d57, #263852, #283a55, #2e435e, #37506c, #43607b, #50718b, #5c8099, #678ba4, #6e92aa, #7696af, #7d99b2, #839ab3, #889bb4, #8d9cb4, #909db3, #939eb4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, light blue, blue and gray linear gradient
- Seed: `kWTial9Qs9KuSxbPlD2WIzDI`
- Page: https://grabient.com/kWTial9Qs9KuSxbPlD2WIzDI?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.4 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 | `#0e3446` | `oklch(30.71% 0.0524 232.73)` | Crowberry Blue | white, 13.1 to 1 |
| 2 | `#1f4354` | `oklch(36.49% 0.0503 230.35)` | Reflecting Pond | white, 10.5 to 1 |
| 3 | `#385b6a` | `oklch(45.14% 0.0472 226.61)` | Blue Spell | white, 7.2 to 1 |
| 4 | `#577985` | `oklch(55.50% 0.0435 222.13)` | Ocean Shadow | white, 4.6 to 1 |
| 5 | `#799aa3` | `oklch(66.39% 0.0396 217.51)` | Tranquil Aqua | black, 6.9 to 1 |
| 6 | `#9abac1` | `oklch(76.65% 0.0359 213.37)` | Bel Esprit | black, 10.1 to 1 |
| 7 | `#b7d4da` | `oklch(85.12% 0.0328 210.33)` | Rain Check | black, 13.4 to 1 |
| 8 | `#cae6eb` | `oklch(90.63% 0.0309 209.00)` | Igloo Blue | black, 16 to 1 |
| 9 | `#cfebf0` | `oklch(92.02% 0.0303 210.00)` | Chalky Blue White | black, 16.7 to 1 |
| 10 | `#c3dfe6` | `oklch(88.62% 0.0314 214.00)` | Breeze in June | black, 15 to 1 |
| 11 | `#abc8d2` | `oklch(81.47% 0.0337 220.40)` | Ocean Eyes | black, 11.9 to 1 |
| 12 | `#8da9b7` | `oklch(71.89% 0.0368 228.30)` | Pewter Blue | black, 8.5 to 1 |
| 13 | `#6d8899` | `oklch(61.20% 0.0404 236.79)` | Relaxed Blue | black, 5.6 to 1 |
| 14 | `#50687d` | `oklch(50.74% 0.0440 244.97)` | Periscope | white, 5.7 to 1 |
| 15 | `#3a4e66` | `oklch(41.83% 0.0474 251.93)` | Calico Dress | white, 8.4 to 1 |
| 16 | `#2b3d57` | `oklch(35.78% 0.0500 256.76)` | Academic Blue | white, 10.9 to 1 |
| 17 | `#263852` | `oklch(33.69% 0.0518 258.65)` | Cool Air of Debonair | white, 11.9 to 1 |
| 18 | `#283a55` | `oklch(34.63% 0.0532 257.82)` | Nautilus | white, 11.4 to 1 |
| 19 | `#2e435e` | `oklch(37.76% 0.0544 255.03)` | Moonlit Ocean | white, 10.1 to 1 |
| 20 | `#37506c` | `oklch(42.39% 0.0554 251.03)` | Police Blue | white, 8.2 to 1 |
| 21 | `#43607b` | `oklch(47.81% 0.0560 246.58)` | Mountain River | white, 6.5 to 1 |
| 22 | `#50718b` | `oklch(53.34% 0.0562 242.43)` | Metallic Blue | white, 5.1 to 1 |
| 23 | `#5c8099` | `oklch(58.29% 0.0560 239.31)` | Blue Heaven | black, 5 to 1 |
| 24 | `#678ba4` | `oklch(61.96% 0.0554 237.98)` | Sporty Blue | black, 5.8 to 1 |
| 25 | `#6e92aa` | `oklch(64.15% 0.0540 238.92)` | Aragonite Blue | black, 6.3 to 1 |
| 26 | `#7696af` | `oklch(65.78% 0.0517 241.55)` | American Anthem | black, 6.7 to 1 |
| 27 | `#7d99b2` | `oklch(66.97% 0.0488 245.37)` | Dyer’s Woad | black, 7 to 1 |
| 28 | `#839ab3` | `oklch(67.83% 0.0455 249.91)` | Polished Metal | black, 7.2 to 1 |
| 29 | `#889bb4` | `oklch(68.43% 0.0421 254.67)` | Forever Blue | black, 7.4 to 1 |
| 30 | `#8d9cb4` | `oklch(68.88% 0.0389 259.18)` | Periwinkle Dusk | black, 7.5 to 1 |
| 31 | `#909db3` | `oklch(69.27% 0.0363 262.95)` | Periwinkle Dusk | black, 7.6 to 1 |
| 32 | `#939eb4` | `oklch(69.69% 0.0344 265.49)` | Skyline | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #0e3446 0.0%, #1f4354 3.2%, #385b6a 6.5%, #577985 9.7%, #799aa3 12.9%, #9abac1 16.1%, #b7d4da 19.4%, #cae6eb 22.6%, #cfebf0 25.8%, #c3dfe6 29.0%, #abc8d2 32.3%, #8da9b7 35.5%, #6d8899 38.7%, #50687d 41.9%, #3a4e66 45.2%, #2b3d57 48.4%, #263852 51.6%, #283a55 54.8%, #2e435e 58.1%, #37506c 61.3%, #43607b 64.5%, #50718b 67.7%, #5c8099 71.0%, #678ba4 74.2%, #6e92aa 77.4%, #7696af 80.6%, #7d99b2 83.9%, #839ab3 87.1%, #889bb4 90.3%, #8d9cb4 93.5%, #909db3 96.8%, #939eb4 100.0%);
background: linear-gradient(45deg in oklch, oklch(30.71% 0.0524 232.73) 0.0%, oklch(36.49% 0.0503 230.35) 3.2%, oklch(45.14% 0.0472 226.61) 6.5%, oklch(55.50% 0.0435 222.13) 9.7%, oklch(66.39% 0.0396 217.51) 12.9%, oklch(76.65% 0.0359 213.37) 16.1%, oklch(85.12% 0.0328 210.33) 19.4%, oklch(90.63% 0.0309 209.00) 22.6%, oklch(92.02% 0.0303 210.00) 25.8%, oklch(88.62% 0.0314 214.00) 29.0%, oklch(81.47% 0.0337 220.40) 32.3%, oklch(71.89% 0.0368 228.30) 35.5%, oklch(61.20% 0.0404 236.79) 38.7%, oklch(50.74% 0.0440 244.97) 41.9%, oklch(41.83% 0.0474 251.93) 45.2%, oklch(35.78% 0.0500 256.76) 48.4%, oklch(33.69% 0.0518 258.65) 51.6%, oklch(34.63% 0.0532 257.82) 54.8%, oklch(37.76% 0.0544 255.03) 58.1%, oklch(42.39% 0.0554 251.03) 61.3%, oklch(47.81% 0.0560 246.58) 64.5%, oklch(53.34% 0.0562 242.43) 67.7%, oklch(58.29% 0.0560 239.31) 71.0%, oklch(61.96% 0.0554 237.98) 74.2%, oklch(64.15% 0.0540 238.92) 77.4%, oklch(65.78% 0.0517 241.55) 80.6%, oklch(66.97% 0.0488 245.37) 83.9%, oklch(67.83% 0.0455 249.91) 87.1%, oklch(68.43% 0.0421 254.67) 90.3%, oklch(68.88% 0.0389 259.18) 93.5%, oklch(69.27% 0.0363 262.95) 96.8%, oklch(69.69% 0.0344 265.49) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.307 | 0.052 | 232.7 |
| 2 | 0.921 | 0.03 | 209.5 |
| 3 | 0.343 | 0.051 | 258.1 |
| 4 | 0.626 | 0.055 | 238 |
| 5 | 0.697 | 0.034 | 265.5 |

## In these collections

- [Blue gradients](https://grabient.com/blue-gradients)

## Other forms

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