# Duotone blue to yellow linear gradient

Duotone blue to yellow linear gradient with 13 colors: #3684e3, #4699f2, #5ab3ff, #6bc9ff, #7eddfd, #8ef1fe, #a1fffe, #c1feff, #c7feff, #d7fff0, #e5ffde, #f0ffc6, #fffda4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg`
- Page: https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg?steps=13
- Drawn as: linear gradient, 13 steps, 90 degrees
- Kinds: dark to light, pastel, light, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#3684e3` | `oklch(61.42% 0.1626 255.23)` | Bleu de France | black, 5.5 to 1 |
| 2 | `#4699f2` | `oklch(67.25% 0.1548 252.53)` | Polar Glow | black, 7 to 1 |
| 3 | `#5ab3ff` | `oklch(74.41% 0.1398 246.78)` | Tiān Lán Sky | black, 9.3 to 1 |
| 4 | `#6bc9ff` | `oklch(79.97% 0.1177 235.81)` | Skyan | black, 11.4 to 1 |
| 5 | `#7eddfd` | `oklch(85.04% 0.1006 222.48)` | Tranquil Pool | black, 13.6 to 1 |
| 6 | `#8ef1fe` | `oklch(90.11% 0.0946 207.09)` | Shallow Water | black, 16.1 to 1 |
| 7 | `#a1fffe` | `oklch(94.09% 0.0896 195.00)` | Glitchy Shader Blue | black, 18.2 to 1 |
| 8 | `#c1feff` | `oklch(95.57% 0.0604 197.96)` | The Big Freeze | black, 18.8 to 1 |
| 9 | `#c7feff` | `oklch(96.06% 0.0559 197.10)` | VIC 20 Blue | black, 19 to 1 |
| 10 | `#d7fff0` | `oklch(96.75% 0.0460 170.18)` | Candied Snow | black, 19.4 to 1 |
| 11 | `#e5ffde` | `oklch(97.24% 0.0510 138.99)` | Nyanza | black, 19.6 to 1 |
| 12 | `#f0ffc6` | `oklch(97.51% 0.0753 119.50)` | Snowdrop | black, 19.8 to 1 |
| 13 | `#fffda4` | `oklch(97.64% 0.1102 107.29)` | Calamansi | black, 19.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3684e3 0.0%, #4699f2 8.3%, #5ab3ff 16.7%, #6bc9ff 25.0%, #7eddfd 33.3%, #8ef1fe 41.7%, #a1fffe 50.0%, #c1feff 58.3%, #c7feff 66.7%, #d7fff0 75.0%, #e5ffde 83.3%, #f0ffc6 91.7%, #fffda4 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.42% 0.1626 255.23) 0.0%, oklch(67.25% 0.1548 252.53) 8.3%, oklch(74.41% 0.1398 246.78) 16.7%, oklch(79.97% 0.1177 235.81) 25.0%, oklch(85.04% 0.1006 222.48) 33.3%, oklch(90.11% 0.0946 207.09) 41.7%, oklch(94.09% 0.0896 195.00) 50.0%, oklch(95.57% 0.0604 197.96) 58.3%, oklch(96.06% 0.0559 197.10) 66.7%, oklch(96.75% 0.0460 170.18) 75.0%, oklch(97.24% 0.0510 138.99) 83.3%, oklch(97.51% 0.0753 119.50) 91.7%, oklch(97.64% 0.1102 107.29) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.614 | 0.163 | 255.2 |
| 2 | 0.744 | 0.142 | 246.8 |
| 3 | 0.85 | 0.101 | 222.5 |
| 4 | 0.941 | 0.09 | 195 |
| 5 | 0.961 | 0.056 | 197.1 |
| 6 | 0.972 | 0.051 | 139 |
| 7 | 0.976 | 0.11 | 107.3 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Butter yellow and blue](https://grabient.com/butter-yellow-and-blue)

## Other forms

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