# Complementary blue to yellow linear gradient

Complementary blue to yellow linear gradient with 8 colors: #2e3dc8, #3342c0, #4d4eaf, #6c688d, #8d8679, #aea451, #c6bb43, #d1ca35. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kccprAOcdADy3QNEFUEzwfSFomQljMsA6DpAI`
- Page: https://grabient.com/kccprAOcdADy3QNEFUEzwfSFomQljMsA6DpAI?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.6 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 | `#2e3dc8` | `oklch(44.88% 0.2122 270.00)` | Blue Blue | white, 8 to 1 |
| 2 | `#3342c0` | `oklch(45.28% 0.1957 271.06)` | Blue Blue | white, 7.8 to 1 |
| 3 | `#4d4eaf` | `oklch(47.64% 0.1516 278.45)` | Brandywine Raspberry | white, 6.9 to 1 |
| 4 | `#6c688d` | `oklch(53.54% 0.0579 289.02)` | Heron | white, 5.2 to 1 |
| 5 | `#8d8679` | `oklch(62.20% 0.0207 82.25)` | Roller Coaster | black, 5.8 to 1 |
| 6 | `#aea451` | `oklch(70.87% 0.1047 102.33)` | Desert Locust | black, 8.1 to 1 |
| 7 | `#c6bb43` | `oklch(77.95% 0.1392 104.44)` | Humorous Green | black, 10.6 to 1 |
| 8 | `#d1ca35` | `oklch(81.89% 0.1598 106.56)` | Lime Pop | black, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2e3dc8 0.0%, #3342c0 14.3%, #4d4eaf 28.6%, #6c688d 42.9%, #8d8679 57.1%, #aea451 71.4%, #c6bb43 85.7%, #d1ca35 100.0%);
background: linear-gradient(90deg in oklch, oklch(44.88% 0.2122 270.00) 0.0%, oklch(45.28% 0.1957 271.06) 14.3%, oklch(47.64% 0.1516 278.45) 28.6%, oklch(53.54% 0.0579 289.02) 42.9%, oklch(62.20% 0.0207 82.25) 57.1%, oklch(70.87% 0.1047 102.33) 71.4%, oklch(77.95% 0.1392 104.44) 85.7%, oklch(81.89% 0.1598 106.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.449 | 0.212 | 270 |
| 2 | 0.453 | 0.196 | 271.1 |
| 3 | 0.476 | 0.152 | 278.5 |
| 4 | 0.535 | 0.058 | 289 |
| 5 | 0.622 | 0.021 | 442.3 |
| 6 | 0.709 | 0.105 | 462.3 |
| 7 | 0.78 | 0.139 | 464.4 |
| 8 | 0.819 | 0.16 | 466.6 |

## Other forms

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