# Pastel analogous blue to lavender linear gradient

Pastel analogous blue to lavender linear gradient with 32 colors: #8dc7ff, #8dc8ff, #8dc9ff, #8dcbff, #8ccdff, #8ccfff, #8cd1ff, #8dd2ff, #8ed4ff, #8fd5ff, #92d6ff, #94d7ff, #97d7ff, #9bd7ff, #9ed8ff, #a2d8ff, #a6d8ff, #aad7ff, #aed7fe, #b1d7fe, #b5d6fe, #b8d5ff, #bbd4ff, #bfd3ff, #c3d1ff, #c8d0ff, #ccceff, #d0ccff, #d5c9ff, #d9c7fe, #dcc6fd, #dfc5fc. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUzkiw66E-e4YQltnUXg`
- Page: https://grabient.com/kUzkiw66E-e4YQltnUXg?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: even lightness, pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#8dc7ff` | `oklch(81.10% 0.0992 248.20)` | Platonic Blue | black, 11.7 to 1 |
| 2 | `#8dc8ff` | `oklch(81.31% 0.0988 247.34)` | Platonic Blue | black, 11.8 to 1 |
| 3 | `#8dc9ff` | `oklch(81.59% 0.0983 246.05)` | Clear Sky | black, 11.9 to 1 |
| 4 | `#8dcbff` | `oklch(81.92% 0.0976 244.46)` | Clear Sky | black, 12.1 to 1 |
| 5 | `#8ccdff` | `oklch(82.29% 0.0967 242.71)` | Clear Sky | black, 12.2 to 1 |
| 6 | `#8ccfff` | `oklch(82.68% 0.0959 240.90)` | Clear Sky | black, 12.4 to 1 |
| 7 | `#8cd1ff` | `oklch(83.09% 0.0950 239.16)` | Long Island Sound | black, 12.6 to 1 |
| 8 | `#8dd2ff` | `oklch(83.49% 0.0939 237.63)` | Long Island Sound | black, 12.8 to 1 |
| 9 | `#8ed4ff` | `oklch(83.88% 0.0928 236.41)` | Long Island Sound | black, 13 to 1 |
| 10 | `#8fd5ff` | `oklch(84.24% 0.0913 235.64)` | Long Island Sound | black, 13.1 to 1 |
| 11 | `#92d6ff` | `oklch(84.55% 0.0896 235.44)` | Long Island Sound | black, 13.2 to 1 |
| 12 | `#94d7ff` | `oklch(84.82% 0.0876 235.83)` | Shiva Blue | black, 13.4 to 1 |
| 13 | `#97d7ff` | `oklch(85.08% 0.0854 236.56)` | Shiva Blue | black, 13.5 to 1 |
| 14 | `#9bd7ff` | `oklch(85.32% 0.0830 237.61)` | Shiva Blue | black, 13.5 to 1 |
| 15 | `#9ed8ff` | `oklch(85.56% 0.0805 238.97)` | Shiva Blue | black, 13.6 to 1 |
| 16 | `#a2d8ff` | `oklch(85.77% 0.0780 240.64)` | Malmö FF | black, 13.7 to 1 |
| 17 | `#a6d8ff` | `oklch(85.97% 0.0756 242.61)` | Malmö FF | black, 13.8 to 1 |
| 18 | `#aad7ff` | `oklch(86.15% 0.0728 244.88)` | Malmö FF | black, 13.8 to 1 |
| 19 | `#aed7fe` | `oklch(86.31% 0.0702 247.43)` | Malmö FF | black, 13.9 to 1 |
| 20 | `#b1d7fe` | `oklch(86.45% 0.0681 250.27)` | Malmö FF | black, 13.9 to 1 |
| 21 | `#b5d6fe` | `oklch(86.56% 0.0667 253.38)` | Ice Cold Stare | black, 14 to 1 |
| 22 | `#b8d5ff` | `oklch(86.64% 0.0660 256.80)` | Ice Cold Stare | black, 14 to 1 |
| 23 | `#bbd4ff` | `oklch(86.68% 0.0654 261.01)` | Ice Cold Stare | black, 14 to 1 |
| 24 | `#bfd3ff` | `oklch(86.68% 0.0649 265.98)` | Pale Phthalo Blue | black, 13.9 to 1 |
| 25 | `#c3d1ff` | `oklch(86.65% 0.0652 271.48)` | Lavender Blue | black, 13.9 to 1 |
| 26 | `#c8d0ff` | `oklch(86.60% 0.0663 277.29)` | Lavender Blue | black, 13.8 to 1 |
| 27 | `#ccceff` | `oklch(86.53% 0.0682 283.20)` | Lavender Blue | black, 13.8 to 1 |
| 28 | `#d0ccff` | `oklch(86.45% 0.0710 288.97)` | Lavender Blue | black, 13.7 to 1 |
| 29 | `#d5c9ff` | `oklch(86.38% 0.0745 294.39)` | Innocent Snowdrop | black, 13.6 to 1 |
| 30 | `#d9c7fe` | `oklch(86.31% 0.0775 299.24)` | Neon Boneyard | black, 13.5 to 1 |
| 31 | `#dcc6fd` | `oklch(86.25% 0.0790 303.29)` | Neon Boneyard | black, 13.5 to 1 |
| 32 | `#dfc5fc` | `oklch(86.22% 0.0799 306.32)` | Neon Boneyard | black, 13.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #8dc7ff 0.0%, #8dc8ff 3.2%, #8dc9ff 6.5%, #8dcbff 9.7%, #8ccdff 12.9%, #8ccfff 16.1%, #8cd1ff 19.4%, #8dd2ff 22.6%, #8ed4ff 25.8%, #8fd5ff 29.0%, #92d6ff 32.3%, #94d7ff 35.5%, #97d7ff 38.7%, #9bd7ff 41.9%, #9ed8ff 45.2%, #a2d8ff 48.4%, #a6d8ff 51.6%, #aad7ff 54.8%, #aed7fe 58.1%, #b1d7fe 61.3%, #b5d6fe 64.5%, #b8d5ff 67.7%, #bbd4ff 71.0%, #bfd3ff 74.2%, #c3d1ff 77.4%, #c8d0ff 80.6%, #ccceff 83.9%, #d0ccff 87.1%, #d5c9ff 90.3%, #d9c7fe 93.5%, #dcc6fd 96.8%, #dfc5fc 100.0%);
background: linear-gradient(90deg in oklch, oklch(81.10% 0.0992 248.20) 0.0%, oklch(81.31% 0.0988 247.34) 3.2%, oklch(81.59% 0.0983 246.05) 6.5%, oklch(81.92% 0.0976 244.46) 9.7%, oklch(82.29% 0.0967 242.71) 12.9%, oklch(82.68% 0.0959 240.90) 16.1%, oklch(83.09% 0.0950 239.16) 19.4%, oklch(83.49% 0.0939 237.63) 22.6%, oklch(83.88% 0.0928 236.41) 25.8%, oklch(84.24% 0.0913 235.64) 29.0%, oklch(84.55% 0.0896 235.44) 32.3%, oklch(84.82% 0.0876 235.83) 35.5%, oklch(85.08% 0.0854 236.56) 38.7%, oklch(85.32% 0.0830 237.61) 41.9%, oklch(85.56% 0.0805 238.97) 45.2%, oklch(85.77% 0.0780 240.64) 48.4%, oklch(85.97% 0.0756 242.61) 51.6%, oklch(86.15% 0.0728 244.88) 54.8%, oklch(86.31% 0.0702 247.43) 58.1%, oklch(86.45% 0.0681 250.27) 61.3%, oklch(86.56% 0.0667 253.38) 64.5%, oklch(86.64% 0.0660 256.80) 67.7%, oklch(86.68% 0.0654 261.01) 71.0%, oklch(86.68% 0.0649 265.98) 74.2%, oklch(86.65% 0.0652 271.48) 77.4%, oklch(86.60% 0.0663 277.29) 80.6%, oklch(86.53% 0.0682 283.20) 83.9%, oklch(86.45% 0.0710 288.97) 87.1%, oklch(86.38% 0.0745 294.39) 90.3%, oklch(86.31% 0.0775 299.24) 93.5%, oklch(86.25% 0.0790 303.29) 96.8%, oklch(86.22% 0.0799 306.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.811 | 0.099 | 248.2 |
| 2 | 0.846 | 0.091 | 235.5 |
| 3 | 0.866 | 0.066 | 255.6 |
| 4 | 0.862 | 0.08 | 306.3 |

## In these collections

- [Spring gradients](https://grabient.com/spring-gradients)
- [Pastel gradients](https://grabient.com/pastel-gradients)
- [Soft multicolor gradients](https://grabient.com/soft-multicolor-gradients)

## Other forms

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