# Blue Porcelain and Tea Cream

The Mauve, gold and gray color palette brings together blue, gold, pale orange, and gray. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is gray, and its lightest tone is pale orange.

- Also called: Pastel blue, tan and gray linear swatches
- Seed: `kUqCOmaZivPMKv5ICDGA`
- Page: https://grabient.com/kUqCOmaZivPMKv5ICDGA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, pastel, light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#7698ac` | `oklch(66.14% 0.0482 233.44)` | Post Boy | black, 6.8 to 1 |
| 2 | `#d7c795` | `oklch(83.07% 0.0675 91.83)` | Parsnip | black, 12.4 to 1 |
| 3 | `#e8dfcb` | `oklch(90.55% 0.0289 88.66)` | Muscovite | black, 15.8 to 1 |
| 4 | `#7e727d` | `oklch(56.69% 0.0220 327.14)` | Plush Velvet | black, 4.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #7698ac 0.000% 25.000%, #d7c795 25.000% 50.000%, #e8dfcb 50.000% 75.000%, #7e727d 75.000% 100.000%);
background: linear-gradient(90deg, oklch(66.14% 0.0482 233.44) 0.000% 25.000%, oklch(83.07% 0.0675 91.83) 25.000% 50.000%, oklch(90.55% 0.0289 88.66) 50.000% 75.000%, oklch(56.69% 0.0220 327.14) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.661 | 0.048 | 233.4 |
| 2 | 0.831 | 0.068 | 91.8 |
| 3 | 0.906 | 0.029 | 88.7 |
| 4 | 0.567 | 0.022 | -32.9 |

## In these collections

- [Chrysanthemum tea porcelain](https://grabient.com/chrysanthemum-tea-porcelain)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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