# Buttercream and Blue Linen

The "Butter Yellow and Blue: Ochre and sage" palette brings together gold, light yellow, light gray, light blue, and blue. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light yellow.

- Also called: Pastel tan, gray and blue linear swatches
- Seed: `kYykRA76bAnOawNuh0Y4xHKVgVPW`
- Page: https://grabient.com/kYykRA76bAnOawNuh0Y4xHKVgVPW?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 2 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 | `#d3ba74` | `oklch(79.53% 0.0937 90.70)` | Good as Gold | black, 11 to 1 |
| 2 | `#ebd784` | `oklch(87.80% 0.1061 95.99)` | Gatsby Glitter | black, 14.5 to 1 |
| 3 | `#e9e4ac` | `oklch(90.94% 0.0730 103.38)` | Kiss of Lime | black, 16.1 to 1 |
| 4 | `#cbd8cf` | `oklch(87.01% 0.0193 156.22)` | Soft Haze | black, 14.2 to 1 |
| 5 | `#9ebbd4` | `oklch(77.95% 0.0482 243.93)` | Mångata | black, 10.5 to 1 |
| 6 | `#74a5b7` | `oklch(69.29% 0.0579 222.80)` | Estuary Blue | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #d3ba74 0.000% 16.667%, #ebd784 16.667% 33.333%, #e9e4ac 33.333% 50.000%, #cbd8cf 50.000% 66.667%, #9ebbd4 66.667% 83.333%, #74a5b7 83.333% 100.000%);
background: linear-gradient(180deg, oklch(79.53% 0.0937 90.70) 0.000% 16.667%, oklch(87.80% 0.1061 95.99) 16.667% 33.333%, oklch(90.94% 0.0730 103.38) 33.333% 50.000%, oklch(87.01% 0.0193 156.22) 50.000% 66.667%, oklch(77.95% 0.0482 243.93) 66.667% 83.333%, oklch(69.29% 0.0579 222.80) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.795 | 0.094 | 90.7 |
| 2 | 0.878 | 0.106 | 96 |
| 3 | 0.909 | 0.073 | 103.4 |
| 4 | 0.87 | 0.019 | 156.2 |
| 5 | 0.78 | 0.048 | 243.9 |
| 6 | 0.693 | 0.058 | 222.8 |

## In these collections

- [Butter yellow and blue](https://grabient.com/butter-yellow-and-blue)

## Other forms

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