# White, beige and lavender linear gradient

White, beige and lavender linear gradient with 32 colors: #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #fffffe, #fffffd, #fffffc, #fffffa, #fffff6, #fffef0, #ffffe3, #feffdc, #fcffd2, #fcfdcb, #fff8c5, #fff1cc, #ffeacd, #ffe3cd, #fedccd, #fdd5ce, #fcced1, #fbc7d8, #f6c0e2, #eebbed, #e4b7f6, #dab3fb, #d1aefe, #caaaff, #c4a6ff, #c0a3ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka_gBM_wBAP6Iv18GEAc5A3msjNtisT2A`
- Page: https://grabient.com/ka_gBM_wBAP6Iv18GEAc5A3msjNtisT2A?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: pastel, light
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.1 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 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 2 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 3 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 4 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 5 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 6 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 7 | `#fffffe` | `oklch(99.97% 0.0011 108.61)` | White | black, 20.9 to 1 |
| 8 | `#fffffd` | `oklch(99.95% 0.0021 107.80)` | Whitewash | black, 20.9 to 1 |
| 9 | `#fffffc` | `oklch(99.91% 0.0042 106.62)` | Whitewash | black, 20.9 to 1 |
| 10 | `#fffffa` | `oklch(99.83% 0.0071 105.60)` | Whitewash | black, 20.9 to 1 |
| 11 | `#fffff6` | `oklch(99.68% 0.0116 104.64)` | Milk | black, 20.8 to 1 |
| 12 | `#fffef0` | `oklch(99.46% 0.0195 104.79)` | Ivory | black, 20.7 to 1 |
| 13 | `#ffffe3` | `oklch(99.25% 0.0360 106.83)` | Lamb’s Wool | black, 20.6 to 1 |
| 14 | `#feffdc` | `oklch(98.99% 0.0457 109.19)` | Parmesan | black, 20.5 to 1 |
| 15 | `#fcffd2` | `oklch(98.60% 0.0579 110.22)` | Matt White | black, 20.3 to 1 |
| 16 | `#fcfdcb` | `oklch(98.02% 0.0645 108.17)` | Ice Yellow | black, 20 to 1 |
| 17 | `#fff8c5` | `oklch(97.18% 0.0663 101.48)` | Lemon Chiffon Pie | black, 19.4 to 1 |
| 18 | `#fff1cc` | `oklch(96.04% 0.0510 90.37)` | Bird’s Child | black, 18.7 to 1 |
| 19 | `#ffeacd` | `oklch(94.70% 0.0442 76.23)` | Blanched Almond | black, 17.9 to 1 |
| 20 | `#ffe3cd` | `oklch(93.27% 0.0428 60.52)` | Lumber | black, 17.1 to 1 |
| 21 | `#fedccd` | `oklch(91.84% 0.0438 44.63)` | Glazed Sugar | black, 16.3 to 1 |
| 22 | `#fdd5ce` | `oklch(90.51% 0.0454 29.75)` | Cosmos | black, 15.5 to 1 |
| 23 | `#fcced1` | `oklch(89.22% 0.0527 13.80)` | Pinktone | black, 14.8 to 1 |
| 24 | `#fbc7d8` | `oklch(87.92% 0.0635 357.06)` | Sweet Serenade | black, 14.2 to 1 |
| 25 | `#f6c0e2` | `oklch(86.63% 0.0759 340.94)` | Pretty in Pink | black, 13.5 to 1 |
| 26 | `#eebbed` | `oklch(85.33% 0.0880 326.79)` | Lovecloud | black, 12.9 to 1 |
| 27 | `#e4b7f6` | `oklch(84.03% 0.0979 316.00)` | Lavender Fragrance | black, 12.4 to 1 |
| 28 | `#dab3fb` | `oklch(82.61% 0.1069 308.73)` | Light Violet | black, 11.8 to 1 |
| 29 | `#d1aefe` | `oklch(81.10% 0.1156 304.04)` | Teasel Dipsacus | black, 11.2 to 1 |
| 30 | `#caaaff` | `oklch(79.66% 0.1225 301.14)` | Purple Hepatica | black, 10.6 to 1 |
| 31 | `#c4a6ff` | `oklch(78.43% 0.1278 299.20)` | Diva | black, 10.2 to 1 |
| 32 | `#c0a3ff` | `oklch(77.56% 0.1311 297.44)` | Diva | black, 9.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ffffff 0.0%, #ffffff 3.2%, #ffffff 6.5%, #ffffff 9.7%, #ffffff 12.9%, #ffffff 16.1%, #fffffe 19.4%, #fffffd 22.6%, #fffffc 25.8%, #fffffa 29.0%, #fffff6 32.3%, #fffef0 35.5%, #ffffe3 38.7%, #feffdc 41.9%, #fcffd2 45.2%, #fcfdcb 48.4%, #fff8c5 51.6%, #fff1cc 54.8%, #ffeacd 58.1%, #ffe3cd 61.3%, #fedccd 64.5%, #fdd5ce 67.7%, #fcced1 71.0%, #fbc7d8 74.2%, #f6c0e2 77.4%, #eebbed 80.6%, #e4b7f6 83.9%, #dab3fb 87.1%, #d1aefe 90.3%, #caaaff 93.5%, #c4a6ff 96.8%, #c0a3ff 100.0%);
background: linear-gradient(90deg in oklch, oklch(100.00% 0.0000 89.88) 0.0%, oklch(100.00% 0.0000 89.88) 3.2%, oklch(100.00% 0.0000 89.88) 6.5%, oklch(100.00% 0.0000 89.88) 9.7%, oklch(100.00% 0.0000 89.88) 12.9%, oklch(100.00% 0.0000 89.88) 16.1%, oklch(99.97% 0.0011 108.61) 19.4%, oklch(99.95% 0.0021 107.80) 22.6%, oklch(99.91% 0.0042 106.62) 25.8%, oklch(99.83% 0.0071 105.60) 29.0%, oklch(99.68% 0.0116 104.64) 32.3%, oklch(99.46% 0.0195 104.79) 35.5%, oklch(99.25% 0.0360 106.83) 38.7%, oklch(98.99% 0.0457 109.19) 41.9%, oklch(98.60% 0.0579 110.22) 45.2%, oklch(98.02% 0.0645 108.17) 48.4%, oklch(97.18% 0.0663 101.48) 51.6%, oklch(96.04% 0.0510 90.37) 54.8%, oklch(94.70% 0.0442 76.23) 58.1%, oklch(93.27% 0.0428 60.52) 61.3%, oklch(91.84% 0.0438 44.63) 64.5%, oklch(90.51% 0.0454 29.75) 67.7%, oklch(89.22% 0.0527 13.80) 71.0%, oklch(87.92% 0.0635 357.06) 74.2%, oklch(86.63% 0.0759 340.94) 77.4%, oklch(85.33% 0.0880 326.79) 80.6%, oklch(84.03% 0.0979 316.00) 83.9%, oklch(82.61% 0.1069 308.73) 87.1%, oklch(81.10% 0.1156 304.04) 90.3%, oklch(79.66% 0.1225 301.14) 93.5%, oklch(78.43% 0.1278 299.20) 96.8%, oklch(77.56% 0.1311 297.44) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 1 | 0 | 107.6 |
| 2 | 1 | 0 | 109.7 |
| 3 | 0.996 | 0.023 | 104.4 |
| 4 | 0.976 | 0.066 | 105.5 |
| 5 | 0.909 | 0.044 | 34.7 |
| 6 | 0.843 | 0.096 | -42.5 |
| 7 | 0.776 | 0.135 | -62.6 |

## In these collections

- [Spring gradients](https://grabient.com/spring-gradients)
- [Lavender](https://grabient.com/lavender)

## Other forms

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