# Duotone beige to pink linear gradient

Duotone beige to pink linear gradient with 6 colors: #e7f2c4, #fee2a0, #febd87, #ff907c, #ea677f, #c35493. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kY7y1U9SC8WulPLhsrx1rs9k05vS`
- Page: https://grabient.com/kY7y1U9SC8WulPLhsrx1rs9k05vS?steps=6&angle=135
- Drawn as: linear gradient, 6 steps, 135 degrees
- Kinds: light to dark, vivid, light, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 3.5 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 | `#e7f2c4` | `oklch(94.09% 0.0620 118.83)` | Freshman | black, 17.8 to 1 |
| 2 | `#fee2a0` | `oklch(92.13% 0.0896 88.18)` | Polka Dot Skirt | black, 16.6 to 1 |
| 3 | `#febd87` | `oklch(84.65% 0.1020 60.71)` | Orange Mousse | black, 12.8 to 1 |
| 4 | `#ff907c` | `oklch(76.77% 0.1382 31.12)` | Coralistic | black, 9.5 to 1 |
| 5 | `#ea677f` | `oklch(68.11% 0.1626 11.04)` | Ambitious Rose | black, 6.7 to 1 |
| 6 | `#c35493` | `oklch(60.63% 0.1585 347.79)` | Llilacquered | black, 5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #e7f2c4 0.0%, #fee2a0 20.0%, #febd87 40.0%, #ff907c 60.0%, #ea677f 80.0%, #c35493 100.0%);
background: linear-gradient(135deg in oklch, oklch(94.09% 0.0620 118.83) 0.0%, oklch(92.13% 0.0896 88.18) 20.0%, oklch(84.65% 0.1020 60.71) 40.0%, oklch(76.77% 0.1382 31.12) 60.0%, oklch(68.11% 0.1626 11.04) 80.0%, oklch(60.63% 0.1585 347.79) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.941 | 0.062 | 118.8 |
| 2 | 0.921 | 0.09 | 88.2 |
| 3 | 0.846 | 0.102 | 60.7 |
| 4 | 0.768 | 0.139 | 31.1 |
| 5 | 0.681 | 0.163 | 11 |
| 6 | 0.606 | 0.158 | -12.2 |

## Other forms

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