# Light blue, light green, pink and navy linear gradient

Light blue, light green, pink and navy linear gradient with 7 colors: #edfff8, #d3ffdf, #ddea8a, #ff9f96, #9b82c9, #4e5a87, #2a344b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU-g958yu5VOmqypkDwA`
- Page: https://grabient.com/kU-g958yu5VOmqypkDwA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, pastel
- Hues: triadic
- Contrast of its darkest and lightest colors: 11.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 | `#edfff8` | `oklch(98.43% 0.0207 170.86)` | Placebo Turquoise | black, 20.2 to 1 |
| 2 | `#d3ffdf` | `oklch(96.04% 0.0625 153.82)` | Mint Zest | black, 19.1 to 1 |
| 3 | `#ddea8a` | `oklch(90.55% 0.1199 114.85)` | Charlock | black, 16.1 to 1 |
| 4 | `#ff9f96` | `oklch(79.72% 0.1163 25.69)` | Peach Amber | black, 10.6 to 1 |
| 5 | `#9b82c9` | `oklch(65.75% 0.1061 299.43)` | Lilac Purple | black, 6.4 to 1 |
| 6 | `#4e5a87` | `oklch(47.66% 0.0742 272.09)` | Wizard | white, 6.7 to 1 |
| 7 | `#2a344b` | `oklch(32.68% 0.0441 266.67)` | Bunting | white, 12.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #edfff8 0.0%, #d3ffdf 16.7%, #ddea8a 33.3%, #ff9f96 50.0%, #9b82c9 66.7%, #4e5a87 83.3%, #2a344b 100.0%);
background: linear-gradient(90deg in oklch, oklch(98.43% 0.0207 170.86) 0.0%, oklch(96.04% 0.0625 153.82) 16.7%, oklch(90.55% 0.1199 114.85) 33.3%, oklch(79.72% 0.1163 25.69) 50.0%, oklch(65.75% 0.1061 299.43) 66.7%, oklch(47.66% 0.0742 272.09) 83.3%, oklch(32.68% 0.0441 266.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.984 | 0.021 | 170.9 |
| 2 | 0.906 | 0.12 | 114.9 |
| 3 | 0.657 | 0.106 | -60.6 |
| 4 | 0.327 | 0.044 | -93.3 |

## In these collections

- [Holographic gradients](https://grabient.com/holographic-gradients)

## Other forms

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