# Gold butter yellow and blue palette

The Gold butter yellow and blue palette brings together gold, blue, light orange, light blue, and pale orange. The colors span a moderate lightness range, combining restrained 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 pale orange.

- Also called: Beige, blue and gray linear swatches
- Seed: `kW3jRDThZRWiSrbsCU-9Q8wg`
- Page: https://grabient.com/kW3jRDThZRWiSrbsCU-9Q8wg?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: pastel, light
- Hues: wide
- Contrast of its darkest and lightest colors: 2.9 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 | `#e5d6a0` | `oklch(87.40% 0.0717 94.22)` | Early Sprout | black, 14.3 to 1 |
| 2 | `#6389a6` | `oklch(61.42% 0.0606 241.11)` | Sea Crystal | black, 5.6 to 1 |
| 3 | `#d3c4a0` | `oklch(82.28% 0.0510 86.82)` | Champagne Beige | black, 12.1 to 1 |
| 4 | `#bdd2d9` | `oklch(85.04% 0.0248 219.97)` | Light Salt Spray | black, 13.3 to 1 |
| 5 | `#f0e4c6` | `oklch(92.13% 0.0413 89.99)` | Tamale | black, 16.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e5d6a0 0.000% 20.000%, #6389a6 20.000% 40.000%, #d3c4a0 40.000% 60.000%, #bdd2d9 60.000% 80.000%, #f0e4c6 80.000% 100.000%);
background: linear-gradient(90deg, oklch(87.40% 0.0717 94.22) 0.000% 20.000%, oklch(61.42% 0.0606 241.11) 20.000% 40.000%, oklch(82.28% 0.0510 86.82) 40.000% 60.000%, oklch(85.04% 0.0248 219.97) 60.000% 80.000%, oklch(92.13% 0.0413 89.99) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.072 | 94.2 |
| 2 | 0.614 | 0.061 | 241.1 |
| 3 | 0.823 | 0.051 | 86.8 |
| 4 | 0.85 | 0.025 | 220 |
| 5 | 0.921 | 0.041 | 90 |

## In these collections

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

## Other forms

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