# Orange, pale lavender and stone light palette

The Orange, pale lavender and stone light palette brings together off-white, pale orange, pale purple, light blue, and light green. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is light green, and its lightest tone is off-white.

- Also called: White, lavender, light blue and gray angular swatches
- Seed: `kW-Qsj9hQ__ESM5sFDe5xC3o`
- Page: https://grabient.com/kW-Qsj9hQ__ESM5sFDe5xC3o?style=angularSwatches&steps=5&angle=270
- Drawn as: angular swatches, 5 steps, 270 degrees
- Kinds: pastel, light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 1.6 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 | `#fff7f2` | `oklch(98.03% 0.0108 49.96)` | Sugar Milk | black, 19.7 to 1 |
| 2 | `#ffe1d0` | `oklch(92.91% 0.0403 49.93)` | Powdered Peach | black, 16.8 to 1 |
| 3 | `#e2d3f6` | `oklch(88.98% 0.0496 305.30)` | Japan Blush | black, 14.8 to 1 |
| 4 | `#acd4ed` | `oklch(85.04% 0.0551 235.56)` | Vive le Vent | black, 13.4 to 1 |
| 5 | `#a7cbba` | `oklch(81.10% 0.0455 165.81)` | Greywacke | black, 11.8 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #fff7f2 0.000% 20.000%, #ffe1d0 20.000% 40.000%, #e2d3f6 40.000% 60.000%, #acd4ed 60.000% 80.000%, #a7cbba 80.000% 100.000%);
background: conic-gradient(from 270deg, oklch(98.03% 0.0108 49.96) 0.000% 20.000%, oklch(92.91% 0.0403 49.93) 20.000% 40.000%, oklch(88.98% 0.0496 305.30) 40.000% 60.000%, oklch(85.04% 0.0551 235.56) 60.000% 80.000%, oklch(81.10% 0.0455 165.81) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.015 | 49.9 |
| 2 | 0.929 | 0.055 | 49.9 |
| 3 | 0.89 | 0.05 | -54.7 |
| 4 | 0.85 | 0.055 | -124.4 |
| 5 | 0.811 | 0.045 | -194.2 |

## In these collections

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

## Other forms

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