# Slate coral cream gradient

Blue, gray, salmon and beige linear gradient with 8 colors: #5789ae, #606a82, #7c5e66, #ac685f, #dc8870, #feb393, #ffdec1, #fffeea. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, gray, salmon and beige linear gradient
- Seed: `kcmzirwo7DEGPSvLIMM2ifA-mjwN1E8JfgrEo`
- Page: https://grabient.com/kcmzirwo7DEGPSvLIMM2ifA-mjwN1E8JfgrEo?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: dark center, warm, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#5789ae` | `oklch(61.02% 0.0772 241.17)` | Blueberry Muffin | black, 5.6 to 1 |
| 2 | `#606a82` | `oklch(52.36% 0.0400 267.59)` | Clooney | white, 5.4 to 1 |
| 3 | `#7c5e66` | `oklch(51.57% 0.0413 0.58)` | Pretty Puce | white, 5.7 to 1 |
| 4 | `#ac685f` | `oklch(59.06% 0.0896 28.06)` | Brick Dust | black, 4.9 to 1 |
| 5 | `#dc8870` | `oklch(70.87% 0.1089 36.51)` | Guava Jam | black, 7.7 to 1 |
| 6 | `#feb393` | `oklch(83.07% 0.0978 43.91)` | Island Girl | black, 12.1 to 1 |
| 7 | `#ffdec1` | `oklch(92.12% 0.0531 64.00)` | Orange Ice | black, 16.5 to 1 |
| 8 | `#fffeea` | `oklch(99.21% 0.0262 104.17)` | Vanilla Drop | black, 20.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #5789ae 0.0%, #606a82 14.3%, #7c5e66 28.6%, #ac685f 42.9%, #dc8870 57.1%, #feb393 71.4%, #ffdec1 85.7%, #fffeea 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.02% 0.0772 241.17) 0.0%, oklch(52.36% 0.0400 267.59) 14.3%, oklch(51.57% 0.0413 0.58) 28.6%, oklch(59.06% 0.0896 28.06) 42.9%, oklch(70.87% 0.1089 36.51) 57.1%, oklch(83.07% 0.0978 43.91) 71.4%, oklch(92.12% 0.0531 64.00) 85.7%, oklch(99.21% 0.0262 104.17) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.077 | 241.2 |
| 2 | 0.524 | 0.04 | 267.6 |
| 3 | 0.516 | 0.041 | 360.6 |
| 4 | 0.591 | 0.09 | 388.1 |
| 5 | 0.709 | 0.109 | 396.5 |
| 6 | 0.831 | 0.098 | 403.9 |
| 7 | 0.921 | 0.054 | 424 |
| 8 | 0.992 | 0.029 | 464.1 |

## Other forms

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