# Analogous blue and teal angular gradient

Analogous blue and teal angular gradient with 32 colors: #0681d2, #0086d4, #008ed5, #0198d8, #08a1da, #0eaadb, #0db2dd, #09bbde, #08c4df, #0ecddf, #17d3de, #1dd9dd, #1edddb, #1ce0d9, #1ce3d7, #1fe3d5, #27e2d3, #33e0d1, #3ddbcf, #44d6ce, #47d0ce, #47cacf, #46c2d2, #49b9d5, #4fafd6, #55a5d7, #599dd7, #5b95d8, #5c8ddb, #5e85dd, #607fdf, #6379e0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA`
- Page: https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA?style=angularGradient&steps=32&angle=150
- Drawn as: angular gradient, 32 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 | `#0086d4` | `oklch(60.06% 0.1511 244.99)` | Calgar Blue | black, 5.3 to 1 |
| 3 | `#008ed5` | `oklch(62.02% 0.1460 241.54)` | Kahu Blue | black, 5.8 to 1 |
| 4 | `#0198d8` | `oklch(64.32% 0.1411 237.39)` | Bayern Blue | black, 6.4 to 1 |
| 5 | `#08a1da` | `oklch(66.71% 0.1362 232.85)` | Vanadyl Blue | black, 7.1 to 1 |
| 6 | `#0eaadb` | `oklch(68.95% 0.1327 228.19)` | Blue Fire | black, 7.7 to 1 |
| 7 | `#0db2dd` | `oklch(71.04% 0.1309 223.26)` | Blue Atoll | black, 8.4 to 1 |
| 8 | `#09bbde` | `oklch(73.24% 0.1303 217.66)` | Maldives | black, 9.2 to 1 |
| 9 | `#08c4df` | `oklch(75.41% 0.1305 211.84)` | Caribbean Blue | black, 10 to 1 |
| 10 | `#0ecddf` | `oklch(77.40% 0.1312 206.24)` | Jade Glass | black, 10.7 to 1 |
| 11 | `#17d3de` | `oklch(79.07% 0.1320 201.35)` | Aztec Turquoise | black, 11.4 to 1 |
| 12 | `#1dd9dd` | `oklch(80.34% 0.1332 197.32)` | Fish Boy | black, 11.9 to 1 |
| 13 | `#1edddb` | `oklch(81.36% 0.1356 193.64)` | Fish Boy | black, 12.4 to 1 |
| 14 | `#1ce0d9` | `oklch(82.11% 0.1384 190.46)` | Fish Boy | black, 12.7 to 1 |
| 15 | `#1ce3d7` | `oklch(82.58% 0.1405 188.01)` | MoS₂ Cyan | black, 12.9 to 1 |
| 16 | `#1fe3d5` | `oklch(82.73% 0.1411 186.52)` | MoS₂ Cyan | black, 13 to 1 |
| 17 | `#27e2d3` | `oklch(82.53% 0.1392 186.11)` | Fresh Turquoise | black, 12.9 to 1 |
| 18 | `#33e0d1` | `oklch(81.94% 0.1344 186.36)` | Fresh Turquoise | black, 12.6 to 1 |
| 19 | `#3ddbcf` | `oklch(81.02% 0.1280 187.46)` | Fresh Turquoise | black, 12.2 to 1 |
| 20 | `#44d6ce` | `oklch(79.85% 0.1213 189.69)` | Turquoise Panic | black, 11.7 to 1 |
| 21 | `#47d0ce` | `oklch(78.51% 0.1156 193.37)` | Medium Turquoise | black, 11.1 to 1 |
| 22 | `#47cacf` | `oklch(77.05% 0.1120 198.88)` | Sea Serpent | black, 10.6 to 1 |
| 23 | `#46c2d2` | `oklch(75.28% 0.1093 207.17)` | Baharroth Blue | black, 9.9 to 1 |
| 24 | `#49b9d5` | `oklch(73.26% 0.1073 217.39)` | Bachelor Button | black, 9.1 to 1 |
| 25 | `#4fafd6` | `oklch(71.17% 0.1065 228.23)` | Epimetheus | black, 8.4 to 1 |
| 26 | `#55a5d7` | `oklch(69.18% 0.1076 238.39)` | Blue Astro | black, 7.7 to 1 |
| 27 | `#599dd7` | `oklch(67.45% 0.1110 246.59)` | Blue Bay | black, 7.2 to 1 |
| 28 | `#5b95d8` | `oklch(65.86% 0.1184 253.38)` | Little Boy Blue | black, 6.7 to 1 |
| 29 | `#5c8ddb` | `oklch(64.35% 0.1288 259.38)` | Blue Jay | black, 6.2 to 1 |
| 30 | `#5e85dd` | `oklch(62.98% 0.1401 264.52)` | Blue Jay | black, 5.9 to 1 |
| 31 | `#607fdf` | `oklch(61.85% 0.1502 268.69)` | Blue Jay | black, 5.5 to 1 |
| 32 | `#6379e0` | `oklch(61.02% 0.1571 271.81)` | Pan Purple | black, 5.3 to 1 |

