# Teal color palette

The Teal color palette brings together 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 lightest and darkest tones both fall within the teal color family.

- Also called: Monochrome teal linear gradient
- Seed: `kWajWGxyQ_V8uwTwNz98b294`
- Page: https://grabient.com/kWajWGxyQ_V8uwTwNz98b294?steps=6&angle=135
- Drawn as: linear gradient, 6 steps, 135 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 6.3 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 | `#005954` | `oklch(41.74% 0.0723 189.14)` | Baltic Prince | white, 8.2 to 1 |
| 2 | `#007c70` | `oklch(52.54% 0.0931 183.98)` | Romantic Isle | white, 5.1 to 1 |
| 3 | `#00ada7` | `oklch(67.42% 0.1162 190.50)` | Teal Me No Lies | black, 7.5 to 1 |
| 4 | `#05dddc` | `oklch(81.14% 0.1382 194.41)` | Fish Boy | black, 12.3 to 1 |
| 5 | `#00fced` | `oklch(89.23% 0.1556 187.36)` | Bright Aqua | black, 16.1 to 1 |
| 6 | `#23ffd2` | `oklch(89.37% 0.1670 173.29)` | Plunge Pool | black, 16.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #005954 0.0%, #007c70 20.0%, #00ada7 40.0%, #05dddc 60.0%, #00fced 80.0%, #23ffd2 100.0%);
background: linear-gradient(135deg in oklch, oklch(41.74% 0.0723 189.14) 0.0%, oklch(52.54% 0.0931 183.98) 20.0%, oklch(67.42% 0.1162 190.50) 40.0%, oklch(81.14% 0.1382 194.41) 60.0%, oklch(89.23% 0.1556 187.36) 80.0%, oklch(89.37% 0.1670 173.29) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.417 | 0.073 | 189.1 |
| 2 | 0.559 | 0.099 | 183.9 |
| 3 | 0.748 | 0.128 | 194.4 |
| 4 | 0.882 | 0.152 | 190.2 |
| 5 | 0.894 | 0.169 | 173.3 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Teal gradients](https://grabient.com/teal-gradients)

## Other forms

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