# Yellow yellow and blue palette

The Yellow yellow and blue palette brings together yellow, gold, light green, light blue, and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is yellow.

- Also called: Vivid yellow to blue linear gradient
- Seed: `kc821L9D2_-4-QFgpkTX6LK9cuwXMsUBxbRAI`
- Page: https://grabient.com/kc821L9D2_-4-QFgpkTX6LK9cuwXMsUBxbRAI?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light to dark, vivid
- Hues: complementary
- 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 | `#fef776` | `oklch(95.67% 0.1502 106.17)` | Straw Gold | black, 18.7 to 1 |
| 2 | `#fcf570` | `oklch(94.99% 0.1536 106.11)` | Straw Gold | black, 18.4 to 1 |
| 3 | `#faf266` | `oklch(94.03% 0.1586 105.99)` | Kihada Yellow | black, 17.8 to 1 |
| 4 | `#f6ee5b` | `oklch(92.92% 0.1639 105.94)` | Corn | black, 17.2 to 1 |
| 5 | `#f3ea51` | `oklch(91.79% 0.1682 106.05)` | Sulphuric | black, 16.7 to 1 |
| 6 | `#f0e748` | `oklch(90.79% 0.1710 106.15)` | Yellow Petal | black, 16.2 to 1 |
| 7 | `#efe43e` | `oklch(89.93% 0.1740 105.52)` | Vibrant Arsenic | black, 15.7 to 1 |
| 8 | `#ece035` | `oklch(89.03% 0.1760 105.16)` | Golden Fizz | black, 15.3 to 1 |
| 9 | `#e6dd33` | `oklch(87.91% 0.1751 106.29)` | Starship | black, 14.8 to 1 |
| 10 | `#d9db3e` | `oklch(86.36% 0.1697 110.07)` | Poisonous Cloud | black, 14.1 to 1 |
| 11 | `#c6d751` | `oklch(84.05% 0.1572 116.00)` | June Bud | black, 13.2 to 1 |
| 12 | `#b0d165` | `oklch(81.26% 0.1398 123.70)` | Juicy Lime | black, 12.1 to 1 |
| 13 | `#99ca78` | `oklch(78.53% 0.1218 133.67)` | Jade Lime | black, 11 to 1 |
| 14 | `#84c589` | `oklch(76.40% 0.1075 146.36)` | Jolt of Green | black, 10.3 to 1 |
| 15 | `#6fc39e` | `oklch(75.36% 0.0995 163.49)` | Gem Silica | black, 9.9 to 1 |
| 16 | `#5fc2b8` | `oklch(75.24% 0.0949 186.48)` | Tropic Tide | black, 9.9 to 1 |
| 17 | `#60bfd1` | `oklch(75.48% 0.0931 211.01)` | Skydive | black, 9.9 to 1 |
| 18 | `#6fbae1` | `oklch(75.55% 0.0936 232.54)` | Tranquil Bay | black, 9.8 to 1 |
| 19 | `#7ab4e7` | `oklch(74.93% 0.0961 246.65)` | Lucea | black, 9.4 to 1 |
| 20 | `#7baee9` | `oklch(73.73% 0.1023 253.36)` | Pool Floor | black, 9 to 1 |
| 21 | `#75a8ea` | `oklch(72.20% 0.1113 255.49)` | Greek Sea | black, 8.5 to 1 |
| 22 | `#6ba2ea` | `oklch(70.49% 0.1204 255.54)` | Feather Star | black, 8 to 1 |
| 23 | `#639ce8` | `oklch(68.75% 0.1275 255.99)` | Feather Star | black, 7.4 to 1 |
| 24 | `#5f96e5` | `oklch(66.96% 0.1311 257.61)` | United Nations Blue | black, 6.9 to 1 |
| 25 | `#5b8fdf` | `oklch(65.01% 0.1328 258.71)` | United Nations Blue | black, 6.4 to 1 |
| 26 | `#5689d9` | `oklch(63.03% 0.1336 259.46)` | Blue Jay | black, 5.9 to 1 |
| 27 | `#5283d3` | `oklch(61.18% 0.1343 260.08)` | Blue Jay | black, 5.5 to 1 |
| 28 | `#4e7dcf` | `oklch(59.57% 0.1358 260.75)` | Serenity’s Reign | black, 5.1 to 1 |
| 29 | `#4a78cb` | `oklch(58.06% 0.1379 261.37)` | Serenity’s Reign | black, 4.8 to 1 |
| 30 | `#4773c8` | `oklch(56.69% 0.1401 261.88)` | Fading Night | white, 4.5 to 1 |
| 31 | `#4470c5` | `oklch(55.54% 0.1420 262.28)` | Palace Blue | white, 4.8 to 1 |
| 32 | `#416dc3` | `oklch(54.72% 0.1433 262.57)` | Palace Blue | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #fef776 0.0%, #fcf570 3.2%, #faf266 6.5%, #f6ee5b 9.7%, #f3ea51 12.9%, #f0e748 16.1%, #efe43e 19.4%, #ece035 22.6%, #e6dd33 25.8%, #d9db3e 29.0%, #c6d751 32.3%, #b0d165 35.5%, #99ca78 38.7%, #84c589 41.9%, #6fc39e 45.2%, #5fc2b8 48.4%, #60bfd1 51.6%, #6fbae1 54.8%, #7ab4e7 58.1%, #7baee9 61.3%, #75a8ea 64.5%, #6ba2ea 67.7%, #639ce8 71.0%, #5f96e5 74.2%, #5b8fdf 77.4%, #5689d9 80.6%, #5283d3 83.9%, #4e7dcf 87.1%, #4a78cb 90.3%, #4773c8 93.5%, #4470c5 96.8%, #416dc3 100.0%);
background: linear-gradient(135deg in oklch, oklch(95.67% 0.1502 106.17) 0.0%, oklch(94.99% 0.1536 106.11) 3.2%, oklch(94.03% 0.1586 105.99) 6.5%, oklch(92.92% 0.1639 105.94) 9.7%, oklch(91.79% 0.1682 106.05) 12.9%, oklch(90.79% 0.1710 106.15) 16.1%, oklch(89.93% 0.1740 105.52) 19.4%, oklch(89.03% 0.1760 105.16) 22.6%, oklch(87.91% 0.1751 106.29) 25.8%, oklch(86.36% 0.1697 110.07) 29.0%, oklch(84.05% 0.1572 116.00) 32.3%, oklch(81.26% 0.1398 123.70) 35.5%, oklch(78.53% 0.1218 133.67) 38.7%, oklch(76.40% 0.1075 146.36) 41.9%, oklch(75.36% 0.0995 163.49) 45.2%, oklch(75.24% 0.0949 186.48) 48.4%, oklch(75.48% 0.0931 211.01) 51.6%, oklch(75.55% 0.0936 232.54) 54.8%, oklch(74.93% 0.0961 246.65) 58.1%, oklch(73.73% 0.1023 253.36) 61.3%, oklch(72.20% 0.1113 255.49) 64.5%, oklch(70.49% 0.1204 255.54) 67.7%, oklch(68.75% 0.1275 255.99) 71.0%, oklch(66.96% 0.1311 257.61) 74.2%, oklch(65.01% 0.1328 258.71) 77.4%, oklch(63.03% 0.1336 259.46) 80.6%, oklch(61.18% 0.1343 260.08) 83.9%, oklch(59.57% 0.1358 260.75) 87.1%, oklch(58.06% 0.1379 261.37) 90.3%, oklch(56.69% 0.1401 261.88) 93.5%, oklch(55.54% 0.1420 262.28) 96.8%, oklch(54.72% 0.1433 262.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.15 | 106.2 |
| 2 | 0.913 | 0.169 | 106.2 |
| 3 | 0.866 | 0.171 | 109.3 |
| 4 | 0.76 | 0.105 | 150.6 |
| 5 | 0.752 | 0.095 | 243.5 |
| 6 | 0.685 | 0.128 | 256.2 |
| 7 | 0.602 | 0.135 | 260.5 |
| 8 | 0.547 | 0.143 | 262.6 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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