# Butter Yellow and Blue: Gold & dusty blue

The "Butter Yellow and Blue: Gold & dusty blue" palette brings together gold, light green, light blue, blue, red, orange, and light orange. 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 red, and its lightest tone is light green.

- Also called: Pastel tan, blue and gray angular gradient
- Seed: `kc11NA7KhDOkUQ_hEcs2JJDdWJTLcHMW56FAI`
- Page: https://grabient.com/kc11NA7KhDOkUQ_hEcs2JJDdWJTLcHMW56FAI?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: pastel
- Hues: complementary
- Contrast of its darkest and lightest colors: 1.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 | `#e9ca71` | `oklch(84.65% 0.1144 90.70)` | Bee Pollen | black, 13.1 to 1 |
| 2 | `#e5cd72` | `oklch(84.84% 0.1147 94.92)` | Green Papaya | black, 13.2 to 1 |
| 3 | `#dfd174` | `oklch(85.15% 0.1156 100.89)` | Golden Rice | black, 13.4 to 1 |
| 4 | `#d6d578` | `oklch(85.41% 0.1155 107.88)` | Green Gecko | black, 13.6 to 1 |
| 5 | `#cdd880` | `oklch(85.49% 0.1127 115.15)` | Goody Gumdrop | black, 13.7 to 1 |
| 6 | `#c3da8b` | `oklch(85.28% 0.1053 121.79)` | Tree Line | black, 13.7 to 1 |
| 7 | `#bdd997` | `oklch(84.86% 0.0925 127.22)` | Lickety Split | black, 13.5 to 1 |
| 8 | `#b8d7a3` | `oklch(84.26% 0.0774 133.16)` | Apple Cream | black, 13.2 to 1 |
| 9 | `#b2d4ae` | `oklch(83.49% 0.0635 141.50)` | Flower Stem | black, 12.9 to 1 |
| 10 | `#abd1b6` | `oklch(82.53% 0.0542 154.17)` | Pastel Mint Green | black, 12.5 to 1 |
| 11 | `#a1cdbf` | `oklch(81.31% 0.0497 173.80)` | Tareyton | black, 12 to 1 |
| 12 | `#9ac7c8` | `oklch(79.88% 0.0482 198.02)` | Raindrop | black, 11.4 to 1 |
| 13 | `#97c0cf` | `oklch(78.34% 0.0482 222.45)` | Neptune’s Realm | black, 10.7 to 1 |
| 14 | `#9ab8d0` | `oklch(76.80% 0.0483 242.70)` | Novella Blue | black, 10.1 to 1 |
| 15 | `#9bb1ce` | `oklch(75.27% 0.0483 254.74)` | Heartsong | black, 9.5 to 1 |
| 16 | `#98abc9` | `oklch(73.62% 0.0494 259.73)` | Scorpion Grass Blue | black, 8.9 to 1 |
| 17 | `#94a5c5` | `oklch(71.98% 0.0506 262.56)` | Wild Clary | black, 8.4 to 1 |
| 18 | `#929fc1` | `oklch(70.52% 0.0508 268.20)` | Midnight Blush | black, 7.9 to 1 |
| 19 | `#979abb` | `oklch(69.40% 0.0486 281.55)` | Thistle Down | black, 7.6 to 1 |
| 20 | `#9f94af` | `oklch(68.46% 0.0420 304.04)` | Heirloom Lilac | black, 7.3 to 1 |
| 21 | `#a490a1` | `oklch(67.72% 0.0333 331.41)` | Fields of Provence | black, 7.1 to 1 |
| 22 | `#a59096` | `oklch(67.29% 0.0263 358.94)` | Nirvana | black, 7 to 1 |
| 23 | `#a5918f` | `oklch(67.28% 0.0244 21.86)` | Tribeca | black, 7 to 1 |
| 24 | `#a9928a` | `oklch(67.78% 0.0309 38.32)` | Etherea | black, 7.1 to 1 |
| 25 | `#b29382` | `oklch(68.74% 0.0439 51.42)` | Sandrift | black, 7.4 to 1 |
| 26 | `#ba9779` | `oklch(70.03% 0.0593 61.68)` | Artisan Crafts | black, 7.7 to 1 |
| 27 | `#c19b71` | `oklch(71.53% 0.0731 69.52)` | Cardboard | black, 8.2 to 1 |
| 28 | `#c7a16d` | `oklch(73.20% 0.0814 75.14)` | Bleached Maple | black, 8.7 to 1 |
| 29 | `#cea870` | `oklch(75.39% 0.0860 77.29)` | Balsam Brown | black, 9.4 to 1 |
| 30 | `#d7b075` | `oklch(77.80% 0.0885 76.99)` | Mustard Field | black, 10.3 to 1 |
| 31 | `#dfb67b` | `oklch(79.99% 0.0898 75.79)` | Ambitious | black, 11.1 to 1 |
| 32 | `#e5bb7f` | `oklch(81.50% 0.0909 75.20)` | Corvette | black, 11.7 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #e9ca71 0.0%, #e5cd72 3.2%, #dfd174 6.5%, #d6d578 9.7%, #cdd880 12.9%, #c3da8b 16.1%, #bdd997 19.4%, #b8d7a3 22.6%, #b2d4ae 25.8%, #abd1b6 29.0%, #a1cdbf 32.3%, #9ac7c8 35.5%, #97c0cf 38.7%, #9ab8d0 41.9%, #9bb1ce 45.2%, #98abc9 48.4%, #94a5c5 51.6%, #929fc1 54.8%, #979abb 58.1%, #9f94af 61.3%, #a490a1 64.5%, #a59096 67.7%, #a5918f 71.0%, #a9928a 74.2%, #b29382 77.4%, #ba9779 80.6%, #c19b71 83.9%, #c7a16d 87.1%, #cea870 90.3%, #d7b075 93.5%, #dfb67b 96.8%, #e5bb7f 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(84.65% 0.1144 90.70) 0.0%, oklch(84.84% 0.1147 94.92) 3.2%, oklch(85.15% 0.1156 100.89) 6.5%, oklch(85.41% 0.1155 107.88) 9.7%, oklch(85.49% 0.1127 115.15) 12.9%, oklch(85.28% 0.1053 121.79) 16.1%, oklch(84.86% 0.0925 127.22) 19.4%, oklch(84.26% 0.0774 133.16) 22.6%, oklch(83.49% 0.0635 141.50) 25.8%, oklch(82.53% 0.0542 154.17) 29.0%, oklch(81.31% 0.0497 173.80) 32.3%, oklch(79.88% 0.0482 198.02) 35.5%, oklch(78.34% 0.0482 222.45) 38.7%, oklch(76.80% 0.0483 242.70) 41.9%, oklch(75.27% 0.0483 254.74) 45.2%, oklch(73.62% 0.0494 259.73) 48.4%, oklch(71.98% 0.0506 262.56) 51.6%, oklch(70.52% 0.0508 268.20) 54.8%, oklch(69.40% 0.0486 281.55) 58.1%, oklch(68.46% 0.0420 304.04) 61.3%, oklch(67.72% 0.0333 331.41) 64.5%, oklch(67.29% 0.0263 358.94) 67.7%, oklch(67.28% 0.0244 21.86) 71.0%, oklch(67.78% 0.0309 38.32) 74.2%, oklch(68.74% 0.0439 51.42) 77.4%, oklch(70.03% 0.0593 61.68) 80.6%, oklch(71.53% 0.0731 69.52) 83.9%, oklch(73.20% 0.0814 75.14) 87.1%, oklch(75.39% 0.0860 77.29) 90.3%, oklch(77.80% 0.0885 76.99) 93.5%, oklch(79.99% 0.0898 75.79) 96.8%, oklch(81.50% 0.0909 75.20) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.846 | 0.114 | 90.7 |
| 2 | 0.854 | 0.11 | 118.2 |
| 3 | 0.827 | 0.055 | 152 |
| 4 | 0.764 | 0.048 | 247.1 |
| 5 | 0.697 | 0.05 | 276.7 |
| 6 | 0.673 | 0.025 | 384.5 |
| 7 | 0.724 | 0.079 | 433.1 |
| 8 | 0.815 | 0.091 | 435.2 |

## In these collections

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

## Other forms

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