# Stone, gray and peach ui palette

The Stone, gray and peach ui palette brings together off-white, light gray, purple, and light orange. The colors span a moderate lightness range, combining restrained color with clear contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is purple, and its lightest tone is off-white.

- Also called: White, gray, lavender and beige linear swatches
- Seed: `kW9AXsagg-csMvjVGcFaZFNo`
- Page: https://grabient.com/kW9AXsagg-csMvjVGcFaZFNo?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: dark center, neutral
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#f5f0f4` | `oklch(96.06% 0.0069 331.88)` | Grim White | black, 18.6 to 1 |
| 2 | `#cfc4d2` | `oklch(83.46% 0.0220 319.19)` | Mecha Kitty | black, 12.5 to 1 |
| 3 | `#82798e` | `oklch(59.06% 0.0344 304.40)` | Mythical | black, 5 to 1 |
| 4 | `#a688b3` | `oklch(66.93% 0.0703 316.02)` | Purple Statice | black, 6.7 to 1 |
| 5 | `#dbc3a7` | `oklch(83.07% 0.0469 72.27)` | Elafonisi Beach | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f5f0f4 0.000% 20.000%, #cfc4d2 20.000% 40.000%, #82798e 40.000% 60.000%, #a688b3 60.000% 80.000%, #dbc3a7 80.000% 100.000%);
background: linear-gradient(45deg, oklch(96.06% 0.0069 331.88) 0.000% 20.000%, oklch(83.46% 0.0220 319.19) 20.000% 40.000%, oklch(59.06% 0.0344 304.40) 40.000% 60.000%, oklch(66.93% 0.0703 316.02) 60.000% 80.000%, oklch(83.07% 0.0469 72.27) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.007 | 331.9 |
| 2 | 0.835 | 0.022 | 319.2 |
| 3 | 0.591 | 0.034 | 304.4 |
| 4 | 0.669 | 0.07 | 316 |
| 5 | 0.831 | 0.047 | 432.3 |

## In these collections

- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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