# Yellow and Blue: Mustard and sage

The "Yellow and Blue: Mustard and sage" palette brings together gold, green, and teal. 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 teal, and its lightest tone is gold.

- Also called: Yellow, teal and navy linear gradient
- Seed: `kW3XVNWqTBciSRS4lkXq5hAw`
- Page: https://grabient.com/kW3XVNWqTBciSRS4lkXq5hAw
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.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 | `#dedc4b` | `oklch(87.01% 0.1612 108.28)` | Citrus Sugar | black, 14.4 to 1 |
| 2 | `#b3bd5c` | `oklch(76.98% 0.1223 113.92)` | Middle Green Yellow | black, 10.3 to 1 |
| 3 | `#809e6b` | `oklch(66.36% 0.0806 133.17)` | Green Sky | black, 7 to 1 |
| 4 | `#5c8171` | `oklch(57.09% 0.0496 165.35)` | Cutty Sark | black, 4.8 to 1 |
| 5 | `#35686c` | `oklch(48.45% 0.0551 202.14)` | Aquarium | white, 6.2 to 1 |
| 6 | `#195161` | `oklch(40.52% 0.0631 222.02)` | Genetic Code | white, 8.8 to 1 |
| 7 | `#003f51` | `oklch(34.26% 0.0641 223.53)` | Maniac Mansion | white, 11.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dedc4b 0.0%, #b3bd5c 16.7%, #809e6b 33.3%, #5c8171 50.0%, #35686c 66.7%, #195161 83.3%, #003f51 100.0%);
background: linear-gradient(90deg in oklch, oklch(87.01% 0.1612 108.28) 0.0%, oklch(76.98% 0.1223 113.92) 16.7%, oklch(66.36% 0.0806 133.17) 33.3%, oklch(57.09% 0.0496 165.35) 50.0%, oklch(48.45% 0.0551 202.14) 66.7%, oklch(40.52% 0.0631 222.02) 83.3%, oklch(34.26% 0.0641 223.53) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.87 | 0.161 | 108.3 |
| 2 | 0.713 | 0.101 | 121 |
| 3 | 0.571 | 0.05 | 165.3 |
| 4 | 0.445 | 0.061 | 216.1 |
| 5 | 0.343 | 0.066 | 223.5 |

## In these collections

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

## Other forms

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