# Slate Blue into Sage

Blue to gray radial gradient with 32 colors: #496b8e, #4b6d90, #4e7092, #527495, #567898, #5b7d9b, #5f819e, #6385a0, #6789a2, #6a8ca4, #6e8fa5, #7192a6, #7595a7, #7898a7, #7b9ba8, #7d9ea8, #7fa0a8, #80a3a7, #81a5a6, #83a7a3, #85a9a0, #87ab9d, #8bac9a, #8eae97, #91af94, #95b192, #98b290, #9bb48e, #9db58c, #a0b78a, #a3b888, #a5b887. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue to gray radial gradient
- Seed: `kWgzKyTZQ-9aOPPbkbhYBo8w`
- Page: https://grabient.com/kWgzKyTZQ-9aOPPbkbhYBo8w?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: muted, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.6 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 | `#496b8e` | `oklch(51.57% 0.0689 250.31)` | Honky Tonk Blue | white, 5.5 to 1 |
| 2 | `#4b6d90` | `oklch(52.35% 0.0678 249.76)` | Wickford Bay | white, 5.4 to 1 |
| 3 | `#4e7092` | `oklch(53.40% 0.0664 249.15)` | Caspian Sea | white, 5.1 to 1 |
| 4 | `#527495` | `oklch(54.65% 0.0647 248.43)` | Yawl | white, 4.8 to 1 |
| 5 | `#567898` | `oklch(56.03% 0.0628 247.55)` | Quiet Harbour | white, 4.6 to 1 |
| 6 | `#5b7d9b` | `oklch(57.46% 0.0608 246.45)` | Nightly Blade | black, 4.8 to 1 |
| 7 | `#5f819e` | `oklch(58.86% 0.0587 245.08)` | Greyish Blue | black, 5.1 to 1 |
| 8 | `#6385a0` | `oklch(60.16% 0.0566 243.38)` | Moody Indigo | black, 5.3 to 1 |
| 9 | `#6789a2` | `oklch(61.29% 0.0546 241.32)` | Sporty Blue | black, 5.6 to 1 |
| 10 | `#6a8ca4` | `oklch(62.33% 0.0523 239.15)` | Stormy Strait Grey | black, 5.9 to 1 |
| 11 | `#6e8fa5` | `oklch(63.35% 0.0497 236.90)` | French Court | black, 6.1 to 1 |
| 12 | `#7192a6` | `oklch(64.32% 0.0470 234.41)` | Architecture Blue | black, 6.3 to 1 |
| 13 | `#7595a7` | `oklch(65.26% 0.0444 231.55)` | Architecture Blue | black, 6.6 to 1 |
| 14 | `#7898a7` | `oklch(66.14% 0.0421 228.17)` | Palace Intrigue | black, 6.8 to 1 |
| 15 | `#7b9ba8` | `oklch(66.97% 0.0402 224.12)` | Palace Intrigue | black, 7 to 1 |
| 16 | `#7d9ea8` | `oklch(67.75% 0.0389 219.27)` | Serene Stream | black, 7.3 to 1 |
| 17 | `#7fa0a8` | `oklch(68.45% 0.0384 213.37)` | Tourmaline | black, 7.5 to 1 |
| 18 | `#80a3a7` | `oklch(69.08% 0.0386 205.91)` | Tourmaline | black, 7.7 to 1 |
| 19 | `#81a5a6` | `oklch(69.63% 0.0393 197.26)` | Ziggurat | black, 7.8 to 1 |
| 20 | `#83a7a3` | `oklch(70.12% 0.0404 187.91)` | Acapulco Aqua | black, 8 to 1 |
| 21 | `#85a9a0` | `oklch(70.58% 0.0419 178.37)` | Lake Water | black, 8.1 to 1 |
| 22 | `#87ab9d` | `oklch(71.03% 0.0436 169.14)` | Corsican | black, 8.3 to 1 |
| 23 | `#8bac9a` | `oklch(71.47% 0.0456 160.70)` | Pale Willow | black, 8.4 to 1 |
| 24 | `#8eae97` | `oklch(71.93% 0.0477 153.56)` | Holly Fern | black, 8.6 to 1 |
| 25 | `#91af94` | `oklch(72.42% 0.0501 147.86)` | Mint Stone | black, 8.7 to 1 |
| 26 | `#95b192` | `oklch(72.94% 0.0530 142.97)` | Mint Stone | black, 8.9 to 1 |
| 27 | `#98b290` | `oklch(73.48% 0.0565 138.78)` | Dew Green | black, 9.1 to 1 |
| 28 | `#9bb48e` | `oklch(74.00% 0.0601 135.20)` | Basilisk | black, 9.2 to 1 |
| 29 | `#9db58c` | `oklch(74.49% 0.0637 132.17)` | Basilisk | black, 9.4 to 1 |
| 30 | `#a0b78a` | `oklch(74.94% 0.0669 129.62)` | Green Snow | black, 9.6 to 1 |
| 31 | `#a3b888` | `oklch(75.31% 0.0697 127.46)` | Forest Tapestry | black, 9.7 to 1 |
| 32 | `#a5b887` | `oklch(75.59% 0.0717 125.62)` | Forest Tapestry | black, 9.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #496b8e 0.0%, #4b6d90 3.2%, #4e7092 6.5%, #527495 9.7%, #567898 12.9%, #5b7d9b 16.1%, #5f819e 19.4%, #6385a0 22.6%, #6789a2 25.8%, #6a8ca4 29.0%, #6e8fa5 32.3%, #7192a6 35.5%, #7595a7 38.7%, #7898a7 41.9%, #7b9ba8 45.2%, #7d9ea8 48.4%, #7fa0a8 51.6%, #80a3a7 54.8%, #81a5a6 58.1%, #83a7a3 61.3%, #85a9a0 64.5%, #87ab9d 67.7%, #8bac9a 71.0%, #8eae97 74.2%, #91af94 77.4%, #95b192 80.6%, #98b290 83.9%, #9bb48e 87.1%, #9db58c 90.3%, #a0b78a 93.5%, #a3b888 96.8%, #a5b887 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(51.57% 0.0689 250.31) 0.0%, oklch(52.35% 0.0678 249.76) 3.2%, oklch(53.40% 0.0664 249.15) 6.5%, oklch(54.65% 0.0647 248.43) 9.7%, oklch(56.03% 0.0628 247.55) 12.9%, oklch(57.46% 0.0608 246.45) 16.1%, oklch(58.86% 0.0587 245.08) 19.4%, oklch(60.16% 0.0566 243.38) 22.6%, oklch(61.29% 0.0546 241.32) 25.8%, oklch(62.33% 0.0523 239.15) 29.0%, oklch(63.35% 0.0497 236.90) 32.3%, oklch(64.32% 0.0470 234.41) 35.5%, oklch(65.26% 0.0444 231.55) 38.7%, oklch(66.14% 0.0421 228.17) 41.9%, oklch(66.97% 0.0402 224.12) 45.2%, oklch(67.75% 0.0389 219.27) 48.4%, oklch(68.45% 0.0384 213.37) 51.6%, oklch(69.08% 0.0386 205.91) 54.8%, oklch(69.63% 0.0393 197.26) 58.1%, oklch(70.12% 0.0404 187.91) 61.3%, oklch(70.58% 0.0419 178.37) 64.5%, oklch(71.03% 0.0436 169.14) 67.7%, oklch(71.47% 0.0456 160.70) 71.0%, oklch(71.93% 0.0477 153.56) 74.2%, oklch(72.42% 0.0501 147.86) 77.4%, oklch(72.94% 0.0530 142.97) 80.6%, oklch(73.48% 0.0565 138.78) 83.9%, oklch(74.00% 0.0601 135.20) 87.1%, oklch(74.49% 0.0637 132.17) 90.3%, oklch(74.94% 0.0669 129.62) 93.5%, oklch(75.31% 0.0697 127.46) 96.8%, oklch(75.59% 0.0717 125.62) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.516 | 0.069 | 250.3 |
| 2 | 0.61 | 0.055 | 241.9 |
| 3 | 0.681 | 0.039 | 216.5 |
| 4 | 0.72 | 0.048 | 152 |
| 5 | 0.756 | 0.072 | 125.6 |

## In these collections

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

## Other forms

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