# Butter Yellow and Blue: Bronze and gold

The "Butter Yellow and Blue: Bronze and gold" palette brings together orange, gold, pale green, and light blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits travel posters and environmental mood boards. Its darkest tone is orange, and its lightest tone is pale green.

- Also called: Monochrome brown to gray linear gradient
- Seed: `kWgzQpWCJBu4eQf0DEPaArOw`
- Page: https://grabient.com/kWgzQpWCJBu4eQf0DEPaArOw?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, pastel, light
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#875d3d` | `oklch(51.57% 0.0717 57.66)` | Artisan Tile | white, 5.7 to 1 |
| 2 | `#8c613f` | `oklch(53.00% 0.0737 58.83)` | Fertile Soil | white, 5.3 to 1 |
| 3 | `#926642` | `oklch(54.90% 0.0766 60.37)` | Topaz Mountain | white, 4.9 to 1 |
| 4 | `#9a6d44` | `oklch(57.16% 0.0801 62.21)` | Must Love Dogs | black, 4.6 to 1 |
| 5 | `#a27448` | `oklch(59.67% 0.0838 64.26)` | English Bartlett | black, 5.1 to 1 |
| 6 | `#ab7c4b` | `oklch(62.31% 0.0874 66.44)` | Hidden Morel | black, 5.7 to 1 |
| 7 | `#b38550` | `oklch(64.97% 0.0905 68.68)` | Rice Curry | black, 6.3 to 1 |
| 8 | `#bb8d54` | `oklch(67.52% 0.0928 70.87)` | Summer Weasel | black, 7 to 1 |
| 9 | `#c29559` | `oklch(69.86% 0.0939 72.96)` | Caramel Crumb | black, 7.7 to 1 |
| 10 | `#c89d60` | `oklch(72.25% 0.0942 74.89)` | Ole Yeller | black, 8.4 to 1 |
| 11 | `#cfa567` | `oklch(74.73% 0.0941 76.73)` | Campground | black, 9.2 to 1 |
| 12 | `#d5ae6f` | `oklch(77.23% 0.0934 78.58)` | New Wheat | black, 10.1 to 1 |
| 13 | `#dcb777` | `oklch(79.67% 0.0921 80.53)` | Soft Chamois | black, 11 to 1 |
| 14 | `#e1bf7f` | `oklch(81.97% 0.0903 82.66)` | Chalky | black, 11.9 to 1 |
| 15 | `#e5c788` | `oklch(84.06% 0.0877 85.06)` | Beachcombing | black, 12.8 to 1 |
| 16 | `#e8ce90` | `oklch(85.85% 0.0845 87.82)` | Lol Yellow | black, 13.6 to 1 |
| 17 | `#e9d498` | `oklch(87.30% 0.0805 90.84)` | Lifeless Planet | black, 14.3 to 1 |
| 18 | `#ead9a1` | `oklch(88.54% 0.0748 93.30)` | Leaf Yellow | black, 14.9 to 1 |
| 19 | `#eaddaa` | `oklch(89.57% 0.0679 95.48)` | Refreshing Tea | black, 15.4 to 1 |
| 20 | `#eae0b3` | `oklch(90.40% 0.0604 97.88)` | Cookies and Cream | black, 15.8 to 1 |
| 21 | `#e8e3bb` | `oklch(91.00% 0.0526 101.00)` | Spring Fever | black, 16.1 to 1 |
| 22 | `#e6e5c3` | `oklch(91.38% 0.0453 105.33)` | Fountain Frolic | black, 16.3 to 1 |
| 23 | `#e3e6c9` | `oklch(91.52% 0.0389 111.39)` | Lazy Caterpillar | black, 16.4 to 1 |
| 24 | `#dfe6cd` | `oklch(91.41% 0.0340 119.65)` | Willow Brook | black, 16.3 to 1 |
| 25 | `#dae6d1` | `oklch(90.94% 0.0309 131.15)` | Frostee | black, 16.1 to 1 |
| 26 | `#d2e4d3` | `oklch(89.98% 0.0290 146.70)` | Sweet Mint Tea | black, 15.7 to 1 |
| 27 | `#c9e0d5` | `oklch(88.65% 0.0281 164.98)` | Melting Ice | black, 15.1 to 1 |
| 28 | `#c1dbd7` | `oklch(87.11% 0.0279 184.57)` | Meander Blue | black, 14.3 to 1 |
| 29 | `#bbd5d8` | `oklch(85.51% 0.0281 204.07)` | Rhythmic Blue | black, 13.6 to 1 |
| 30 | `#b7cfd8` | `oklch(84.01% 0.0286 222.05)` | Light Vanilla Ice | black, 12.9 to 1 |
| 31 | `#b6cad7` | `oklch(82.75% 0.0289 237.13)` | Denim Light | black, 12.3 to 1 |
| 32 | `#b6c6d6` | `oklch(81.89% 0.0289 247.87)` | Stargate | black, 12 to 1 |