## CSS

```css
background: conic-gradient(from 150deg, #0681d2 0.0%, #0086d4 3.2%, #008ed5 6.5%, #0198d8 9.7%, #08a1da 12.9%, #0eaadb 16.1%, #0db2dd 19.4%, #09bbde 22.6%, #08c4df 25.8%, #0ecddf 29.0%, #17d3de 32.3%, #1dd9dd 35.5%, #1edddb 38.7%, #1ce0d9 41.9%, #1ce3d7 45.2%, #1fe3d5 48.4%, #27e2d3 51.6%, #33e0d1 54.8%, #3ddbcf 58.1%, #44d6ce 61.3%, #47d0ce 64.5%, #47cacf 67.7%, #46c2d2 71.0%, #49b9d5 74.2%, #4fafd6 77.4%, #55a5d7 80.6%, #599dd7 83.9%, #5b95d8 87.1%, #5c8ddb 90.3%, #5e85dd 93.5%, #607fdf 96.8%, #6379e0 100.0%);
background: conic-gradient(from 150deg in oklch, oklch(58.66% 0.1543 247.50) 0.0%, oklch(60.06% 0.1511 244.99) 3.2%, oklch(62.02% 0.1460 241.54) 6.5%, oklch(64.32% 0.1411 237.39) 9.7%, oklch(66.71% 0.1362 232.85) 12.9%, oklch(68.95% 0.1327 228.19) 16.1%, oklch(71.04% 0.1309 223.26) 19.4%, oklch(73.24% 0.1303 217.66) 22.6%, oklch(75.41% 0.1305 211.84) 25.8%, oklch(77.40% 0.1312 206.24) 29.0%, oklch(79.07% 0.1320 201.35) 32.3%, oklch(80.34% 0.1332 197.32) 35.5%, oklch(81.36% 0.1356 193.64) 38.7%, oklch(82.11% 0.1384 190.46) 41.9%, oklch(82.58% 0.1405 188.01) 45.2%, oklch(82.73% 0.1411 186.52) 48.4%, oklch(82.53% 0.1392 186.11) 51.6%, oklch(81.94% 0.1344 186.36) 54.8%, oklch(81.02% 0.1280 187.46) 58.1%, oklch(79.85% 0.1213 189.69) 61.3%, oklch(78.51% 0.1156 193.37) 64.5%, oklch(77.05% 0.1120 198.88) 67.7%, oklch(75.28% 0.1093 207.17) 71.0%, oklch(73.26% 0.1073 217.39) 74.2%, oklch(71.17% 0.1065 228.23) 77.4%, oklch(69.18% 0.1076 238.39) 80.6%, oklch(67.45% 0.1110 246.59) 83.9%, oklch(65.86% 0.1184 253.38) 87.1%, oklch(64.35% 0.1288 259.38) 90.3%, oklch(62.98% 0.1401 264.52) 93.5%, oklch(61.85% 0.1502 268.69) 96.8%, 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?style=angularGradient&steps=32&angle=150)
- [PNG](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.png?style=angularGradient&steps=32&angle=150)
- [SVG](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.svg?style=angularGradient&steps=32&angle=150)
- [CSS](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.css?style=angularGradient&steps=32&angle=150)
- [ASE](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.ase?style=angularGradient&steps=32&angle=150)
- [GPL](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.gpl?style=angularGradient&steps=32&angle=150)
- [GRD](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.grd?style=angularGradient&steps=32&angle=150)
- [Design tokens](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.tokens.json?style=angularGradient&steps=32&angle=150)
- [Social card](https://grabient.com/api/og?seed=kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA&style=angularGradient&steps=32&angle=150)
- [Palettes like this one](https://grabient.com/palettes?q=kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA)
- [Guide for agents](https://grabient.com/llms.txt)