# Teal color palette

The Teal color palette brings together blue and teal. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Analogous navy, teal and cyan linear gradient
- Seed: `kYXjusxyM5F01Plru0A8DfB2s0Qu`
- Page: https://grabient.com/kYXjusxyM5F01Plru0A8DfB2s0Qu?steps=13&angle=45
- Drawn as: linear gradient, 13 steps, 45 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.6 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 | `#0c4467` | `oklch(37.01% 0.0813 242.58)` | Lush Aqua | white, 10.3 to 1 |
| 2 | `#005b70` | `oklch(43.63% 0.0796 220.26)` | Deep Lagoon | white, 7.6 to 1 |
| 3 | `#007b78` | `oklch(52.63% 0.0903 192.25)` | Surfie Green | white, 5.1 to 1 |
| 4 | `#179681` | `oklch(60.49% 0.1072 177.53)` | Aqua Waters | black, 5.7 to 1 |
| 5 | `#03b290` | `oklch(67.95% 0.1307 172.48)` | Victorian Greenhouse | black, 7.7 to 1 |
| 6 | `#00c99e` | `oklch(74.41% 0.1469 170.29)` | Caribbean Green | black, 9.8 to 1 |
| 7 | `#01ddad` | `oklch(79.80% 0.1580 169.93)` | Lifeless Green | black, 11.9 to 1 |
| 8 | `#05ecbf` | `oklch(83.99% 0.1622 172.12)` | Aquamarine | black, 13.7 to 1 |
| 9 | `#00f5d1` | `oklch(86.69% 0.1611 176.74)` | Bright Teal | black, 14.9 to 1 |
| 10 | `#02f8e3` | `oklch(88.01% 0.1560 183.73)` | Bright Aqua | black, 15.5 to 1 |
| 11 | `#00f6f2` | `oklch(87.92% 0.1507 192.65)` | Aqua Cyan | black, 15.4 to 1 |
| 12 | `#02ecfe` | `oklch(85.99% 0.1466 204.79)` | Whimsical Blue | black, 14.4 to 1 |
| 13 | `#49e1ff` | `oklch(84.25% 0.1303 214.04)` | Ionized-Air Glow | black, 13.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #0c4467 0.0%, #005b70 8.3%, #007b78 16.7%, #179681 25.0%, #03b290 33.3%, #00c99e 41.7%, #01ddad 50.0%, #05ecbf 58.3%, #00f5d1 66.7%, #02f8e3 75.0%, #00f6f2 83.3%, #02ecfe 91.7%, #49e1ff 100.0%);
background: linear-gradient(45deg in oklch, oklch(37.01% 0.0813 242.58) 0.0%, oklch(43.63% 0.0796 220.26) 8.3%, oklch(52.63% 0.0903 192.25) 16.7%, oklch(60.49% 0.1072 177.53) 25.0%, oklch(67.95% 0.1307 172.48) 33.3%, oklch(74.41% 0.1469 170.29) 41.7%, oklch(79.80% 0.1580 169.93) 50.0%, oklch(83.99% 0.1622 172.12) 58.3%, oklch(86.69% 0.1611 176.74) 66.7%, oklch(88.01% 0.1560 183.73) 75.0%, oklch(87.92% 0.1507 192.65) 83.3%, oklch(85.99% 0.1466 204.79) 91.7%, oklch(84.25% 0.1303 214.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.37 | 0.081 | 242.6 |
| 2 | 0.559 | 0.096 | 184.5 |
| 3 | 0.732 | 0.146 | 170.7 |
| 4 | 0.846 | 0.163 | 172.8 |
| 5 | 0.882 | 0.153 | 188.7 |
| 6 | 0.843 | 0.143 | 214 |

## In these collections

- [Beach gradients](https://grabient.com/beach-gradients)
- [Aurora swatches](https://grabient.com/aurora-swatches)
- [Cyan gradients](https://grabient.com/cyan-gradients)

## Other forms

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