# Gray and blue elevation palette

The Gray and blue elevation palette brings together green, teal, blue, light blue, and off-white. The colors span a moderate lightness range, combining restrained color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is off-white.

- Also called: Gray, blue and white linear gradient
- Seed: `kYnh5rSYpHFEQQ5jir9cwU_XwBv4`
- Page: https://grabient.com/kYnh5rSYpHFEQQ5jir9cwU_XwBv4?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, neutral, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#758e7a` | `oklch(62.20% 0.0413 150.47)` | Ivy Wreath | black, 5.9 to 1 |
| 2 | `#728d7c` | `oklch(61.64% 0.0396 157.09)` | Ivy Wreath | black, 5.7 to 1 |
| 3 | `#6e8a7e` | `oklch(60.77% 0.0368 166.48)` | Hanging Vine | black, 5.5 to 1 |
| 4 | `#6b867f` | `oklch(59.77% 0.0337 177.52)` | Marsh Creek | black, 5.3 to 1 |
| 5 | `#688380` | `oklch(58.83% 0.0308 189.07)` | Studio Blue Green | black, 5.1 to 1 |
| 6 | `#678081` | `oklch(58.13% 0.0285 200.00)` | Rock Creek | black, 4.9 to 1 |
| 7 | `#687f83` | `oklch(57.86% 0.0276 209.18)` | Rock Creek | black, 4.9 to 1 |
| 8 | `#687f85` | `oklch(58.07% 0.0284 216.37)` | Blue Thunder | black, 4.9 to 1 |
| 9 | `#68818a` | `oklch(58.58% 0.0311 222.84)` | Citadel | black, 5 to 1 |
| 10 | `#69838f` | `oklch(59.36% 0.0347 228.56)` | Indigo Mouse | black, 5.2 to 1 |
| 11 | `#6b8695` | `oklch(60.39% 0.0386 233.46)` | South Pacific | black, 5.4 to 1 |
| 12 | `#6e899c` | `oklch(61.66% 0.0419 237.44)` | China Clay | black, 5.7 to 1 |
| 13 | `#728ea2` | `oklch(63.13% 0.0439 240.44)` | Blue Grey | black, 6 to 1 |
| 14 | `#7893a8` | `oklch(64.86% 0.0439 242.26)` | American Anthem | black, 6.5 to 1 |
| 15 | `#7f99ae` | `oklch(66.98% 0.0424 242.54)` | Dyer’s Woad | black, 7 to 1 |
| 16 | `#87a0b4` | `oklch(69.40% 0.0400 241.67)` | Lake Okoboji | black, 7.7 to 1 |
| 17 | `#90a8ba` | `oklch(71.96% 0.0369 240.12)` | Dresden Dream | black, 8.5 to 1 |
| 18 | `#9ab0c0` | `oklch(74.54% 0.0336 238.32)` | Cloudless Day | black, 9.3 to 1 |
| 19 | `#a3b8c6` | `oklch(76.99% 0.0305 236.73)` | Hazy Daze | black, 10.1 to 1 |
| 20 | `#abbfcb` | `oklch(79.21% 0.0279 235.72)` | Cerulean Tint | black, 11 to 1 |
| 21 | `#b3c5d0` | `oklch(81.36% 0.0254 234.83)` | Opal Waters | black, 11.8 to 1 |
| 22 | `#bbccd6` | `oklch(83.48% 0.0228 233.92)` | Melody | black, 12.6 to 1 |
| 23 | `#c3d2db` | `oklch(85.52% 0.0203 233.02)` | Sentimental Lady | black, 13.5 to 1 |
| 24 | `#cbd8e0` | `oklch(87.45% 0.0178 232.16)` | Poppy’s Whiskers | black, 14.4 to 1 |
| 25 | `#d2dee4` | `oklch(89.24% 0.0155 231.36)` | Breakwater | black, 15.2 to 1 |
| 26 | `#d8e3e8` | `oklch(90.86% 0.0134 230.65)` | Baby’s Breath | black, 16 to 1 |
| 27 | `#dee7ec` | `oklch(92.35% 0.0114 229.99)` | Diamond Light | black, 16.7 to 1 |
| 28 | `#e4ecef` | `oklch(93.73% 0.0096 229.37)` | Blizzard | black, 17.5 to 1 |
| 29 | `#e9eff3` | `oklch(94.97% 0.0078 228.81)` | Distant Wind Chime | black, 18.1 to 1 |
| 30 | `#eef3f5` | `oklch(96.06% 0.0063 228.32)` | Maui Mist | black, 18.7 to 1 |
| 31 | `#f2f6f8` | `oklch(96.95% 0.0051 227.92)` | Gram’s Hair | black, 19.2 to 1 |
| 32 | `#f4f8f9` | `oklch(97.64% 0.0041 227.61)` | Distant Horizon | black, 19.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #758e7a 0.0%, #728d7c 3.2%, #6e8a7e 6.5%, #6b867f 9.7%, #688380 12.9%, #678081 16.1%, #687f83 19.4%, #687f85 22.6%, #68818a 25.8%, #69838f 29.0%, #6b8695 32.3%, #6e899c 35.5%, #728ea2 38.7%, #7893a8 41.9%, #7f99ae 45.2%, #87a0b4 48.4%, #90a8ba 51.6%, #9ab0c0 54.8%, #a3b8c6 58.1%, #abbfcb 61.3%, #b3c5d0 64.5%, #bbccd6 67.7%, #c3d2db 71.0%, #cbd8e0 74.2%, #d2dee4 77.4%, #d8e3e8 80.6%, #dee7ec 83.9%, #e4ecef 87.1%, #e9eff3 90.3%, #eef3f5 93.5%, #f2f6f8 96.8%, #f4f8f9 100.0%);
background: linear-gradient(90deg in oklch, oklch(62.20% 0.0413 150.47) 0.0%, oklch(61.64% 0.0396 157.09) 3.2%, oklch(60.77% 0.0368 166.48) 6.5%, oklch(59.77% 0.0337 177.52) 9.7%, oklch(58.83% 0.0308 189.07) 12.9%, oklch(58.13% 0.0285 200.00) 16.1%, oklch(57.86% 0.0276 209.18) 19.4%, oklch(58.07% 0.0284 216.37) 22.6%, oklch(58.58% 0.0311 222.84) 25.8%, oklch(59.36% 0.0347 228.56) 29.0%, oklch(60.39% 0.0386 233.46) 32.3%, oklch(61.66% 0.0419 237.44) 35.5%, oklch(63.13% 0.0439 240.44) 38.7%, oklch(64.86% 0.0439 242.26) 41.9%, oklch(66.98% 0.0424 242.54) 45.2%, oklch(69.40% 0.0400 241.67) 48.4%, oklch(71.96% 0.0369 240.12) 51.6%, oklch(74.54% 0.0336 238.32) 54.8%, oklch(76.99% 0.0305 236.73) 58.1%, oklch(79.21% 0.0279 235.72) 61.3%, oklch(81.36% 0.0254 234.83) 64.5%, oklch(83.48% 0.0228 233.92) 67.7%, oklch(85.52% 0.0203 233.02) 71.0%, oklch(87.45% 0.0178 232.16) 74.2%, oklch(89.24% 0.0155 231.36) 77.4%, oklch(90.86% 0.0134 230.65) 80.6%, oklch(92.35% 0.0114 229.99) 83.9%, oklch(93.73% 0.0096 229.37) 87.1%, oklch(94.97% 0.0078 228.81) 90.3%, oklch(96.06% 0.0063 228.32) 93.5%, oklch(96.95% 0.0051 227.92) 96.8%, oklch(97.64% 0.0041 227.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.622 | 0.041 | 150.5 |
| 2 | 0.579 | 0.028 | 210.7 |
| 3 | 0.638 | 0.044 | 241.3 |
| 4 | 0.783 | 0.029 | 236.1 |
| 5 | 0.906 | 0.014 | 230.8 |
| 6 | 0.976 | 0.004 | 227.6 |

## In these collections

- [Elevation gradients](https://grabient.com/elevation-gradients)

## Other forms

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