# Gold yellow and blue palette

The Gold yellow and blue palette brings together pale yellow, yellow, green, blue, and dark blue. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale yellow.

- Also called: Tritone yellow, green and navy radial gradient
- Seed: `kc80pHcjo_2eyQnQIU1PbVCS4sQKiIb_mplAg`
- Page: https://grabient.com/kc80pHcjo_2eyQnQIU1PbVCS4sQKiIb_mplAg?style=radialGradient&steps=32&angle=180
- Drawn as: radial gradient, 32 steps, 180 degrees
- Kinds: light to dark, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 15.8 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 | `#fff3aa` | `oklch(95.67% 0.0925 99.85)` | Buttered Popcorn | black, 18.6 to 1 |
| 2 | `#fff09b` | `oklch(94.78% 0.1063 99.25)` | Daisy Chain | black, 18.1 to 1 |
| 3 | `#ffeb87` | `oklch(93.53% 0.1225 98.20)` | Citrus Punch | black, 17.4 to 1 |
| 4 | `#ffe56b` | `oklch(92.05% 0.1440 97.53)` | Shandy | black, 16.6 to 1 |
| 5 | `#fbe054` | `oklch(90.45% 0.1572 98.02)` | Royal Star | black, 15.8 to 1 |
| 6 | `#f4dc49` | `oklch(88.89% 0.1611 99.76)` | Minions | black, 15.1 to 1 |
| 7 | `#edd847` | `oklch(87.42% 0.1589 100.91)` | Longlure Frogfish | black, 14.4 to 1 |
| 8 | `#e2d44d` | `oklch(85.81% 0.1529 103.43)` | Kowloon | black, 13.7 to 1 |
| 9 | `#d0d256` | `oklch(83.78% 0.1448 109.71)` | Energised | black, 12.9 to 1 |
| 10 | `#b2cf65` | `oklch(81.05% 0.1366 122.23)` | Juicy Lime | black, 12 to 1 |
| 11 | `#80ca83` | `oklch(77.35% 0.1249 144.87)` | De York | black, 10.7 to 1 |
| 12 | `#4dbea3` | `oklch(72.96% 0.1106 174.33)` | Jolt of Jade | black, 9.2 to 1 |
| 13 | `#3eabb5` | `oklch(68.38% 0.0978 204.22)` | Tempo | black, 7.6 to 1 |
| 14 | `#4997b8` | `oklch(64.09% 0.0911 228.15)` | Coastline Blue | black, 6.4 to 1 |
| 15 | `#4988b5` | `oklch(60.39% 0.0949 241.66)` | Hideout | black, 5.4 to 1 |
| 16 | `#3d7cb4` | `oklch(56.96% 0.1085 248.16)` | Viennese Blue | black, 4.7 to 1 |
| 17 | `#2b71b4` | `oklch(53.71% 0.1259 250.57)` | Campanula | white, 5.1 to 1 |
| 18 | `#1366b2` | `oklch(50.60% 0.1406 251.63)` | Ephren Blue | white, 5.8 to 1 |
| 19 | `#075cac` | `oklch(47.57% 0.1467 253.88)` | Bottled Sea | white, 6.7 to 1 |
| 20 | `#0b52a2` | `oklch(44.63% 0.1448 256.11)` | Victoria Blue | white, 7.6 to 1 |
| 21 | `#0f4996` | `oklch(41.81% 0.1384 257.58)` | Liberalist | white, 8.6 to 1 |
| 22 | `#104289` | `oklch(39.12% 0.1299 258.57)` | Pacific Depths | white, 9.7 to 1 |
| 23 | `#103b7d` | `oklch(36.57% 0.1222 259.31)` | Azure Dragon | white, 10.7 to 1 |
| 24 | `#0e3573` | `oklch(34.16% 0.1158 259.73)` | Atlantic Navy | white, 11.8 to 1 |
| 25 | `#0a2f69` | `oklch(31.88% 0.1091 259.59)` | Deep Sea Dream | white, 12.9 to 1 |
| 26 | `#072a5f` | `oklch(29.75% 0.1024 259.28)` | Blue Leviathan | white, 13.9 to 1 |
| 27 | `#062656` | `oklch(27.80% 0.0958 259.20)` | Downriver | white, 14.8 to 1 |
| 28 | `#06214e` | `oklch(26.04% 0.0897 259.74)` | Subnautical | white, 15.6 to 1 |
| 29 | `#061d47` | `oklch(24.40% 0.0835 260.91)` | Oxford Blue | white, 16.4 to 1 |
| 30 | `#071a40` | `oklch(22.93% 0.0776 262.37)` | Maastricht Blue | white, 17 to 1 |
| 31 | `#08173b` | `oklch(21.73% 0.0725 263.76)` | Navy | white, 17.5 to 1 |
| 32 | `#081537` | `oklch(20.87% 0.0689 264.70)` | Liberty Blue | white, 17.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #fff3aa 0.0%, #fff09b 3.2%, #ffeb87 6.5%, #ffe56b 9.7%, #fbe054 12.9%, #f4dc49 16.1%, #edd847 19.4%, #e2d44d 22.6%, #d0d256 25.8%, #b2cf65 29.0%, #80ca83 32.3%, #4dbea3 35.5%, #3eabb5 38.7%, #4997b8 41.9%, #4988b5 45.2%, #3d7cb4 48.4%, #2b71b4 51.6%, #1366b2 54.8%, #075cac 58.1%, #0b52a2 61.3%, #0f4996 64.5%, #104289 67.7%, #103b7d 71.0%, #0e3573 74.2%, #0a2f69 77.4%, #072a5f 80.6%, #062656 83.9%, #06214e 87.1%, #061d47 90.3%, #071a40 93.5%, #08173b 96.8%, #081537 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(95.67% 0.0925 99.85) 0.0%, oklch(94.78% 0.1063 99.25) 3.2%, oklch(93.53% 0.1225 98.20) 6.5%, oklch(92.05% 0.1440 97.53) 9.7%, oklch(90.45% 0.1572 98.02) 12.9%, oklch(88.89% 0.1611 99.76) 16.1%, oklch(87.42% 0.1589 100.91) 19.4%, oklch(85.81% 0.1529 103.43) 22.6%, oklch(83.78% 0.1448 109.71) 25.8%, oklch(81.05% 0.1366 122.23) 29.0%, oklch(77.35% 0.1249 144.87) 32.3%, oklch(72.96% 0.1106 174.33) 35.5%, oklch(68.38% 0.0978 204.22) 38.7%, oklch(64.09% 0.0911 228.15) 41.9%, oklch(60.39% 0.0949 241.66) 45.2%, oklch(56.96% 0.1085 248.16) 48.4%, oklch(53.71% 0.1259 250.57) 51.6%, oklch(50.60% 0.1406 251.63) 54.8%, oklch(47.57% 0.1467 253.88) 58.1%, oklch(44.63% 0.1448 256.11) 61.3%, oklch(41.81% 0.1384 257.58) 64.5%, oklch(39.12% 0.1299 258.57) 67.7%, oklch(36.57% 0.1222 259.31) 71.0%, oklch(34.16% 0.1158 259.73) 74.2%, oklch(31.88% 0.1091 259.59) 77.4%, oklch(29.75% 0.1024 259.28) 80.6%, oklch(27.80% 0.0958 259.20) 83.9%, oklch(26.04% 0.0897 259.74) 87.1%, oklch(24.40% 0.0835 260.91) 90.3%, oklch(22.93% 0.0776 262.37) 93.5%, oklch(21.73% 0.0725 263.76) 96.8%, oklch(20.87% 0.0689 264.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.102 | 99.8 |
| 2 | 0.898 | 0.16 | 98.8 |
| 3 | 0.815 | 0.138 | 119.9 |
| 4 | 0.63 | 0.091 | 233 |
| 5 | 0.484 | 0.146 | 253.1 |
| 6 | 0.362 | 0.121 | 259.4 |
| 7 | 0.268 | 0.092 | 259.4 |
| 8 | 0.209 | 0.069 | 264.7 |

## In these collections

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

## Other forms

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