# Gold butter yellow and blue palette

Complementary beige to blue linear gradient with 32 colors: #f1e3bb, #f1e1b1, #f1dfa3, #f0dd93, #edda83, #ead876, #e5d569, #e0d35c, #dad053, #d4cc51, #d3c655, #d3bf5e, #cdb96a, #bfb776, #a8b887, #93b6a0, #92aeae, #98a6ae, #969fac, #8f9ab5, #8593c3, #7b8cd0, #7285d6, #6b7ed2, #6377c8, #5971bb, #506cad, #4765a0, #3d5e91, #345782, #2e5175, #2a4c6c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary beige to blue linear gradient
- Seed: `kc6ShA8CnA2m0QNhncAWYdRFCtwnCpb7s5i-A`
- Page: https://grabient.com/kc6ShA8CnA2m0QNhncAWYdRFCtwnCpb7s5i-A?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, pastel
- Hues: complementary
- Contrast of its darkest and lightest colors: 7 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 | `#f1e3bb` | `oklch(91.73% 0.0551 90.70)` | Pearl Yellow | black, 16.4 to 1 |
| 2 | `#f1e1b1` | `oklch(91.20% 0.0651 91.87)` | Bone White | black, 16.2 to 1 |
| 3 | `#f1dfa3` | `oklch(90.46% 0.0795 93.54)` | Roadster Yellow | black, 15.8 to 1 |
| 4 | `#f0dd93` | `oklch(89.57% 0.0954 95.45)` | Party Sponge Cake | black, 15.4 to 1 |
| 5 | `#edda83` | `oklch(88.61% 0.1096 97.35)` | Flax | black, 14.9 to 1 |
| 6 | `#ead876` | `oklch(87.61% 0.1202 99.10)` | Golden Glitter Storm | black, 14.5 to 1 |
| 7 | `#e5d569` | `oklch(86.54% 0.1306 100.98)` | Bananarama | black, 14 to 1 |
| 8 | `#e0d35c` | `oklch(85.38% 0.1391 102.84)` | Gamboge Yellow | black, 13.5 to 1 |
| 9 | `#dad053` | `oklch(84.16% 0.1439 104.46)` | Sequesta | black, 13 to 1 |
| 10 | `#d4cc51` | `oklch(82.89% 0.1427 105.56)` | Advertisement Green | black, 12.5 to 1 |
| 11 | `#d3c655` | `oklch(81.53% 0.1338 102.67)` | Citron | black, 11.9 to 1 |
| 12 | `#d3bf5e` | `oklch(80.10% 0.1192 97.73)` | Mustard Oil | black, 11.3 to 1 |
| 13 | `#cdb96a` | `oklch(78.64% 0.1020 95.93)` | Trumpet | black, 10.7 to 1 |
| 14 | `#bfb776` | `oklch(77.18% 0.0855 102.44)` | Liminal Yellow | black, 10.2 to 1 |
| 15 | `#a8b887` | `oklch(75.76% 0.0695 123.10)` | Grant Wood Ivy | black, 9.8 to 1 |
| 16 | `#93b6a0` | `oklch(74.37% 0.0496 157.82)` | Garden District | black, 9.4 to 1 |
| 17 | `#92aeae` | `oklch(72.97% 0.0311 197.68)` | Beach Cottage | black, 8.8 to 1 |
| 18 | `#98a6ae` | `oklch(71.53% 0.0198 233.42)` | Celestra Grey | black, 8.3 to 1 |
| 19 | `#969fac` | `oklch(70.05% 0.0216 256.24)` | Frilled Shark | black, 7.8 to 1 |
| 20 | `#8f9ab5` | `oklch(68.59% 0.0416 267.39)` | Blueberry Buckle | black, 7.4 to 1 |
| 21 | `#8593c3` | `oklch(67.12% 0.0722 271.62)` | Blue Hyacinth | black, 6.9 to 1 |
| 22 | `#7b8cd0` | `oklch(65.51% 0.1030 272.17)` | True Lavender | black, 6.5 to 1 |
| 23 | `#7285d6` | `oklch(63.67% 0.1238 272.29)` | Tanzine | black, 6 to 1 |
| 24 | `#6b7ed2` | `oklch(61.51% 0.1294 272.80)` | Kickstart Purple | black, 5.5 to 1 |
| 25 | `#6377c8` | `oklch(59.08% 0.1259 271.39)` | Indigo Light | black, 5 to 1 |
| 26 | `#5971bb` | `oklch(56.49% 0.1174 268.76)` | Gladiola Blue | white, 4.6 to 1 |
| 27 | `#506cad` | `oklch(53.85% 0.1078 265.68)` | New Age Blue | white, 5.1 to 1 |
| 28 | `#4765a0` | `oklch(51.20% 0.1003 262.70)` | Mariner | white, 5.7 to 1 |
| 29 | `#3d5e91` | `oklch(48.19% 0.0915 258.89)` | Portuguese Blue | white, 6.5 to 1 |
| 30 | `#345782` | `oklch(45.13% 0.0820 254.66)` | Award Blue | white, 7.4 to 1 |
| 31 | `#2e5175` | `oklch(42.43% 0.0735 250.81)` | Aerostatics | white, 8.2 to 1 |
| 32 | `#2a4c6c` | `oklch(40.55% 0.0675 248.16)` | Blue Tang | white, 8.9 to 1 |

