# Blue and stone color palette

This palette moves from blue through off-white to dark blue. It lightens and then darkens across a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Monochrome blue, gray and navy linear gradient
- Seed: `kSdYK7-YI9CUQQy`
- Page: https://grabient.com/kSdYK7-YI9CUQQy?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#204dba` | `oklch(46.06% 0.1791 263.67)` | Apnea Dive | white, 7.4 to 1 |
| 2 | `#2455bd` | `oklch(48.09% 0.1724 262.69)` | Cerulean Blue | white, 6.7 to 1 |
| 3 | `#2b60c2` | `oklch(50.88% 0.1637 261.35)` | Amnesia Blue | white, 5.9 to 1 |
| 4 | `#356cc7` | `oklch(54.30% 0.1533 259.72)` | Celtic Blue | white, 5 to 1 |
| 5 | `#417acd` | `oklch(58.21% 0.1414 257.85)` | Heirloom Hydrangea | black, 4.8 to 1 |
| 6 | `#5089d4` | `oklch(62.49% 0.1285 255.81)` | Berlin Blue | black, 5.8 to 1 |
| 7 | `#6198da` | `oklch(66.99% 0.1148 253.65)` | Little Boy Blue | black, 7 to 1 |
| 8 | `#73a7e1` | `oklch(71.59% 0.1006 251.45)` | Greek Sea | black, 8.3 to 1 |
| 9 | `#87b6e7` | `oklch(76.15% 0.0863 249.26)` | Aero | black, 9.8 to 1 |
| 10 | `#9ac4ec` | `oklch(80.54% 0.0722 247.14)` | Sail to the Sea | black, 11.5 to 1 |
| 11 | `#add1f1` | `oklch(84.63% 0.0585 245.15)` | Gentle Wind | black, 13.2 to 1 |
| 12 | `#c0ddf5` | `oklch(88.27% 0.0456 243.36)` | Greek Isles | black, 14.8 to 1 |
| 13 | `#d0e6f7` | `oklch(91.35% 0.0338 241.83)` | New Heights | black, 16.3 to 1 |
| 14 | `#ddedf9` | `oklch(93.72% 0.0234 240.61)` | Hoarfrost | black, 17.5 to 1 |
| 15 | `#e7f1f8` | `oklch(95.24% 0.0147 239.78)` | Clear Vision | black, 18.3 to 1 |
| 16 | `#ecf2f6` | `oklch(95.80% 0.0080 239.38)` | Powder White | black, 18.6 to 1 |
| 17 | `#edf0f1` | `oklch(95.24% 0.0036 239.48)` | Snowflake | black, 18.2 to 1 |
| 18 | `#e9eaea` | `oklch(93.53% 0.0010 240.10)` | Superwhite | black, 17.3 to 1 |
| 19 | `#e0e0e1` | `oklch(90.80% 0.0001 241.15)` | Wind Chime | black, 15.9 to 1 |
| 20 | `#d4d5d5` | `oklch(87.19% 0.0006 242.61)` | Disco Ball | black, 14.2 to 1 |
| 21 | `#c5c7c8` | `oklch(82.85% 0.0024 244.38)` | Shining Silver | black, 12.3 to 1 |
| 22 | `#b5b7ba` | `oklch(77.93% 0.0051 246.41)` | Powder Dust | black, 10.4 to 1 |
| 23 | `#a2a7ac` | `oklch(72.58% 0.0087 248.63)` | Ironbreaker Metal | black, 8.6 to 1 |
| 24 | `#8f969d` | `oklch(66.94% 0.0128 250.98)` | Dusky Grouse | black, 7 to 1 |
| 25 | `#7d848e` | `oklch(61.16% 0.0174 253.40)` | Smoky Studio | black, 5.5 to 1 |
| 26 | `#6a7480` | `oklch(55.39% 0.0222 255.83)` | Long Lake | white, 4.7 to 1 |
| 27 | `#596372` | `oklch(49.77% 0.0270 258.19)` | Fuel Town | white, 6 to 1 |
| 28 | `#4a5466` | `oklch(44.45% 0.0316 260.42)` | Mystical Shade | white, 7.6 to 1 |
| 29 | `#3c475a` | `oklch(39.58% 0.0358 262.47)` | Very Navy | white, 9.3 to 1 |
| 30 | `#313b50` | `oklch(35.30% 0.0395 264.27)` | Old Mill | white, 11.1 to 1 |
| 31 | `#283248` | `oklch(31.77% 0.0423 265.74)` | Ahoy | white, 12.8 to 1 |
| 32 | `#222b42` | `oklch(29.13% 0.0441 266.84)` | Valhalla | white, 14.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #204dba 0.0%, #2455bd 3.2%, #2b60c2 6.5%, #356cc7 9.7%, #417acd 12.9%, #5089d4 16.1%, #6198da 19.4%, #73a7e1 22.6%, #87b6e7 25.8%, #9ac4ec 29.0%, #add1f1 32.3%, #c0ddf5 35.5%, #d0e6f7 38.7%, #ddedf9 41.9%, #e7f1f8 45.2%, #ecf2f6 48.4%, #edf0f1 51.6%, #e9eaea 54.8%, #e0e0e1 58.1%, #d4d5d5 61.3%, #c5c7c8 64.5%, #b5b7ba 67.7%, #a2a7ac 71.0%, #8f969d 74.2%, #7d848e 77.4%, #6a7480 80.6%, #596372 83.9%, #4a5466 87.1%, #3c475a 90.3%, #313b50 93.5%, #283248 96.8%, #222b42 100.0%);
background: linear-gradient(135deg in oklch, oklch(46.06% 0.1791 263.67) 0.0%, oklch(48.09% 0.1724 262.69) 3.2%, oklch(50.88% 0.1637 261.35) 6.5%, oklch(54.30% 0.1533 259.72) 9.7%, oklch(58.21% 0.1414 257.85) 12.9%, oklch(62.49% 0.1285 255.81) 16.1%, oklch(66.99% 0.1148 253.65) 19.4%, oklch(71.59% 0.1006 251.45) 22.6%, oklch(76.15% 0.0863 249.26) 25.8%, oklch(80.54% 0.0722 247.14) 29.0%, oklch(84.63% 0.0585 245.15) 32.3%, oklch(88.27% 0.0456 243.36) 35.5%, oklch(91.35% 0.0338 241.83) 38.7%, oklch(93.72% 0.0234 240.61) 41.9%, oklch(95.24% 0.0147 239.78) 45.2%, oklch(95.80% 0.0080 239.38) 48.4%, oklch(95.24% 0.0036 239.48) 51.6%, oklch(93.53% 0.0010 240.10) 54.8%, oklch(90.80% 0.0001 241.15) 58.1%, oklch(87.19% 0.0006 242.61) 61.3%, oklch(82.85% 0.0024 244.38) 64.5%, oklch(77.93% 0.0051 246.41) 67.7%, oklch(72.58% 0.0087 248.63) 71.0%, oklch(66.94% 0.0128 250.98) 74.2%, oklch(61.16% 0.0174 253.40) 77.4%, oklch(55.39% 0.0222 255.83) 80.6%, oklch(49.77% 0.0270 258.19) 83.9%, oklch(44.45% 0.0316 260.42) 87.1%, oklch(39.58% 0.0358 262.47) 90.3%, oklch(35.30% 0.0395 264.27) 93.5%, oklch(31.77% 0.0423 265.74) 96.8%, oklch(29.13% 0.0441 266.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.461 | 0.179 | 263.7 |
| 2 | 0.957 | 0.006 | 239.4 |
| 3 | 0.291 | 0.044 | 266.8 |

## In these collections

- [Underwater colors](https://grabient.com/underwater-colors)
- [Runway flash photography](https://grabient.com/runway-flash-photography)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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