## CSS

```css
background: linear-gradient(135deg, #875d3d 0.0%, #8c613f 3.2%, #926642 6.5%, #9a6d44 9.7%, #a27448 12.9%, #ab7c4b 16.1%, #b38550 19.4%, #bb8d54 22.6%, #c29559 25.8%, #c89d60 29.0%, #cfa567 32.3%, #d5ae6f 35.5%, #dcb777 38.7%, #e1bf7f 41.9%, #e5c788 45.2%, #e8ce90 48.4%, #e9d498 51.6%, #ead9a1 54.8%, #eaddaa 58.1%, #eae0b3 61.3%, #e8e3bb 64.5%, #e6e5c3 67.7%, #e3e6c9 71.0%, #dfe6cd 74.2%, #dae6d1 77.4%, #d2e4d3 80.6%, #c9e0d5 83.9%, #c1dbd7 87.1%, #bbd5d8 90.3%, #b7cfd8 93.5%, #b6cad7 96.8%, #b6c6d6 100.0%);
background: linear-gradient(135deg in oklch, oklch(51.57% 0.0717 57.66) 0.0%, oklch(53.00% 0.0737 58.83) 3.2%, oklch(54.90% 0.0766 60.37) 6.5%, oklch(57.16% 0.0801 62.21) 9.7%, oklch(59.67% 0.0838 64.26) 12.9%, oklch(62.31% 0.0874 66.44) 16.1%, oklch(64.97% 0.0905 68.68) 19.4%, oklch(67.52% 0.0928 70.87) 22.6%, oklch(69.86% 0.0939 72.96) 25.8%, oklch(72.25% 0.0942 74.89) 29.0%, oklch(74.73% 0.0941 76.73) 32.3%, oklch(77.23% 0.0934 78.58) 35.5%, oklch(79.67% 0.0921 80.53) 38.7%, oklch(81.97% 0.0903 82.66) 41.9%, oklch(84.06% 0.0877 85.06) 45.2%, oklch(85.85% 0.0845 87.82) 48.4%, oklch(87.30% 0.0805 90.84) 51.6%, oklch(88.54% 0.0748 93.30) 54.8%, oklch(89.57% 0.0679 95.48) 58.1%, oklch(90.40% 0.0604 97.88) 61.3%, oklch(91.00% 0.0526 101.00) 64.5%, oklch(91.38% 0.0453 105.33) 67.7%, oklch(91.52% 0.0389 111.39) 71.0%, oklch(91.41% 0.0340 119.65) 74.2%, oklch(90.94% 0.0309 131.15) 77.4%, oklch(89.98% 0.0290 146.70) 80.6%, oklch(88.65% 0.0281 164.98) 83.9%, oklch(87.11% 0.0279 184.57) 87.1%, oklch(85.51% 0.0281 204.07) 90.3%, oklch(84.01% 0.0286 222.05) 93.5%, oklch(82.75% 0.0289 237.13) 96.8%, oklch(81.89% 0.0289 247.87) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.516 | 0.072 | 57.7 |
| 2 | 0.693 | 0.094 | 72.5 |
| 3 | 0.866 | 0.083 | 89.4 |
| 4 | 0.913 | 0.033 | 122.1 |
| 5 | 0.819 | 0.029 | 247.9 |

## In these collections

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

## Other forms

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