# Blue, gray, pink and purple linear gradient

Blue, gray, pink and purple linear gradient with 7 colors: #5d788f, #acc3bb, #ebb689, #c062a2, #9f5697, #b28398, #233767. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYjiOu6Qs1GGpMFBtrjWBhEawgNM`
- Page: https://grabient.com/kYjiOu6Qs1GGpMFBtrjWBhEawgNM
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.3 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 | `#5d788f` | `oklch(55.91% 0.0482 245.39)` | Titanium Blue | white, 4.6 to 1 |
| 2 | `#acc3bb` | `oklch(79.80% 0.0277 172.16)` | Ocean Droplet | black, 11.2 to 1 |
| 3 | `#ebb689` | `oklch(81.38% 0.0851 61.56)` | Rusty Sand | black, 11.5 to 1 |
| 4 | `#c062a2` | `oklch(62.70% 0.1420 340.61)` | Young Purple | black, 5.5 to 1 |
| 5 | `#9f5697` | `oklch(56.24% 0.1272 331.42)` | Bermuda Onion | white, 4.9 to 1 |
| 6 | `#b28398` | `oklch(66.15% 0.0639 350.05)` | Heather Violet | black, 6.5 to 1 |
| 7 | `#233767` | `oklch(34.65% 0.0882 265.12)` | Passionate Blue | white, 11.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #5d788f 0.0%, #acc3bb 16.7%, #ebb689 33.3%, #c062a2 50.0%, #9f5697 66.7%, #b28398 83.3%, #233767 100.0%);
background: linear-gradient(90deg in oklch, oklch(55.91% 0.0482 245.39) 0.0%, oklch(79.80% 0.0277 172.16) 16.7%, oklch(81.38% 0.0851 61.56) 33.3%, oklch(62.70% 0.1420 340.61) 50.0%, oklch(56.24% 0.1272 331.42) 66.7%, oklch(66.15% 0.0639 350.05) 83.3%, oklch(34.65% 0.0882 265.12) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.559 | 0.048 | 245.4 |
| 2 | 0.827 | 0.03 | 153.5 |
| 3 | 0.768 | 0.113 | 21.4 |
| 4 | 0.516 | 0.15 | -38.9 |
| 5 | 0.693 | 0.066 | -0.8 |
| 6 | 0.346 | 0.088 | -94.9 |

## In these collections

- [Sky](https://grabient.com/sky)

## Other forms

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