# Duotone blue and green linear swatches

Duotone blue and green linear swatches with 6 colors: #1092e9, #2dafcf, #60d0b4, #83dcb2, #7ecccc, #5cabe8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYo3ev2So8mOoOtpJr55RxD9srRY`
- Page: https://grabient.com/kYo3ev2So8mOoOtpJr55RxD9srRY?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: pastel, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 2 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 | `#1092e9` | `oklch(64.17% 0.1640 246.80)` | Bleu de France | black, 6.3 to 1 |
| 2 | `#2dafcf` | `oklch(70.08% 0.1157 218.26)` | Aquarius | black, 8.1 to 1 |
| 3 | `#60d0b4` | `oklch(78.35% 0.1102 174.94)` | Sweet Garden | black, 11.1 to 1 |
| 4 | `#83dcb2` | `oklch(82.68% 0.1061 162.26)` | Jovial Jade | black, 12.8 to 1 |
| 5 | `#7ecccc` | `oklch(79.53% 0.0772 196.07)` | Aqua Belt | black, 11.4 to 1 |
| 6 | `#5cabe8` | `oklch(71.65% 0.1185 243.63)` | Blue Jeans | black, 8.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1092e9 0.000% 16.667%, #2dafcf 16.667% 33.333%, #60d0b4 33.333% 50.000%, #83dcb2 50.000% 66.667%, #7ecccc 66.667% 83.333%, #5cabe8 83.333% 100.000%);
background: linear-gradient(90deg, oklch(64.17% 0.1640 246.80) 0.000% 16.667%, oklch(70.08% 0.1157 218.26) 16.667% 33.333%, oklch(78.35% 0.1102 174.94) 33.333% 50.000%, oklch(82.68% 0.1061 162.26) 50.000% 66.667%, oklch(79.53% 0.0772 196.07) 66.667% 83.333%, oklch(71.65% 0.1185 243.63) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.642 | 0.164 | 246.8 |
| 2 | 0.701 | 0.116 | 218.3 |
| 3 | 0.783 | 0.11 | 174.9 |
| 4 | 0.827 | 0.106 | 162.3 |
| 5 | 0.795 | 0.077 | 196.1 |
| 6 | 0.717 | 0.119 | 243.6 |

## In these collections

- [Blue and teal swatches](https://grabient.com/blue-and-teal-swatches)

## Other forms

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