# Duotone yellow to blue linear gradient

Duotone yellow to blue linear gradient with 8 colors: #ebe875, #e1e08e, #ccd3ba, #b0c1d3, #8fafeb, #759de5, #6692d1, #698caf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc52RM8SW_-yMwVmC8-X6LBViqP9TJr9z5g-4`
- Page: https://grabient.com/kc52RM8SW_-yMwVmC8-X6LBViqP9TJr9z5g-4?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: pastel
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 2.7 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 | `#ebe875` | `oklch(90.94% 0.1378 107.58)` | Fresh Lemonade | black, 16.2 to 1 |
| 2 | `#e1e08e` | `oklch(88.98% 0.1033 107.58)` | Citrus Butter | black, 15.2 to 1 |
| 3 | `#ccd3ba` | `oklch(85.43% 0.0344 119.20)` | Solstice Breeze | black, 13.5 to 1 |
| 4 | `#b0c1d3` | `oklch(80.31% 0.0317 251.30)` | Airway | black, 11.3 to 1 |
| 5 | `#8fafeb` | `oklch(75.20% 0.0951 262.92)` | Fly Away | black, 9.4 to 1 |
| 6 | `#759de5` | `oklch(69.69% 0.1157 261.86)` | Greek Sea | black, 7.7 to 1 |
| 7 | `#6692d1` | `oklch(65.35% 0.1061 257.64)` | Bashful Blue | black, 6.5 to 1 |
| 8 | `#698caf` | `oklch(62.60% 0.0661 249.18)` | Genteel Blue | black, 5.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ebe875 0.0%, #e1e08e 14.3%, #ccd3ba 28.6%, #b0c1d3 42.9%, #8fafeb 57.1%, #759de5 71.4%, #6692d1 85.7%, #698caf 100.0%);
background: linear-gradient(90deg in oklch, oklch(90.94% 0.1378 107.58) 0.0%, oklch(88.98% 0.1033 107.58) 14.3%, oklch(85.43% 0.0344 119.20) 28.6%, oklch(80.31% 0.0317 251.30) 42.9%, oklch(75.20% 0.0951 262.92) 57.1%, oklch(69.69% 0.1157 261.86) 71.4%, oklch(65.35% 0.1061 257.64) 85.7%, oklch(62.60% 0.0661 249.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.909 | 0.138 | 107.6 |
| 2 | 0.89 | 0.103 | 107.6 |
| 3 | 0.854 | 0.034 | 119.2 |
| 4 | 0.803 | 0.032 | 251.3 |
| 5 | 0.752 | 0.095 | 262.9 |
| 6 | 0.697 | 0.116 | 261.9 |
| 7 | 0.654 | 0.106 | 257.6 |
| 8 | 0.626 | 0.066 | 249.2 |

## In these collections

- [Golden pollen](https://grabient.com/golden-pollen)

## Other forms

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