# Blue, cyan and green linear swatches

Blue, cyan and green linear swatches with 8 colors: #2a576b, #077fa7, #00afdb, #11dbe6, #16fbc3, #27fe82, #40ff4c, #6ce637. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcbiujRye_9kwP1nMb1b788G9SvdvX78aNS_Q`
- Page: https://grabient.com/kcbiujRye_9kwP1nMb1b788G9SvdvX78aNS_Q?style=linearSwatches&steps=8&angle=0
- Drawn as: linear swatches, 8 steps, 0 degrees
- Kinds: light center, vivid, neon, light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.8 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 | `#2a576b` | `oklch(43.31% 0.0593 229.22)` | Deep Loch | white, 7.8 to 1 |
| 2 | `#077fa7` | `oklch(55.91% 0.1089 229.22)` | Advertising Blue | black, 4.6 to 1 |
| 3 | `#00afdb` | `oklch(70.08% 0.1316 223.94)` | Bright Cerulean | black, 8.1 to 1 |
| 4 | `#11dbe6` | `oklch(81.10% 0.1364 201.74)` | Thousand Sons Blue | black, 12.2 to 1 |
| 5 | `#16fbc3` | `oklch(87.80% 0.1736 168.98)` | Bright Teal | black, 15.5 to 1 |
| 6 | `#27fe82` | `oklch(87.40% 0.2274 151.02)` | Guppie Green | black, 15.5 to 1 |
| 7 | `#40ff4c` | `oklch(87.40% 0.2632 143.62)` | Bright Light Green | black, 15.5 to 1 |
| 8 | `#6ce637` | `oklch(82.28% 0.2329 138.34)` | Shire Green | black, 13 to 1 |

## CSS

```css
background: linear-gradient(0deg, #2a576b 0.000% 12.500%, #077fa7 12.500% 25.000%, #00afdb 25.000% 37.500%, #11dbe6 37.500% 50.000%, #16fbc3 50.000% 62.500%, #27fe82 62.500% 75.000%, #40ff4c 75.000% 87.500%, #6ce637 87.500% 100.000%);
background: linear-gradient(0deg, oklch(43.31% 0.0593 229.22) 0.000% 12.500%, oklch(55.91% 0.1089 229.22) 12.500% 25.000%, oklch(70.08% 0.1316 223.94) 25.000% 37.500%, oklch(81.10% 0.1364 201.74) 37.500% 50.000%, oklch(87.80% 0.1736 168.98) 50.000% 62.500%, oklch(87.40% 0.2274 151.02) 62.500% 75.000%, oklch(87.40% 0.2632 143.62) 75.000% 87.500%, oklch(82.28% 0.2329 138.34) 87.500% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.433 | 0.059 | 229.2 |
| 2 | 0.559 | 0.109 | 229.2 |
| 3 | 0.701 | 0.132 | 223.9 |
| 4 | 0.811 | 0.136 | 201.7 |
| 5 | 0.878 | 0.174 | 169 |
| 6 | 0.874 | 0.227 | 151 |
| 7 | 0.874 | 0.263 | 143.6 |
| 8 | 0.823 | 0.233 | 138.3 |

## In these collections

- [Green gradients](https://grabient.com/green-gradients)
- [Tropical gradients](https://grabient.com/tropical-gradients)
- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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