# Complementary yellow, white and blue linear gradient

Complementary yellow, white and blue linear gradient with 5 colors: #fffe94, #fefeb3, #fbfef3, #c4f0ff, #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=5
- Drawn as: linear gradient, 5 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 | `#fefeb3` | `oklch(98.03% 0.0951 108.28)` | VIC 20 Creme | black, 20 to 1 |
| 3 | `#fbfef3` | `oklch(99.21% 0.0152 118.85)` | Milk | black, 20.5 to 1 |
| 4 | `#c4f0ff` | `oklch(92.91% 0.0498 220.28)` | Heaven’s Gate | black, 17.2 to 1 |
| 5 | `#889cf8` | `oklch(71.65% 0.1350 273.13)` | Periwinkle Blue | black, 8.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fffe94 0.0%, #fefeb3 25.0%, #fbfef3 50.0%, #c4f0ff 75.0%, #889cf8 100.0%);
background: linear-gradient(90deg in oklch, oklch(97.64% 0.1292 108.29) 0.0%, oklch(98.03% 0.0951 108.28) 25.0%, oklch(99.21% 0.0152 118.85) 50.0%, oklch(92.91% 0.0498 220.28) 75.0%, 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=5)
- [PNG](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.png?steps=5)
- [SVG](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.svg?steps=5)
- [CSS](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.css?steps=5)
- [ASE](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.ase?steps=5)
- [GPL](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.gpl?steps=5)
- [GRD](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.grd?steps=5)
- [Design tokens](https://grabient.com/kW-GRNfKK__4FwT2FUv2zFGI.tokens.json?steps=5)
- [Social card](https://grabient.com/api/og?seed=kW-GRNfKK__4FwT2FUv2zFGI&steps=5)
- [Palettes like this one](https://grabient.com/palettes?q=kW-GRNfKK__4FwT2FUv2zFGI)
- [Guide for agents](https://grabient.com/llms.txt)