# Teal color palette

The Teal color palette brings together teal. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its lightest and darkest tones both fall within the teal color family.

- Also called: Analogous teal to blue linear gradient
- Seed: `kUajWXQyE_04pQTVsMDA`
- Page: https://grabient.com/kUajWXQyE_04pQTVsMDA?steps=5&angle=135
- Drawn as: linear gradient, 5 steps, 135 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.8 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 | `#005664` | `oklch(41.74% 0.0728 212.37)` | Abyssal Waters | white, 8.3 to 1 |
| 2 | `#03707e` | `oklch(49.91% 0.0858 210.76)` | Iridescent Peacock | white, 5.8 to 1 |
| 3 | `#01879f` | `oklch(57.41% 0.1018 216.04)` | Eastern Blue | black, 4.9 to 1 |
| 4 | `#0198bf` | `oklch(63.23% 0.1187 224.10)` | Atomic Blue | black, 6.2 to 1 |
| 5 | `#00a4d7` | `oklch(67.32% 0.1331 229.26)` | Malibu Blue | black, 7.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #005664 0.0%, #03707e 25.0%, #01879f 50.0%, #0198bf 75.0%, #00a4d7 100.0%);
background: linear-gradient(135deg in oklch, oklch(41.74% 0.0728 212.37) 0.0%, oklch(49.91% 0.0858 210.76) 25.0%, oklch(57.41% 0.1018 216.04) 50.0%, oklch(63.23% 0.1187 224.10) 75.0%, oklch(67.32% 0.1331 229.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.417 | 0.073 | 212.3 |
| 2 | 0.528 | 0.091 | 211.3 |
| 3 | 0.614 | 0.113 | 221.9 |
| 4 | 0.673 | 0.134 | 229.3 |

## In these collections

- [Teal gradients](https://grabient.com/teal-gradients)
- [Text gradients](https://grabient.com/text-gradients)
- [Cyan gradients](https://grabient.com/cyan-gradients)

## Other forms

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