# Teal color palette

The Teal color palette brings together teal and green. The colors span a narrow lightness range, combining strong color with gentle contrast. Its light and open character suits travel posters and environmental mood boards. Its lightest and darkest tones both fall within the teal color family.

- Also called: Vivid monochrome cyan to teal linear gradient
- Seed: `kW12OWczO-PMzvpyuT5ccC_A`
- Page: https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A?steps=5&angle=315
- Drawn as: linear gradient, 5 steps, 315 degrees
- Kinds: even lightness, vivid, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#38e4ff` | `oklch(84.65% 0.1364 210.94)` | Shimmering Expanse Cyan | black, 13.7 to 1 |
| 2 | `#43fdff` | `oklch(90.55% 0.1419 196.14)` | Bright Cyan | black, 16.6 to 1 |
| 3 | `#50feeb` | `oklch(90.55% 0.1419 184.52)` | Icy Life | black, 16.7 to 1 |
| 4 | `#56ffd0` | `oklch(90.15% 0.1534 170.78)` | Rare Wind | black, 16.6 to 1 |
| 5 | `#49ffbb` | `oklch(89.37% 0.1730 163.39)` | Greenish Cyan | black, 16.3 to 1 |

## CSS

```css
background: linear-gradient(315deg, #38e4ff 0.0%, #43fdff 25.0%, #50feeb 50.0%, #56ffd0 75.0%, #49ffbb 100.0%);
background: linear-gradient(315deg in oklch, oklch(84.65% 0.1364 210.94) 0.0%, oklch(90.55% 0.1419 196.14) 25.0%, oklch(90.55% 0.1419 184.52) 50.0%, oklch(90.15% 0.1534 170.78) 75.0%, oklch(89.37% 0.1730 163.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.846 | 0.136 | 210.9 |
| 2 | 0.906 | 0.142 | 196.1 |
| 3 | 0.906 | 0.142 | 184.5 |
| 4 | 0.902 | 0.157 | 170.8 |
| 5 | 0.894 | 0.178 | 163.4 |

## In these collections

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

## Other forms

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