# Yellow and Blue: Cream and sage

The "Yellow and Blue: Cream and sage" palette brings together pale yellow, yellow, orange, light orange, green, teal, and blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is pale yellow.

- Also called: Beige, peach, teal and blue angular swatches
- Seed: `kc-WlOd7E-_CtPfmn72z5lM8kmxDJKEITKzAA`
- Page: https://grabient.com/kc-WlOd7E-_CtPfmn72z5lM8kmxDJKEITKzAA?style=angularSwatches&steps=26&angle=300
- Drawn as: angular swatches, 26 steps, 300 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.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 | `#fcffb1` | `oklch(98.03% 0.0977 109.68)` | VIC 20 Creme | black, 20 to 1 |
| 2 | `#fffe85` | `oklch(97.26% 0.1427 108.17)` | Yippie Yellow | black, 19.7 to 1 |
| 3 | `#fff883` | `oklch(96.15% 0.1399 105.99)` | Aged Plastic Casing | black, 19 to 1 |
| 4 | `#fff280` | `oklch(94.86% 0.1368 103.15)` | Yellow Salmonberry | black, 18.2 to 1 |
| 5 | `#ffec7c` | `oklch(93.52% 0.1339 99.61)` | Digital Yellow | black, 17.4 to 1 |
| 6 | `#ffe47e` | `oklch(92.12% 0.1263 95.19)` | Cowbell | black, 16.6 to 1 |
| 7 | `#ffdd7d` | `oklch(90.58% 0.1216 90.19)` | Cup Noodles | black, 15.8 to 1 |
| 8 | `#ffd478` | `oklch(88.85% 0.1213 85.05)` | Cantaloupe | black, 14.9 to 1 |
| 9 | `#ffcb7a` | `oklch(87.08% 0.1149 77.09)` | Cheesus | black, 14 to 1 |
| 10 | `#fec183` | `oklch(85.29% 0.1050 66.19)` | Buttery | black, 13.1 to 1 |
| 11 | `#f4b988` | `oklch(82.98% 0.0934 60.89)` | Fresh Peaches | black, 12.1 to 1 |
| 12 | `#e0b380` | `oklch(79.57% 0.0846 69.95)` | Imperial Gold | black, 10.9 to 1 |
| 13 | `#b8ad74` | `oklch(74.40% 0.0767 98.43)` | Goldie Oldie | black, 9.2 to 1 |
| 14 | `#87a479` | `oklch(68.58% 0.0705 135.75)` | Succulent Greenhouse | black, 7.6 to 1 |
| 15 | `#609984` | `oklch(63.64% 0.0684 168.54)` | Succulent Green | black, 6.3 to 1 |
| 16 | `#48918a` | `oklch(60.66% 0.0733 187.41)` | Dusty Teal | black, 5.6 to 1 |
| 17 | `#308d90` | `oklch(58.99% 0.0852 198.33)` | Fish Story | black, 5.3 to 1 |
| 18 | `#068b96` | `oklch(58.07% 0.0983 205.38)` | Tempo Teal | black, 5.1 to 1 |
| 19 | `#00889b` | `oklch(57.39% 0.1001 212.21)` | Marker Blue | black, 4.9 to 1 |
| 20 | `#0085a0` | `oklch(57.01% 0.1030 218.81)` | Blue Arc | black, 4.8 to 1 |
| 21 | `#0084a6` | `oklch(57.04% 0.1071 224.01)` | Tibetan Turquoise | black, 4.8 to 1 |
| 22 | `#0a84ab` | `oklch(57.32% 0.1096 227.84)` | Tusche Blue | black, 4.9 to 1 |
| 23 | `#1085af` | `oklch(57.80% 0.1119 230.24)` | Lyrebird | black, 4.9 to 1 |
| 24 | `#0b88b4` | `oklch(58.65% 0.1158 230.79)` | Stomy Shower | black, 5.1 to 1 |
| 25 | `#008bb8` | `oklch(59.59% 0.1193 230.43)` | Spinnaker Blue | black, 5.3 to 1 |
| 26 | `#008dbb` | `oklch(60.24% 0.1203 230.17)` | Hawaiian Surf | black, 5.5 to 1 |

## CSS

```css
background: conic-gradient(from 300deg, #fcffb1 0.000% 3.846%, #fffe85 3.846% 7.692%, #fff883 7.692% 11.538%, #fff280 11.538% 15.385%, #ffec7c 15.385% 19.231%, #ffe47e 19.231% 23.077%, #ffdd7d 23.077% 26.923%, #ffd478 26.923% 30.769%, #ffcb7a 30.769% 34.615%, #fec183 34.615% 38.462%, #f4b988 38.462% 42.308%, #e0b380 42.308% 46.154%, #b8ad74 46.154% 50.000%, #87a479 50.000% 53.846%, #609984 53.846% 57.692%, #48918a 57.692% 61.538%, #308d90 61.538% 65.385%, #068b96 65.385% 69.231%, #00889b 69.231% 73.077%, #0085a0 73.077% 76.923%, #0084a6 76.923% 80.769%, #0a84ab 80.769% 84.615%, #1085af 84.615% 88.462%, #0b88b4 88.462% 92.308%, #008bb8 92.308% 96.154%, #008dbb 96.154% 100.000%);
background: conic-gradient(from 300deg, oklch(98.03% 0.0977 109.68) 0.000% 3.846%, oklch(97.26% 0.1427 108.17) 3.846% 7.692%, oklch(96.15% 0.1399 105.99) 7.692% 11.538%, oklch(94.86% 0.1368 103.15) 11.538% 15.385%, oklch(93.52% 0.1339 99.61) 15.385% 19.231%, oklch(92.12% 0.1263 95.19) 19.231% 23.077%, oklch(90.58% 0.1216 90.19) 23.077% 26.923%, oklch(88.85% 0.1213 85.05) 26.923% 30.769%, oklch(87.08% 0.1149 77.09) 30.769% 34.615%, oklch(85.29% 0.1050 66.19) 34.615% 38.462%, oklch(82.98% 0.0934 60.89) 38.462% 42.308%, oklch(79.57% 0.0846 69.95) 42.308% 46.154%, oklch(74.40% 0.0767 98.43) 46.154% 50.000%, oklch(68.58% 0.0705 135.75) 50.000% 53.846%, oklch(63.64% 0.0684 168.54) 53.846% 57.692%, oklch(60.66% 0.0733 187.41) 57.692% 61.538%, oklch(58.99% 0.0852 198.33) 61.538% 65.385%, oklch(58.07% 0.0983 205.38) 65.385% 69.231%, oklch(57.39% 0.1001 212.21) 69.231% 73.077%, oklch(57.01% 0.1030 218.81) 73.077% 76.923%, oklch(57.04% 0.1071 224.01) 76.923% 80.769%, oklch(57.32% 0.1096 227.84) 80.769% 84.615%, oklch(57.80% 0.1119 230.24) 84.615% 88.462%, oklch(58.65% 0.1158 230.79) 88.462% 92.308%, oklch(59.59% 0.1193 230.43) 92.308% 96.154%, oklch(60.24% 0.1203 230.17) 96.154% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.145 | 109.7 |
| 2 | 0.941 | 0.135 | 101.2 |
| 3 | 0.886 | 0.124 | 84.3 |
| 4 | 0.807 | 0.087 | 65.3 |
| 5 | 0.626 | 0.069 | 175.2 |
| 6 | 0.575 | 0.106 | 211.1 |
| 7 | 0.575 | 0.11 | 229.1 |
| 8 | 0.602 | 0.123 | 230.2 |

## In these collections

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

## Other forms

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