# Teal color palette

The Teal color palette brings together dark blue, teal, and light green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is light green.

- Also called: Analogous navy, teal and light blue linear gradient
- Seed: `kWRR-muJm7VKlvljp7955I_A`
- Page: https://grabient.com/kWRR-muJm7VKlvljp7955I_A?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.5 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 | `#0e2a39` | `oklch(27.17% 0.0427 234.14)` | Oceanic Noir | white, 14.8 to 1 |
| 2 | `#0e5358` | `oklch(40.54% 0.0640 201.86)` | Seaworld | white, 8.7 to 1 |
| 3 | `#21897f` | `oklch(57.13% 0.0918 184.90)` | Palm Springs Splash | black, 4.9 to 1 |
| 4 | `#40b9a4` | `oklch(71.32% 0.1106 179.08)` | Capture | black, 8.6 to 1 |
| 5 | `#6fd2ba` | `oklch(79.68% 0.1002 175.68)` | Downy | black, 11.6 to 1 |
| 6 | `#a4cdbd` | `oklch(81.50% 0.0496 169.68)` | Tareyton | black, 12 to 1 |

## CSS

```css
background: linear-gradient(180deg, #0e2a39 0.0%, #0e5358 20.0%, #21897f 40.0%, #40b9a4 60.0%, #6fd2ba 80.0%, #a4cdbd 100.0%);
background: linear-gradient(180deg in oklch, oklch(27.17% 0.0427 234.14) 0.0%, oklch(40.54% 0.0640 201.86) 20.0%, oklch(57.13% 0.0918 184.90) 40.0%, oklch(71.32% 0.1106 179.08) 60.0%, oklch(79.68% 0.1002 175.68) 80.0%, oklch(81.50% 0.0496 169.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.272 | 0.043 | 234.1 |
| 2 | 0.445 | 0.07 | 195 |
| 3 | 0.65 | 0.103 | 181.3 |
| 4 | 0.783 | 0.109 | 177.1 |
| 5 | 0.815 | 0.05 | 169.7 |

## In these collections

- [Beach swatches](https://grabient.com/beach-swatches)
- [Calm swatches](https://grabient.com/calm-swatches)
- [Coastal swatches](https://grabient.com/coastal-swatches)

## Other forms

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