# Teal and indigo cyan palette

The Teal and indigo cyan palette brings together blue and teal. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Analogous blue and teal angular gradient
- Seed: `kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA`
- Page: https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA?style=angularGradient&angle=150
- Drawn as: angular 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: conic-gradient(from 150deg, #0681d2 0.0%, #0eabdc 16.7%, #1ad5dd 33.3%, #22e3d4 50.0%, #47ccce 66.7%, #599ed7 83.3%, #6379e0 100.0%);
background: conic-gradient(from 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?style=angularGradient&angle=150)
- [PNG](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.png?style=angularGradient&angle=150)
- [SVG](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.svg?style=angularGradient&angle=150)
- [CSS](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.css?style=angularGradient&angle=150)
- [ASE](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.ase?style=angularGradient&angle=150)
- [GPL](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.gpl?style=angularGradient&angle=150)
- [GRD](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.grd?style=angularGradient&angle=150)
- [Design tokens](https://grabient.com/kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA.tokens.json?style=angularGradient&angle=150)
- [Social card](https://grabient.com/api/og?seed=kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA&style=angularGradient&angle=150)
- [Palettes like this one](https://grabient.com/palettes?q=kalXCwWDA9mUwPLpMz5YqlBNYoRbNuUMA)
- [Guide for agents](https://grabient.com/llms.txt)