# Complementary yellow, white and blue linear gradient

Complementary yellow, white and blue linear gradient with 32 colors: #fffe94, #fffe96, #fffe9b, #fffea0, #fffea4, #fffea8, #fffeaa, #fffead, #fefeb5, #feffbd, #feffc7, #ffffd2, #ffffde, #feffe8, #feffee, #fcfff2, #fafef3, #f7fdf3, #f2fdf2, #eafdf2, #e0fdf4, #d5fbf9, #caf8fe, #c5f2ff, #beeaff, #b2e1ff, #a6d6ff, #9ac9ff, #91bcff, #8bb0fe, #88a5fa, #889cf8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW-GRNfKK__4FwT2FUv2zFGI`
- Page: https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 2.5 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 | `#fffe94` | `oklch(97.64% 0.1292 108.29)` | Pastel Yellow | black, 19.9 to 1 |
| 2 | `#fffe96` | `oklch(97.66% 0.1264 108.21)` | Sunburst Yellow | black, 19.9 to 1 |
| 3 | `#fffe9b` | `oklch(97.69% 0.1215 108.03)` | Sunburst Yellow | black, 19.9 to 1 |
| 4 | `#fffea0` | `oklch(97.72% 0.1158 107.80)` | Calamansi | black, 19.9 to 1 |
| 5 | `#fffea4` | `oklch(97.77% 0.1106 107.61)` | Calamansi | black, 19.9 to 1 |
| 6 | `#fffea8` | `oklch(97.82% 0.1068 107.51)` | Ginger Lemon Tea | black, 19.9 to 1 |
| 7 | `#fffeaa` | `oklch(97.88% 0.1051 107.57)` | Ginger Lemon Tea | black, 19.9 to 1 |
| 8 | `#fffead` | `oklch(97.96% 0.1009 107.86)` | Ginger Lemon Tea | black, 20 to 1 |
| 9 | `#fefeb5` | `oklch(98.06% 0.0930 108.42)` | Lamenters Yellow | black, 20 to 1 |
| 10 | `#feffbd` | `oklch(98.26% 0.0830 108.39)` | Golden Hermes | black, 20.1 to 1 |
| 11 | `#feffc7` | `oklch(98.54% 0.0709 107.86)` | Golden Wash | black, 20.3 to 1 |
| 12 | `#ffffd2` | `oklch(98.85% 0.0579 107.33)` | Matt White | black, 20.4 to 1 |
| 13 | `#ffffde` | `oklch(99.14% 0.0431 107.30)` | Parmesan | black, 20.6 to 1 |
| 14 | `#feffe8` | `oklch(99.36% 0.0294 108.32)` | Caster Sugar | black, 20.7 to 1 |
| 15 | `#feffee` | `oklch(99.44% 0.0219 110.90)` | Eburnean | black, 20.7 to 1 |
| 16 | `#fcfff2` | `oklch(99.35% 0.0169 115.58)` | Milk | black, 20.6 to 1 |
| 17 | `#fafef3` | `oklch(99.05% 0.0144 122.92)` | Milk | black, 20.5 to 1 |
| 18 | `#f7fdf3` | `oklch(98.69% 0.0152 133.50)` | Touch of Mint | black, 20.3 to 1 |
| 19 | `#f2fdf2` | `oklch(98.26% 0.0186 146.56)` | Peaceful Rain | black, 20 to 1 |
| 20 | `#eafdf2` | `oklch(97.71% 0.0242 161.21)` | Mint Chiffon | black, 19.8 to 1 |
| 21 | `#e0fdf4` | `oklch(96.99% 0.0313 176.55)` | Mint Condition | black, 19.4 to 1 |
| 22 | `#d5fbf9` | `oklch(96.06% 0.0393 191.68)` | Pale Blue | black, 18.9 to 1 |
| 23 | `#caf8fe` | `oklch(94.86% 0.0477 205.70)` | Thin Air | black, 18.3 to 1 |
| 24 | `#c5f2ff` | `oklch(93.35% 0.0492 217.70)` | Heaven’s Gate | black, 17.4 to 1 |
| 25 | `#beeaff` | `oklch(91.36% 0.0541 227.54)` | Blue Java Banana | black, 16.4 to 1 |
| 26 | `#b2e1ff` | `oklch(88.71% 0.0637 236.55)` | Frozen Landscape | black, 15.1 to 1 |
| 27 | `#a6d6ff` | `oklch(85.61% 0.0764 244.77)` | Malmö FF | black, 13.6 to 1 |
| 28 | `#9ac9ff` | `oklch(82.31% 0.0910 252.18)` | Apocyan | black, 12.2 to 1 |
| 29 | `#91bcff` | `oklch(79.02% 0.1066 258.75)` | Truesky Gloxym | black, 10.8 to 1 |
| 30 | `#8bb0fe` | `oklch(76.00% 0.1198 264.45)` | Kitten’s Eye | black, 9.6 to 1 |
| 31 | `#88a5fa` | `oklch(73.46% 0.1286 269.26)` | Fennel Flower | black, 8.7 to 1 |
| 32 | `#889cf8` | `oklch(71.65% 0.1350 273.13)` | Periwinkle Blue | black, 8.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fffe94 0.0%, #fffe96 3.2%, #fffe9b 6.5%, #fffea0 9.7%, #fffea4 12.9%, #fffea8 16.1%, #fffeaa 19.4%, #fffead 22.6%, #fefeb5 25.8%, #feffbd 29.0%, #feffc7 32.3%, #ffffd2 35.5%, #ffffde 38.7%, #feffe8 41.9%, #feffee 45.2%, #fcfff2 48.4%, #fafef3 51.6%, #f7fdf3 54.8%, #f2fdf2 58.1%, #eafdf2 61.3%, #e0fdf4 64.5%, #d5fbf9 67.7%, #caf8fe 71.0%, #c5f2ff 74.2%, #beeaff 77.4%, #b2e1ff 80.6%, #a6d6ff 83.9%, #9ac9ff 87.1%, #91bcff 90.3%, #8bb0fe 93.5%, #88a5fa 96.8%, #889cf8 100.0%);
background: linear-gradient(90deg in oklch, oklch(97.64% 0.1292 108.29) 0.0%, oklch(97.66% 0.1264 108.21) 3.2%, oklch(97.69% 0.1215 108.03) 6.5%, oklch(97.72% 0.1158 107.80) 9.7%, oklch(97.77% 0.1106 107.61) 12.9%, oklch(97.82% 0.1068 107.51) 16.1%, oklch(97.88% 0.1051 107.57) 19.4%, oklch(97.96% 0.1009 107.86) 22.6%, oklch(98.06% 0.0930 108.42) 25.8%, oklch(98.26% 0.0830 108.39) 29.0%, oklch(98.54% 0.0709 107.86) 32.3%, oklch(98.85% 0.0579 107.33) 35.5%, oklch(99.14% 0.0431 107.30) 38.7%, oklch(99.36% 0.0294 108.32) 41.9%, oklch(99.44% 0.0219 110.90) 45.2%, oklch(99.35% 0.0169 115.58) 48.4%, oklch(99.05% 0.0144 122.92) 51.6%, oklch(98.69% 0.0152 133.50) 54.8%, oklch(98.26% 0.0186 146.56) 58.1%, oklch(97.71% 0.0242 161.21) 61.3%, oklch(96.99% 0.0313 176.55) 64.5%, oklch(96.06% 0.0393 191.68) 67.7%, oklch(94.86% 0.0477 205.70) 71.0%, oklch(93.35% 0.0492 217.70) 74.2%, oklch(91.36% 0.0541 227.54) 77.4%, oklch(88.71% 0.0637 236.55) 80.6%, oklch(85.61% 0.0764 244.77) 83.9%, oklch(82.31% 0.0910 252.18) 87.1%, oklch(79.02% 0.1066 258.75) 90.3%, oklch(76.00% 0.1198 264.45) 93.5%, oklch(73.46% 0.1286 269.26) 96.8%, oklch(71.65% 0.1350 273.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.976 | 0.138 | 108.3 |
| 2 | 0.98 | 0.095 | 108.3 |
| 3 | 0.992 | 0.015 | 118.8 |
| 4 | 0.929 | 0.058 | 220.3 |
| 5 | 0.717 | 0.135 | 273.1 |

## In these collections

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

## Other forms

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