# Pastel blue, beige and green linear gradient

Pastel blue, beige and green linear gradient with 8 colors: #6d93cb, #87baee, #afd8ff, #dcf0f4, #f8ffd9, #fcffb4, #eaff8b, #c5fa6f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcp0W34iG--4Zv73iDvfRI0fymP16NsDdUBBA`
- Page: https://grabient.com/kcp0W34iG--4Zv73iDvfRI0fymP16NsDdUBBA?steps=8&angle=135
- Drawn as: linear gradient, 8 steps, 135 degrees
- Kinds: light center, pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 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 | `#6d93cb` | `oklch(65.75% 0.0951 258.05)` | Zeus Temple | black, 6.6 to 1 |
| 2 | `#87baee` | `oklch(77.17% 0.0923 249.59)` | Electric Eel | black, 10.2 to 1 |
| 3 | `#afd8ff` | `oklch(86.61% 0.0695 247.47)` | Malmö FF | black, 14 to 1 |
| 4 | `#dcf0f4` | `oklch(94.09% 0.0220 212.61)` | Let It Snow | black, 17.7 to 1 |
| 5 | `#f8ffd9` | `oklch(98.43% 0.0496 115.39)` | Apple Martini | black, 20.2 to 1 |
| 6 | `#fcffb4` | `oklch(98.03% 0.0946 110.09)` | VIC 20 Creme | black, 20 to 1 |
| 7 | `#eaff8b` | `oklch(96.06% 0.1430 117.50)` | Metal Spark | black, 19.1 to 1 |
| 8 | `#c5fa6f` | `oklch(92.13% 0.1764 127.01)` | Lime Lightning | black, 17.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #6d93cb 0.0%, #87baee 14.3%, #afd8ff 28.6%, #dcf0f4 42.9%, #f8ffd9 57.1%, #fcffb4 71.4%, #eaff8b 85.7%, #c5fa6f 100.0%);
background: linear-gradient(135deg in oklch, oklch(65.75% 0.0951 258.05) 0.0%, oklch(77.17% 0.0923 249.59) 14.3%, oklch(86.61% 0.0695 247.47) 28.6%, oklch(94.09% 0.0220 212.61) 42.9%, oklch(98.43% 0.0496 115.39) 57.1%, oklch(98.03% 0.0946 110.09) 71.4%, oklch(96.06% 0.1430 117.50) 85.7%, oklch(92.13% 0.1764 127.01) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.657 | 0.095 | 258 |
| 2 | 0.772 | 0.092 | 249.6 |
| 3 | 0.866 | 0.07 | 247.5 |
| 4 | 0.941 | 0.022 | 212.6 |
| 5 | 0.984 | 0.05 | 115.4 |
| 6 | 0.98 | 0.105 | 110.1 |
| 7 | 0.961 | 0.15 | 117.5 |
| 8 | 0.921 | 0.176 | 127 |

## In these collections

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

## Other forms

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