# Teal color palette

The Teal color palette brings together light teal, teal, and pale teal. The colors span a narrow lightness range, combining strong color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is pale teal.

- Also called: Seamless pastel blue and cyan angular swatches
- Seed: `kY5UGE6bpAd_IwJWwcDZbM-PUZv0`
- Page: https://grabient.com/kY5UGE6bpAd_IwJWwcDZbM-PUZv0?style=angularSwatches&steps=6&angle=210
- Drawn as: angular swatches, 6 steps, 210 degrees
- Kinds: pastel, cool, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.2 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 | `#96f2e8` | `oklch(90.16% 0.0896 186.33)` | Freezy Breezy | black, 16.2 to 1 |
| 2 | `#00e4dd` | `oklch(83.07% 0.1432 190.55)` | Bright Turquoise | black, 13.1 to 1 |
| 3 | `#00c7c9` | `oklch(75.20% 0.1282 195.84)` | Turquoise Surf | black, 10 to 1 |
| 4 | `#00adb9` | `oklch(68.11% 0.1160 203.24)` | Placid Sea | black, 7.6 to 1 |
| 5 | `#00d9cf` | `oklch(79.92% 0.1388 188.44)` | Turquoise Panic | black, 11.8 to 1 |
| 6 | `#b0f5e9` | `oklch(92.13% 0.0703 183.16)` | Pale King’s Blue | black, 17 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #96f2e8 0.000% 16.667%, #00e4dd 16.667% 33.333%, #00c7c9 33.333% 50.000%, #00adb9 50.000% 66.667%, #00d9cf 66.667% 83.333%, #b0f5e9 83.333% 100.000%);
background: conic-gradient(from 210deg, oklch(90.16% 0.0896 186.33) 0.000% 16.667%, oklch(83.07% 0.1432 190.55) 16.667% 33.333%, oklch(75.20% 0.1282 195.84) 33.333% 50.000%, oklch(68.11% 0.1160 203.24) 50.000% 66.667%, oklch(79.92% 0.1388 188.44) 66.667% 83.333%, oklch(92.13% 0.0703 183.16) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.09 | 186.3 |
| 2 | 0.831 | 0.16 | 190.6 |
| 3 | 0.752 | 0.2 | 195.8 |
| 4 | 0.681 | 0.181 | 203.2 |
| 5 | 0.799 | 0.141 | 188.4 |
| 6 | 0.921 | 0.07 | 183.2 |

## In these collections

- [Cyan swatches](https://grabient.com/cyan-swatches)
- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Teal swatches](https://grabient.com/teal-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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