# Teal color palette

The Teal color palette brings together blue, teal, light green, and light teal. 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 darkest tone is blue, and its lightest tone is light green.

- Also called: Analogous blue, teal and light blue linear gradient
- Seed: `kWo3evWSq82MnutpJ745p1CI`
- Page: https://grabient.com/kWo3evWSq82MnutpJ745p1CI?steps=5
- Drawn as: linear gradient, 5 steps, 90 degrees
- Kinds: pastel, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 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 | `#0693e9` | `oklch(64.17% 0.1640 246.09)` | Pervenche | black, 6.3 to 1 |
| 2 | `#2cafd0` | `oklch(70.08% 0.1171 219.67)` | Aquarius | black, 8.1 to 1 |
| 3 | `#5fceb5` | `oklch(77.95% 0.1089 176.35)` | Simply Aqua | black, 10.9 to 1 |
| 4 | `#81ddb0` | `oklch(82.68% 0.1089 161.55)` | Jovial Jade | black, 12.8 to 1 |
| 5 | `#84d1c2` | `oklch(80.71% 0.0799 180.58)` | Blue Frosting | black, 11.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0693e9 0.0%, #2cafd0 25.0%, #5fceb5 50.0%, #81ddb0 75.0%, #84d1c2 100.0%);
background: linear-gradient(90deg in oklch, oklch(64.17% 0.1640 246.09) 0.0%, oklch(70.08% 0.1171 219.67) 25.0%, oklch(77.95% 0.1089 176.35) 50.0%, oklch(82.68% 0.1089 161.55) 75.0%, oklch(80.71% 0.0799 180.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.642 | 0.164 | 246.1 |
| 2 | 0.701 | 0.117 | 219.7 |
| 3 | 0.78 | 0.109 | 176.3 |
| 4 | 0.827 | 0.109 | 161.6 |
| 5 | 0.807 | 0.08 | 180.6 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Mint color palette](https://grabient.com/mint-color-palette)
- [Beach gradients](https://grabient.com/beach-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)

## Other forms

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