# Periwinkle and pale lavender light ui palette

The Periwinkle and pale lavender light ui palette brings together light blue and light purple. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is light purple, and its lightest tone is light blue.

- Also called: Pastel monochrome lavender radial gradient
- Seed: `kUwVfK6C9A2WtwVeKEEg`
- Page: https://grabient.com/kUwVfK6C9A2WtwVeKEEg?style=radialGradient&steps=48&angle=300
- Drawn as: radial gradient, 48 steps, 300 degrees
- Kinds: even lightness, pastel, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.3 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 | `#a9a6fa` | `oklch(75.98% 0.1199 284.77)` | Shy Moment | black, 9.5 to 1 |
| 2 | `#aaa6fb` | `oklch(76.21% 0.1203 285.02)` | Shy Moment | black, 9.5 to 1 |
| 3 | `#aba7fc` | `oklch(76.51% 0.1207 285.32)` | Shy Moment | black, 9.6 to 1 |
| 4 | `#ada8fe` | `oklch(76.86% 0.1213 285.66)` | Shy Moment | black, 9.8 to 1 |
| 5 | `#aea9ff` | `oklch(77.26% 0.1214 286.03)` | Shy Moment | black, 9.9 to 1 |
| 6 | `#b0abff` | `oklch(77.70% 0.1191 286.43)` | Shy Moment | black, 10.1 to 1 |
| 7 | `#b3acff` | `oklch(78.17% 0.1167 286.87)` | Winterspring Lilac | black, 10.2 to 1 |
| 8 | `#b5aeff` | `oklch(78.65% 0.1143 287.33)` | Winterspring Lilac | black, 10.4 to 1 |
| 9 | `#b7b0ff` | `oklch(79.14% 0.1118 287.82)` | Winterspring Lilac | black, 10.6 to 1 |
| 10 | `#b9b1ff` | `oklch(79.62% 0.1093 288.33)` | Winterspring Lilac | black, 10.8 to 1 |
| 11 | `#bbb3ff` | `oklch(80.09% 0.1070 288.87)` | Greyish Lavender | black, 10.9 to 1 |
| 12 | `#bdb4ff` | `oklch(80.52% 0.1049 289.42)` | Greyish Lavender | black, 11.1 to 1 |
| 13 | `#bfb6ff` | `oklch(80.92% 0.1030 289.99)` | Greyish Lavender | black, 11.3 to 1 |
| 14 | `#c1b7ff` | `oklch(81.27% 0.1014 290.57)` | Greyish Lavender | black, 11.4 to 1 |
| 15 | `#c3b8ff` | `oklch(81.57% 0.1001 291.16)` | Dried Lilac | black, 11.5 to 1 |
| 16 | `#c4b8ff` | `oklch(81.79% 0.0993 291.76)` | Dried Lilac | black, 11.6 to 1 |
| 17 | `#c5b8ff` | `oklch(81.93% 0.0990 292.37)` | Violet Heaven | black, 11.7 to 1 |
| 18 | `#c6b8ff` | `oklch(82.02% 0.0990 293.01)` | Violet Heaven | black, 11.7 to 1 |
| 19 | `#c7b8ff` | `oklch(82.06% 0.0993 293.68)` | Violet Heaven | black, 11.7 to 1 |
| 20 | `#c8b8ff` | `oklch(82.06% 0.0999 294.38)` | Violet Heaven | black, 11.7 to 1 |
| 21 | `#c9b7ff` | `oklch(82.02% 0.1007 295.10)` | Violet Heaven | black, 11.7 to 1 |
| 22 | `#c9b7ff` | `oklch(81.95% 0.1019 295.85)` | Violet Heaven | black, 11.6 to 1 |
| 23 | `#cab6ff` | `oklch(81.85% 0.1032 296.61)` | Violet Heaven | black, 11.6 to 1 |
| 24 | `#cab5ff` | `oklch(81.72% 0.1049 297.39)` | Violet Heaven | black, 11.5 to 1 |
| 25 | `#cbb4ff` | `oklch(81.56% 0.1067 298.17)` | Violet Heaven | black, 11.4 to 1 |
| 26 | `#ccb3ff` | `oklch(81.38% 0.1087 298.96)` | Teasel Dipsacus | black, 11.4 to 1 |
| 27 | `#ccb1ff` | `oklch(81.18% 0.1109 299.75)` | Teasel Dipsacus | black, 11.3 to 1 |
| 28 | `#cdb0ff` | `oklch(80.97% 0.1133 300.53)` | Teasel Dipsacus | black, 11.2 to 1 |
| 29 | `#cdaeff` | `oklch(80.74% 0.1158 301.31)` | Teasel Dipsacus | black, 11.1 to 1 |
| 30 | `#cdadff` | `oklch(80.50% 0.1184 302.08)` | Purple Hepatica | black, 11 to 1 |
| 31 | `#ceabff` | `oklch(80.25% 0.1211 302.82)` | Purple Hepatica | black, 10.9 to 1 |
| 32 | `#ceaaff` | `oklch(80.00% 0.1239 303.55)` | Purple Hepatica | black, 10.7 to 1 |
| 33 | `#cfa8fe` | `oklch(79.74% 0.1250 304.27)` | Purple Hepatica | black, 10.6 to 1 |
| 34 | `#cea7fc` | `oklch(79.43% 0.1242 305.01)` | Purple Hepatica | black, 10.5 to 1 |
| 35 | `#cea6fa` | `oklch(79.08% 0.1233 305.77)` | Purple Hepatica | black, 10.4 to 1 |
| 36 | `#cea4f7` | `oklch(78.69% 0.1223 306.55)` | Lilac | black, 10.3 to 1 |
| 37 | `#cda3f5` | `oklch(78.27% 0.1212 307.34)` | Lilac | black, 10.1 to 1 |
| 38 | `#cca2f2` | `oklch(77.83% 0.1201 308.13)` | Lavender Cream | black, 9.9 to 1 |
| 39 | `#cba0ef` | `oklch(77.38% 0.1189 308.91)` | Lavender Cream | black, 9.8 to 1 |
| 40 | `#cb9fec` | `oklch(76.92% 0.1178 309.67)` | Lavender Cream | black, 9.6 to 1 |
| 41 | `#ca9dea` | `oklch(76.47% 0.1166 310.41)` | Lavender Cream | black, 9.5 to 1 |
| 42 | `#c99ce7` | `oklch(76.03% 0.1154 311.13)` | Lavender Cream | black, 9.3 to 1 |
| 43 | `#c89ae5` | `oklch(75.60% 0.1143 311.80)` | Somewhere in a Fairytale | black, 9.2 to 1 |
| 44 | `#c799e2` | `oklch(75.20% 0.1133 312.43)` | Somewhere in a Fairytale | black, 9.1 to 1 |
| 45 | `#c698e0` | `oklch(74.84% 0.1124 313.01)` | Somewhere in a Fairytale | black, 8.9 to 1 |
| 46 | `#c697de` | `oklch(74.51% 0.1115 313.53)` | Somewhere in a Fairytale | black, 8.8 to 1 |
| 47 | `#c596dd` | `oklch(74.24% 0.1108 313.98)` | Somewhere in a Fairytale | black, 8.7 to 1 |
| 48 | `#c596db` | `oklch(74.02% 0.1102 314.35)` | Somewhere in a Fairytale | black, 8.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #a9a6fa 0.0%, #aaa6fb 2.1%, #aba7fc 4.3%, #ada8fe 6.4%, #aea9ff 8.5%, #b0abff 10.6%, #b3acff 12.8%, #b5aeff 14.9%, #b7b0ff 17.0%, #b9b1ff 19.1%, #bbb3ff 21.3%, #bdb4ff 23.4%, #bfb6ff 25.5%, #c1b7ff 27.7%, #c3b8ff 29.8%, #c4b8ff 31.9%, #c5b8ff 34.0%, #c6b8ff 36.2%, #c7b8ff 38.3%, #c8b8ff 40.4%, #c9b7ff 42.6%, #c9b7ff 44.7%, #cab6ff 46.8%, #cab5ff 48.9%, #cbb4ff 51.1%, #ccb3ff 53.2%, #ccb1ff 55.3%, #cdb0ff 57.4%, #cdaeff 59.6%, #cdadff 61.7%, #ceabff 63.8%, #ceaaff 66.0%, #cfa8fe 68.1%, #cea7fc 70.2%, #cea6fa 72.3%, #cea4f7 74.5%, #cda3f5 76.6%, #cca2f2 78.7%, #cba0ef 80.9%, #cb9fec 83.0%, #ca9dea 85.1%, #c99ce7 87.2%, #c89ae5 89.4%, #c799e2 91.5%, #c698e0 93.6%, #c697de 95.7%, #c596dd 97.9%, #c596db 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(75.98% 0.1199 284.77) 0.0%, oklch(76.21% 0.1203 285.02) 2.1%, oklch(76.51% 0.1207 285.32) 4.3%, oklch(76.86% 0.1213 285.66) 6.4%, oklch(77.26% 0.1214 286.03) 8.5%, oklch(77.70% 0.1191 286.43) 10.6%, oklch(78.17% 0.1167 286.87) 12.8%, oklch(78.65% 0.1143 287.33) 14.9%, oklch(79.14% 0.1118 287.82) 17.0%, oklch(79.62% 0.1093 288.33) 19.1%, oklch(80.09% 0.1070 288.87) 21.3%, oklch(80.52% 0.1049 289.42) 23.4%, oklch(80.92% 0.1030 289.99) 25.5%, oklch(81.27% 0.1014 290.57) 27.7%, oklch(81.57% 0.1001 291.16) 29.8%, oklch(81.79% 0.0993 291.76) 31.9%, oklch(81.93% 0.0990 292.37) 34.0%, oklch(82.02% 0.0990 293.01) 36.2%, oklch(82.06% 0.0993 293.68) 38.3%, oklch(82.06% 0.0999 294.38) 40.4%, oklch(82.02% 0.1007 295.10) 42.6%, oklch(81.95% 0.1019 295.85) 44.7%, oklch(81.85% 0.1032 296.61) 46.8%, oklch(81.72% 0.1049 297.39) 48.9%, oklch(81.56% 0.1067 298.17) 51.1%, oklch(81.38% 0.1087 298.96) 53.2%, oklch(81.18% 0.1109 299.75) 55.3%, oklch(80.97% 0.1133 300.53) 57.4%, oklch(80.74% 0.1158 301.31) 59.6%, oklch(80.50% 0.1184 302.08) 61.7%, oklch(80.25% 0.1211 302.82) 63.8%, oklch(80.00% 0.1239 303.55) 66.0%, oklch(79.74% 0.1250 304.27) 68.1%, oklch(79.43% 0.1242 305.01) 70.2%, oklch(79.08% 0.1233 305.77) 72.3%, oklch(78.69% 0.1223 306.55) 74.5%, oklch(78.27% 0.1212 307.34) 76.6%, oklch(77.83% 0.1201 308.13) 78.7%, oklch(77.38% 0.1189 308.91) 80.9%, oklch(76.92% 0.1178 309.67) 83.0%, oklch(76.47% 0.1166 310.41) 85.1%, oklch(76.03% 0.1154 311.13) 87.2%, oklch(75.60% 0.1143 311.80) 89.4%, oklch(75.20% 0.1133 312.43) 91.5%, oklch(74.84% 0.1124 313.01) 93.6%, oklch(74.51% 0.1115 313.53) 95.7%, oklch(74.24% 0.1108 313.98) 97.9%, oklch(74.02% 0.1102 314.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.76 | 0.12 | 284.8 |
| 2 | 0.819 | 0.13 | 292.2 |
| 3 | 0.799 | 0.125 | 303.8 |
| 4 | 0.74 | 0.11 | 314.4 |

## In these collections

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

## Other forms

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