# Sky to periwinkle

Pastel monochrome blue linear gradient with 32 colors: #d9f0ff, #d6eeff, #d1ecff, #cceaff, #c6e7ff, #c0e4ff, #bae1ff, #b4deff, #afdbff, #a9d8ff, #a4d6ff, #a0d4ff, #9dd2fe, #99d2fd, #96d1fc, #92d0fb, #8fd0fa, #8ccff8, #89cef7, #87cdf6, #84cbf5, #82c8f4, #81c4f3, #80bff2, #80baf1, #82b3f0, #84adee, #86a7eb, #89a1e8, #8b9be5, #8e96e2, #8f93e0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Pastel monochrome blue linear gradient
- Seed: `kEdnw_2j1f8YPJ9Bj5PgA`
- Page: https://grabient.com/kEdnw_2j1f8YPJ9Bj5PgA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.4 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 | `#d9f0ff` | `oklch(94.28% 0.0317 236.33)` | Calcareous Sinter | black, 17.8 to 1 |
| 2 | `#d6eeff` | `oklch(93.75% 0.0345 236.85)` | Ice Castle | black, 17.5 to 1 |
| 3 | `#d1ecff` | `oklch(93.04% 0.0382 237.58)` | Veiling Waterfalls | black, 17.2 to 1 |
| 4 | `#cceaff` | `oklch(92.20% 0.0426 238.50)` | Veiling Waterfalls | black, 16.7 to 1 |
| 5 | `#c6e7ff` | `oklch(91.25% 0.0475 239.52)` | Icy Landscape | black, 16.3 to 1 |
| 6 | `#c0e4ff` | `oklch(90.24% 0.0526 240.58)` | Fresh Water | black, 15.8 to 1 |
| 7 | `#bae1ff` | `oklch(89.21% 0.0579 241.61)` | Dithered Sky | black, 15.3 to 1 |
| 8 | `#b4deff` | `oklch(88.18% 0.0632 242.55)` | Broad Daylight | black, 14.8 to 1 |
| 9 | `#afdbff` | `oklch(87.19% 0.0683 243.34)` | Droplet | black, 14.3 to 1 |
| 10 | `#a9d8ff` | `oklch(86.29% 0.0730 243.92)` | Malmö FF | black, 13.9 to 1 |
| 11 | `#a4d6ff` | `oklch(85.50% 0.0773 244.21)` | Malmö FF | black, 13.6 to 1 |
| 12 | `#a0d4ff` | `oklch(84.86% 0.0804 244.08)` | Malmö FF | black, 13.3 to 1 |
| 13 | `#9dd2fe` | `oklch(84.34% 0.0827 243.31)` | Baby Blue | black, 13.1 to 1 |
| 14 | `#99d2fd` | `oklch(83.91% 0.0845 242.08)` | Long Island Sound | black, 12.9 to 1 |
| 15 | `#96d1fc` | `oklch(83.55% 0.0860 240.55)` | Long Island Sound | black, 12.8 to 1 |
| 16 | `#92d0fb` | `oklch(83.22% 0.0871 238.92)` | Long Island Sound | black, 12.6 to 1 |
| 17 | `#8fd0fa` | `oklch(82.89% 0.0881 237.37)` | Long Island Sound | black, 12.5 to 1 |
| 18 | `#8ccff8` | `oklch(82.54% 0.0890 236.07)` | Drift on the Sea | black, 12.4 to 1 |
| 19 | `#89cef7` | `oklch(82.13% 0.0899 235.23)` | Drift on the Sea | black, 12.2 to 1 |
| 20 | `#87cdf6` | `oklch(81.63% 0.0909 235.01)` | Drift on the Sea | black, 12 to 1 |
| 21 | `#84cbf5` | `oklch(81.02% 0.0922 235.60)` | Drift on the Sea | black, 11.8 to 1 |
| 22 | `#82c8f4` | `oklch(80.26% 0.0938 237.20)` | Nevermind Nirvana | black, 11.5 to 1 |
| 23 | `#81c4f3` | `oklch(79.30% 0.0956 240.02)` | Nevermind Nirvana | black, 11.1 to 1 |
| 24 | `#80bff2` | `oklch(78.18% 0.0977 243.88)` | Electric Eel | black, 10.6 to 1 |
| 25 | `#80baf1` | `oklch(76.94% 0.0998 248.51)` | Electric Eel | black, 10.1 to 1 |
| 26 | `#82b3f0` | `oklch(75.63% 0.1020 253.66)` | Fly Away | black, 9.6 to 1 |
| 27 | `#84adee` | `oklch(74.30% 0.1042 259.06)` | Kitten’s Eye | black, 9.1 to 1 |
| 28 | `#86a7eb` | `oklch(73.00% 0.1063 264.46)` | Blue Cue | black, 8.7 to 1 |
| 29 | `#89a1e8` | `oklch(71.78% 0.1083 269.58)` | Blue Cue | black, 8.2 to 1 |
| 30 | `#8b9be5` | `oklch(70.69% 0.1101 274.18)` | Portage | black, 7.9 to 1 |
| 31 | `#8e96e2` | `oklch(69.78% 0.1115 277.98)` | Portage | black, 7.6 to 1 |
| 32 | `#8f93e0` | `oklch(69.09% 0.1127 280.74)` | Portage | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #d9f0ff 0.0%, #d6eeff 3.2%, #d1ecff 6.5%, #cceaff 9.7%, #c6e7ff 12.9%, #c0e4ff 16.1%, #bae1ff 19.4%, #b4deff 22.6%, #afdbff 25.8%, #a9d8ff 29.0%, #a4d6ff 32.3%, #a0d4ff 35.5%, #9dd2fe 38.7%, #99d2fd 41.9%, #96d1fc 45.2%, #92d0fb 48.4%, #8fd0fa 51.6%, #8ccff8 54.8%, #89cef7 58.1%, #87cdf6 61.3%, #84cbf5 64.5%, #82c8f4 67.7%, #81c4f3 71.0%, #80bff2 74.2%, #80baf1 77.4%, #82b3f0 80.6%, #84adee 83.9%, #86a7eb 87.1%, #89a1e8 90.3%, #8b9be5 93.5%, #8e96e2 96.8%, #8f93e0 100.0%);
background: linear-gradient(135deg in oklch, oklch(94.28% 0.0317 236.33) 0.0%, oklch(93.75% 0.0345 236.85) 3.2%, oklch(93.04% 0.0382 237.58) 6.5%, oklch(92.20% 0.0426 238.50) 9.7%, oklch(91.25% 0.0475 239.52) 12.9%, oklch(90.24% 0.0526 240.58) 16.1%, oklch(89.21% 0.0579 241.61) 19.4%, oklch(88.18% 0.0632 242.55) 22.6%, oklch(87.19% 0.0683 243.34) 25.8%, oklch(86.29% 0.0730 243.92) 29.0%, oklch(85.50% 0.0773 244.21) 32.3%, oklch(84.86% 0.0804 244.08) 35.5%, oklch(84.34% 0.0827 243.31) 38.7%, oklch(83.91% 0.0845 242.08) 41.9%, oklch(83.55% 0.0860 240.55) 45.2%, oklch(83.22% 0.0871 238.92) 48.4%, oklch(82.89% 0.0881 237.37) 51.6%, oklch(82.54% 0.0890 236.07) 54.8%, oklch(82.13% 0.0899 235.23) 58.1%, oklch(81.63% 0.0909 235.01) 61.3%, oklch(81.02% 0.0922 235.60) 64.5%, oklch(80.26% 0.0938 237.20) 67.7%, oklch(79.30% 0.0956 240.02) 71.0%, oklch(78.18% 0.0977 243.88) 74.2%, oklch(76.94% 0.0998 248.51) 77.4%, oklch(75.63% 0.1020 253.66) 80.6%, oklch(74.30% 0.1042 259.06) 83.9%, oklch(73.00% 0.1063 264.46) 87.1%, oklch(71.78% 0.1083 269.58) 90.3%, oklch(70.69% 0.1101 274.18) 93.5%, oklch(69.78% 0.1115 277.98) 96.8%, oklch(69.09% 0.1127 280.74) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.943 | 0.032 | 236.3 |
| 2 | 0.853 | 0.079 | 244.2 |
| 3 | 0.805 | 0.093 | 236.5 |
| 4 | 0.691 | 0.113 | 280.7 |

## In these collections

- [Light blue gradients](https://grabient.com/light-blue-gradients)

## Other forms

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