# Analogous blue and teal linear gradient

Analogous blue and teal linear gradient with 7 colors: #0681d2, #0eabdc, #1ad5dd, #22e3d4, #47ccce, #599ed7, #6379e0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA`
- Page: https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA?angle=150
- Drawn as: linear gradient, 7 steps, 150 degrees
- Kinds: pastel, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#0681d2` | `oklch(58.66% 0.1543 247.50)` | Electron Blue | black, 5 to 1 |
| 2 | `#0eabdc` | `oklch(69.29% 0.1323 227.42)` | Blue Fire | black, 7.8 to 1 |
| 3 | `#1ad5dd` | `oklch(79.53% 0.1323 199.95)` | Aztec Turquoise | black, 11.6 to 1 |
| 4 | `#22e3d4` | `oklch(82.68% 0.1406 186.21)` | Ice Climber | black, 13 to 1 |
| 5 | `#47ccce` | `oklch(77.56% 0.1130 196.78)` | May Day | black, 10.8 to 1 |
| 6 | `#599ed7` | `oklch(67.72% 0.1102 245.39)` | Blue Bay | black, 7.2 to 1 |
| 7 | `#6379e0` | `oklch(61.02% 0.1571 271.81)` | Pan Purple | black, 5.3 to 1 |

## CSS

```css
background: linear-gradient(150deg, #0681d2 0.0%, #0eabdc 16.7%, #1ad5dd 33.3%, #22e3d4 50.0%, #47ccce 66.7%, #599ed7 83.3%, #6379e0 100.0%);
background: linear-gradient(150deg in oklch, oklch(58.66% 0.1543 247.50) 0.0%, oklch(69.29% 0.1323 227.42) 16.7%, oklch(79.53% 0.1323 199.95) 33.3%, oklch(82.68% 0.1406 186.21) 50.0%, oklch(77.56% 0.1130 196.78) 66.7%, oklch(67.72% 0.1102 245.39) 83.3%, oklch(61.02% 0.1571 271.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.154 | 247.5 |
| 2 | 0.693 | 0.132 | 227.4 |
| 3 | 0.795 | 0.132 | 199.9 |
| 4 | 0.827 | 0.141 | 186.2 |
| 5 | 0.776 | 0.113 | 196.8 |
| 6 | 0.677 | 0.11 | 245.4 |
| 7 | 0.61 | 0.157 | 271.8 |

## In these collections

- [Teal gradients](https://grabient.com/teal-gradients)
- [Cyan gradients](https://grabient.com/cyan-gradients)

## Other forms

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