# Aqua beside Buttercream

The Gold and stone cream palette brings together light orange, orange, and light teal. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is light orange.

- Also called: Monochrome beige, tan and gray linear swatches
- Seed: `kU3ig52Zq-jCLPVjjdFg`
- Page: https://grabient.com/kU3ig52Zq-jCLPVjjdFg?style=linearSwatches&steps=4&angle=135
- Drawn as: linear swatches, 4 steps, 135 degrees
- Kinds: dark center, muted, warm, monochrome
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 6.8 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 | `#e8d2ad` | `oklch(87.40% 0.0551 80.86)` | Tuscan Bread | black, 14.3 to 1 |
| 2 | `#be986e` | `oklch(70.47% 0.0730 69.24)` | Etruscan Bronze | black, 7.9 to 1 |
| 3 | `#513e35` | `oklch(38.19% 0.0303 47.04)` | Obsidian Brown | white, 10 to 1 |
| 4 | `#9ec0c0` | `oklch(78.35% 0.0372 194.99)` | Frosty Glade | black, 10.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #e8d2ad 0.000% 25.000%, #be986e 25.000% 50.000%, #513e35 50.000% 75.000%, #9ec0c0 75.000% 100.000%);
background: linear-gradient(135deg, oklch(87.40% 0.0551 80.86) 0.000% 25.000%, oklch(70.47% 0.0730 69.24) 25.000% 50.000%, oklch(38.19% 0.0303 47.04) 50.000% 75.000%, oklch(78.35% 0.0372 194.99) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.055 | 80.9 |
| 2 | 0.705 | 0.073 | 69.2 |
| 3 | 0.382 | 0.03 | 47 |
| 4 | 0.783 | 0.037 | 195 |

## In these collections

- [Cream](https://grabient.com/cream)

## Other forms

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