## CSS

```css
background: linear-gradient(180deg, #f1e3bb 0.0%, #f1e1b1 3.2%, #f1dfa3 6.5%, #f0dd93 9.7%, #edda83 12.9%, #ead876 16.1%, #e5d569 19.4%, #e0d35c 22.6%, #dad053 25.8%, #d4cc51 29.0%, #d3c655 32.3%, #d3bf5e 35.5%, #cdb96a 38.7%, #bfb776 41.9%, #a8b887 45.2%, #93b6a0 48.4%, #92aeae 51.6%, #98a6ae 54.8%, #969fac 58.1%, #8f9ab5 61.3%, #8593c3 64.5%, #7b8cd0 67.7%, #7285d6 71.0%, #6b7ed2 74.2%, #6377c8 77.4%, #5971bb 80.6%, #506cad 83.9%, #4765a0 87.1%, #3d5e91 90.3%, #345782 93.5%, #2e5175 96.8%, #2a4c6c 100.0%);
background: linear-gradient(180deg in oklch, oklch(91.73% 0.0551 90.70) 0.0%, oklch(91.20% 0.0651 91.87) 3.2%, oklch(90.46% 0.0795 93.54) 6.5%, oklch(89.57% 0.0954 95.45) 9.7%, oklch(88.61% 0.1096 97.35) 12.9%, oklch(87.61% 0.1202 99.10) 16.1%, oklch(86.54% 0.1306 100.98) 19.4%, oklch(85.38% 0.1391 102.84) 22.6%, oklch(84.16% 0.1439 104.46) 25.8%, oklch(82.89% 0.1427 105.56) 29.0%, oklch(81.53% 0.1338 102.67) 32.3%, oklch(80.10% 0.1192 97.73) 35.5%, oklch(78.64% 0.1020 95.93) 38.7%, oklch(77.18% 0.0855 102.44) 41.9%, oklch(75.76% 0.0695 123.10) 45.2%, oklch(74.37% 0.0496 157.82) 48.4%, oklch(72.97% 0.0311 197.68) 51.6%, oklch(71.53% 0.0198 233.42) 54.8%, oklch(70.05% 0.0216 256.24) 58.1%, oklch(68.59% 0.0416 267.39) 61.3%, oklch(67.12% 0.0722 271.62) 64.5%, oklch(65.51% 0.1030 272.17) 67.7%, oklch(63.67% 0.1238 272.29) 71.0%, oklch(61.51% 0.1294 272.80) 74.2%, oklch(59.08% 0.1259 271.39) 77.4%, oklch(56.49% 0.1174 268.76) 80.6%, oklch(53.85% 0.1078 265.68) 83.9%, oklch(51.20% 0.1003 262.70) 87.1%, oklch(48.19% 0.0915 258.89) 90.3%, oklch(45.13% 0.0820 254.66) 93.5%, oklch(42.43% 0.0735 250.81) 96.8%, oklch(40.55% 0.0675 248.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.917 | 0.055 | 90.7 |
| 2 | 0.882 | 0.114 | 98.1 |
| 3 | 0.831 | 0.143 | 105.5 |
| 4 | 0.768 | 0.081 | 106.6 |
| 5 | 0.705 | 0.019 | 251.3 |
| 6 | 0.634 | 0.125 | 272.5 |
| 7 | 0.524 | 0.103 | 264 |
| 8 | 0.406 | 0.068 | 248.2 |

## In these collections

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

## Other forms

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