# Yellow and Blue: Gold and violet

The "Yellow and Blue: Gold and violet" palette brings together yellow, gold, magenta, blue, and dark blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is yellow.

- Also called: Yellow, tan, purple and navy radial gradient
- Seed: `kY6WZIaK--kkws29QDerbg_h8nP8`
- Page: https://grabient.com/kY6WZIaK--kkws29QDerbg_h8nP8?style=radialGradient&steps=32
- Drawn as: radial gradient, 32 steps, 90 degrees
- Kinds: light to dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.1 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 | `#f8e770` | `oklch(91.73% 0.1406 101.25)` | Marigold Yellow | black, 16.5 to 1 |
| 2 | `#f5e46e` | `oklch(90.91% 0.1394 101.06)` | Vanilla Pudding | black, 16.1 to 1 |
| 3 | `#f1e16d` | `oklch(89.92% 0.1377 101.68)` | Banana Ball | black, 15.6 to 1 |
| 4 | `#ecdd6b` | `oklch(88.70% 0.1358 102.06)` | Pollination | black, 15.1 to 1 |
| 5 | `#e8d767` | `oklch(87.15% 0.1338 101.17)` | Pharaoh’s Gold | black, 14.3 to 1 |
| 6 | `#e5cf61` | `oklch(85.22% 0.1321 97.97)` | Gamboge Yellow | black, 13.4 to 1 |
| 7 | `#e6c458` | `oklch(82.82% 0.1310 91.43)` | Chicco d’Oro | black, 12.3 to 1 |
| 8 | `#e8b350` | `oklch(79.72% 0.1304 80.33)` | Aztec Glimmer | black, 11 to 1 |
| 9 | `#e99e4f` | `oklch(75.75% 0.1296 64.75)` | Sunflower Field | black, 9.4 to 1 |
| 10 | `#e48759` | `oklch(71.27% 0.1291 46.28)` | Aegean Sky | black, 7.8 to 1 |
| 11 | `#d87269` | `oklch(66.67% 0.1291 26.56)` | Lantana | black, 6.5 to 1 |
| 12 | `#c76279` | `oklch(62.35% 0.1301 7.24)` | Cherry Pink | black, 5.4 to 1 |
| 13 | `#b55887` | `oklch(58.68% 0.1323 349.94)` | Dahlia Mauve | black, 4.6 to 1 |
| 14 | `#a45193` | `oklch(55.97% 0.1365 335.50)` | Plum Dust | white, 5 to 1 |
| 15 | `#944ea0` | `oklch(54.02% 0.1434 321.75)` | Vicious Violet | white, 5.4 to 1 |
| 16 | `#844dac` | `oklch(52.57% 0.1521 308.76)` | Harley Hair Purple | white, 5.7 to 1 |
| 17 | `#734db7` | `oklch(51.40% 0.1610 296.91)` | Royal Lavender | white, 6 to 1 |
| 18 | `#614dbe` | `oklch(50.29% 0.1690 286.59)` | Waiporoporo Purple | white, 6.3 to 1 |
| 19 | `#4e4dc0` | `oklch(48.99% 0.1746 278.17)` | Free Speech Blue | white, 6.6 to 1 |
| 20 | `#3d4cbd` | `oklch(47.32% 0.1768 272.12)` | Kikorangi Blue | white, 7.1 to 1 |
| 21 | `#3148b7` | `oklch(45.45% 0.1763 268.94)` | Night in Manchester | white, 7.6 to 1 |
| 22 | `#2a43af` | `oklch(43.47% 0.1737 268.04)` | Denim | white, 8.3 to 1 |
| 23 | `#273da6` | `oklch(41.44% 0.1696 268.60)` | Yuè Guāng Lán Blue | white, 9.1 to 1 |
| 24 | `#27379c` | `oklch(39.39% 0.1645 269.81)` | Liquid Denim | white, 9.9 to 1 |
| 25 | `#253193` | `oklch(37.38% 0.1589 270.86)` | Royal Night | white, 10.7 to 1 |
| 26 | `#222d8a` | `oklch(35.44% 0.1532 270.97)` | Intergalactic Highway | white, 11.6 to 1 |
| 27 | `#1e2880` | `oklch(33.39% 0.1461 270.68)` | St. Patrick’s Blue | white, 12.5 to 1 |
| 28 | `#1a2475` | `oklch(31.25% 0.1376 270.46)` | Impression of Obscurity | white, 13.5 to 1 |
| 29 | `#16206a` | `oklch(29.15% 0.1286 270.29)` | Pure Midnight | white, 14.5 to 1 |
| 30 | `#131c60` | `oklch(27.22% 0.1200 270.17)` | Pure Midnight | white, 15.4 to 1 |
| 31 | `#101958` | `oklch(25.59% 0.1126 270.07)` | Shadowdancer | white, 16.1 to 1 |
| 32 | `#0f1752` | `oklch(24.41% 0.1075 269.98)` | Shadowdancer | white, 16.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f8e770 0.0%, #f5e46e 3.2%, #f1e16d 6.5%, #ecdd6b 9.7%, #e8d767 12.9%, #e5cf61 16.1%, #e6c458 19.4%, #e8b350 22.6%, #e99e4f 25.8%, #e48759 29.0%, #d87269 32.3%, #c76279 35.5%, #b55887 38.7%, #a45193 41.9%, #944ea0 45.2%, #844dac 48.4%, #734db7 51.6%, #614dbe 54.8%, #4e4dc0 58.1%, #3d4cbd 61.3%, #3148b7 64.5%, #2a43af 67.7%, #273da6 71.0%, #27379c 74.2%, #253193 77.4%, #222d8a 80.6%, #1e2880 83.9%, #1a2475 87.1%, #16206a 90.3%, #131c60 93.5%, #101958 96.8%, #0f1752 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(91.73% 0.1406 101.25) 0.0%, oklch(90.91% 0.1394 101.06) 3.2%, oklch(89.92% 0.1377 101.68) 6.5%, oklch(88.70% 0.1358 102.06) 9.7%, oklch(87.15% 0.1338 101.17) 12.9%, oklch(85.22% 0.1321 97.97) 16.1%, oklch(82.82% 0.1310 91.43) 19.4%, oklch(79.72% 0.1304 80.33) 22.6%, oklch(75.75% 0.1296 64.75) 25.8%, oklch(71.27% 0.1291 46.28) 29.0%, oklch(66.67% 0.1291 26.56) 32.3%, oklch(62.35% 0.1301 7.24) 35.5%, oklch(58.68% 0.1323 349.94) 38.7%, oklch(55.97% 0.1365 335.50) 41.9%, oklch(54.02% 0.1434 321.75) 45.2%, oklch(52.57% 0.1521 308.76) 48.4%, oklch(51.40% 0.1610 296.91) 51.6%, oklch(50.29% 0.1690 286.59) 54.8%, oklch(48.99% 0.1746 278.17) 58.1%, oklch(47.32% 0.1768 272.12) 61.3%, oklch(45.45% 0.1763 268.94) 64.5%, oklch(43.47% 0.1737 268.04) 67.7%, oklch(41.44% 0.1696 268.60) 71.0%, oklch(39.39% 0.1645 269.81) 74.2%, oklch(37.38% 0.1589 270.86) 77.4%, oklch(35.44% 0.1532 270.97) 80.6%, oklch(33.39% 0.1461 270.68) 83.9%, oklch(31.25% 0.1376 270.46) 87.1%, oklch(29.15% 0.1286 270.29) 90.3%, oklch(27.22% 0.1200 270.17) 93.5%, oklch(25.59% 0.1126 270.07) 96.8%, oklch(24.41% 0.1075 269.98) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.917 | 0.141 | 101.3 |
| 2 | 0.823 | 0.131 | 89.6 |
| 3 | 0.575 | 0.134 | -16 |
| 4 | 0.48 | 0.176 | -85.8 |
| 5 | 0.358 | 0.154 | -89 |
| 6 | 0.244 | 0.107 | -90 |

## In these collections

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

## Other forms

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