# Duotone blue and yellow linear swatches

Duotone blue and yellow linear swatches with 7 colors: #3684e3, #5ab3ff, #7eddfd, #a1fffe, #c7feff, #e5ffde, #fffda4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg`
- Page: https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg?style=linearSwatches
- Drawn as: linear swatches, 7 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 | `#5ab3ff` | `oklch(74.41% 0.1398 246.78)` | Tiān Lán Sky | black, 9.3 to 1 |
| 3 | `#7eddfd` | `oklch(85.04% 0.1006 222.48)` | Tranquil Pool | black, 13.6 to 1 |
| 4 | `#a1fffe` | `oklch(94.09% 0.0896 195.00)` | Glitchy Shader Blue | black, 18.2 to 1 |
| 5 | `#c7feff` | `oklch(96.06% 0.0559 197.10)` | VIC 20 Blue | black, 19 to 1 |
| 6 | `#e5ffde` | `oklch(97.24% 0.0510 138.99)` | Nyanza | black, 19.6 to 1 |
| 7 | `#fffda4` | `oklch(97.64% 0.1102 107.29)` | Calamansi | black, 19.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3684e3 0.000% 14.286%, #5ab3ff 14.286% 28.571%, #7eddfd 28.571% 42.857%, #a1fffe 42.857% 57.143%, #c7feff 57.143% 71.429%, #e5ffde 71.429% 85.714%, #fffda4 85.714% 100.000%);
background: linear-gradient(90deg, oklch(61.42% 0.1626 255.23) 0.000% 14.286%, oklch(74.41% 0.1398 246.78) 14.286% 28.571%, oklch(85.04% 0.1006 222.48) 28.571% 42.857%, oklch(94.09% 0.0896 195.00) 42.857% 57.143%, oklch(96.06% 0.0559 197.10) 57.143% 71.429%, oklch(97.24% 0.0510 138.99) 71.429% 85.714%, oklch(97.64% 0.1102 107.29) 85.714% 100.000%);
```

## 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?style=linearSwatches)
- [PNG](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.png?style=linearSwatches)
- [SVG](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.svg?style=linearSwatches)
- [CSS](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.css?style=linearSwatches)
- [ASE](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.ase?style=linearSwatches)
- [GPL](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.gpl?style=linearSwatches)
- [GRD](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.grd?style=linearSwatches)
- [Design tokens](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.tokens.json?style=linearSwatches)
- [Social card](https://grabient.com/api/og?seed=kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg&style=linearSwatches)
- [Palettes like this one](https://grabient.com/palettes?q=kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg)
- [Guide for agents](https://grabient.com/llms.txt)