# Mustard yellow and blue palette

The Mustard yellow and blue palette brings together light blue, blue, teal, green, and yellow. 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 blue, and its lightest tone is yellow.

- Also called: Light blue, blue, teal and yellow linear gradient
- Seed: `ka2i6016xAUC-QGvtkAyp65Ge8NbzwT6A`
- Page: https://grabient.com/ka2i6016xAUC-QGvtkAyp65Ge8NbzwT6A?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, vivid, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 8.3 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 | `#b4d3fa` | `oklch(85.83% 0.0634 253.83)` | Ice Cold Stare | black, 13.6 to 1 |
| 2 | `#aaccf7` | `oklch(83.63% 0.0711 254.23)` | Night Snow | black, 12.7 to 1 |
| 3 | `#9cc3f4` | `oklch(80.56% 0.0820 254.78)` | Sail to the Sea | black, 11.4 to 1 |
| 4 | `#8bb7f0` | `oklch(76.94% 0.0946 255.43)` | Electric Eel | black, 10.1 to 1 |
| 5 | `#7baaeb` | `oklch(73.13% 0.1076 256.15)` | Jordy Blue | black, 8.8 to 1 |
| 6 | `#6b9ee6` | `oklch(69.47% 0.1195 256.88)` | Feather Star | black, 7.6 to 1 |
| 7 | `#5d93e1` | `oklch(65.99% 0.1305 257.64)` | United Nations Blue | black, 6.7 to 1 |
| 8 | `#4e87dc` | `oklch(62.37% 0.1424 258.51)` | Blue Jay | black, 5.7 to 1 |
| 9 | `#407ad6` | `oklch(58.71% 0.1538 259.40)` | Skies of Cyberspace | black, 4.9 to 1 |
| 10 | `#346ed0` | `oklch(55.15% 0.1634 260.26)` | Enchanting Sapphire | white, 4.9 to 1 |
| 11 | `#2a62c8` | `oklch(51.82% 0.1697 261.01)` | Janitor | white, 5.6 to 1 |
| 12 | `#2357be` | `oklch(48.58% 0.1718 262.04)` | Cerulean Blue | white, 6.5 to 1 |
| 13 | `#224bb2` | `oklch(44.90% 0.1706 264.19)` | The Blues Brothers | white, 7.7 to 1 |
| 14 | `#213fa4` | `oklch(41.36% 0.1666 266.33)` | Yuè Guāng Lán Blue | white, 9 to 1 |
| 15 | `#1f3798` | `oklch(38.61% 0.1605 267.19)` | North Star Blue | white, 10.1 to 1 |
| 16 | `#193690` | `oklch(37.31% 0.1529 265.52)` | Dark Seashore Night | white, 10.6 to 1 |
| 17 | `#0a3c8d` | `oklch(38.08% 0.1436 260.21)` | Mystery Oceans | white, 10.2 to 1 |
| 18 | `#004b89` | `oklch(41.00% 0.1218 251.77)` | Magnetic Blue | white, 8.8 to 1 |
| 19 | `#005c8b` | `oklch(45.36% 0.1055 240.86)` | Buccaneer Blue | white, 7.2 to 1 |
| 20 | `#0b6e8f` | `oklch(50.47% 0.0956 228.20)` | Tropic Sea | white, 5.7 to 1 |
| 21 | `#278092` | `oklch(55.59% 0.0856 214.55)` | Pagoda Blue | white, 4.5 to 1 |
| 22 | `#349095` | `oklch(60.12% 0.0853 200.29)` | Aqueous | black, 5.5 to 1 |
| 23 | `#3aa294` | `oklch(64.77% 0.0963 183.03)` | Sea Kale | black, 6.7 to 1 |
| 24 | `#4db38a` | `oklch(69.62% 0.1146 163.83)` | Mint | black, 8.1 to 1 |
| 25 | `#71c274` | `oklch(74.32% 0.1356 144.93)` | Soft Green | black, 9.6 to 1 |
| 26 | `#9bcc58` | `oklch(78.56% 0.1545 128.60)` | Two Peas in a Pod | black, 11.1 to 1 |
| 27 | `#bdd13f` | `oklch(82.01% 0.1668 117.05)` | Golden Foliage | black, 12.3 to 1 |
| 28 | `#d3d630` | `oklch(84.72% 0.1733 110.63)` | Sulphur Spring | black, 13.4 to 1 |
| 29 | `#e0db2e` | `oklch(86.89% 0.1766 107.79)` | Starship | black, 14.3 to 1 |
| 30 | `#e7e033` | `oklch(88.59% 0.1779 107.15)` | Golden Fizz | black, 15.1 to 1 |
| 31 | `#ebe539` | `oklch(89.91% 0.1784 107.32)` | Vibrant Arsenic | black, 15.8 to 1 |
| 32 | `#f0e83c` | `oklch(90.94% 0.1791 106.94)` | Highlighter Yellow | black, 16.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #b4d3fa 0.0%, #aaccf7 3.2%, #9cc3f4 6.5%, #8bb7f0 9.7%, #7baaeb 12.9%, #6b9ee6 16.1%, #5d93e1 19.4%, #4e87dc 22.6%, #407ad6 25.8%, #346ed0 29.0%, #2a62c8 32.3%, #2357be 35.5%, #224bb2 38.7%, #213fa4 41.9%, #1f3798 45.2%, #193690 48.4%, #0a3c8d 51.6%, #004b89 54.8%, #005c8b 58.1%, #0b6e8f 61.3%, #278092 64.5%, #349095 67.7%, #3aa294 71.0%, #4db38a 74.2%, #71c274 77.4%, #9bcc58 80.6%, #bdd13f 83.9%, #d3d630 87.1%, #e0db2e 90.3%, #e7e033 93.5%, #ebe539 96.8%, #f0e83c 100.0%);
background: linear-gradient(135deg in oklch, oklch(85.83% 0.0634 253.83) 0.0%, oklch(83.63% 0.0711 254.23) 3.2%, oklch(80.56% 0.0820 254.78) 6.5%, oklch(76.94% 0.0946 255.43) 9.7%, oklch(73.13% 0.1076 256.15) 12.9%, oklch(69.47% 0.1195 256.88) 16.1%, oklch(65.99% 0.1305 257.64) 19.4%, oklch(62.37% 0.1424 258.51) 22.6%, oklch(58.71% 0.1538 259.40) 25.8%, oklch(55.15% 0.1634 260.26) 29.0%, oklch(51.82% 0.1697 261.01) 32.3%, oklch(48.58% 0.1718 262.04) 35.5%, oklch(44.90% 0.1706 264.19) 38.7%, oklch(41.36% 0.1666 266.33) 41.9%, oklch(38.61% 0.1605 267.19) 45.2%, oklch(37.31% 0.1529 265.52) 48.4%, oklch(38.08% 0.1436 260.21) 51.6%, oklch(41.00% 0.1218 251.77) 54.8%, oklch(45.36% 0.1055 240.86) 58.1%, oklch(50.47% 0.0956 228.20) 61.3%, oklch(55.59% 0.0856 214.55) 64.5%, oklch(60.12% 0.0853 200.29) 67.7%, oklch(64.77% 0.0963 183.03) 71.0%, oklch(69.62% 0.1146 163.83) 74.2%, oklch(74.32% 0.1356 144.93) 77.4%, oklch(78.56% 0.1545 128.60) 80.6%, oklch(82.01% 0.1668 117.05) 83.9%, oklch(84.72% 0.1733 110.63) 87.1%, oklch(86.89% 0.1766 107.79) 90.3%, oklch(88.59% 0.1779 107.15) 93.5%, oklch(89.91% 0.1784 107.32) 96.8%, oklch(90.94% 0.1791 106.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.063 | 253.8 |
| 2 | 0.689 | 0.121 | 257 |
| 3 | 0.508 | 0.171 | 261.2 |
| 4 | 0.374 | 0.149 | 263.3 |
| 5 | 0.587 | 0.084 | 205.2 |
| 6 | 0.815 | 0.165 | 118.6 |
| 7 | 0.909 | 0.179 | 106.9 |

## In these collections

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

## Other forms

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