# Blue cyan cream bands

Duotone blue and yellow linear swatches 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.

- Also called: Duotone blue and yellow linear swatches
- Seed: `kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg`
- Page: https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg?style=linearSwatches&steps=13
- Drawn as: linear swatches, 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.000% 7.692%, #4699f2 7.692% 15.385%, #5ab3ff 15.385% 23.077%, #6bc9ff 23.077% 30.769%, #7eddfd 30.769% 38.462%, #8ef1fe 38.462% 46.154%, #a1fffe 46.154% 53.846%, #c1feff 53.846% 61.538%, #c7feff 61.538% 69.231%, #d7fff0 69.231% 76.923%, #e5ffde 76.923% 84.615%, #f0ffc6 84.615% 92.308%, #fffda4 92.308% 100.000%);
background: linear-gradient(90deg, oklch(61.42% 0.1626 255.23) 0.000% 7.692%, oklch(67.25% 0.1548 252.53) 7.692% 15.385%, oklch(74.41% 0.1398 246.78) 15.385% 23.077%, oklch(79.97% 0.1177 235.81) 23.077% 30.769%, oklch(85.04% 0.1006 222.48) 30.769% 38.462%, oklch(90.11% 0.0946 207.09) 38.462% 46.154%, oklch(94.09% 0.0896 195.00) 46.154% 53.846%, oklch(95.57% 0.0604 197.96) 53.846% 61.538%, oklch(96.06% 0.0559 197.10) 61.538% 69.231%, oklch(96.75% 0.0460 170.18) 69.231% 76.923%, oklch(97.24% 0.0510 138.99) 76.923% 84.615%, oklch(97.51% 0.0753 119.50) 84.615% 92.308%, oklch(97.64% 0.1102 107.29) 92.308% 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&steps=13)
- [PNG](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.png?style=linearSwatches&steps=13)
- [SVG](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.svg?style=linearSwatches&steps=13)
- [CSS](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.css?style=linearSwatches&steps=13)
- [ASE](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.ase?style=linearSwatches&steps=13)
- [GPL](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.gpl?style=linearSwatches&steps=13)
- [GRD](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.grd?style=linearSwatches&steps=13)
- [Design tokens](https://grabient.com/kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg.tokens.json?style=linearSwatches&steps=13)
- [Social card](https://grabient.com/api/og?seed=kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg&style=linearSwatches&steps=13)
- [Palettes like this one](https://grabient.com/palettes?q=kanHa13rO--wkvR3oLy-hTAPuSuR8KDwg)
- [Guide for agents](https://grabient.com/llms.txt)