# Teal and emerald color palette

The Teal and emerald color palette brings together blue, teal, and green. The colors span a narrow lightness range, combining strong color with gentle contrast. Its light and open character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is green.

- Also called: Vivid analogous blue, cyan and green linear gradient
- Seed: `kWs2um4jE-G62O7xwb3bkk-4`
- Page: https://grabient.com/kWs2um4jE-G62O7xwb3bkk-4?steps=5
- Drawn as: linear gradient, 5 steps, 90 degrees
- Kinds: vivid, light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 1.9 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 | `#02aded` | `oklch(70.47% 0.1474 234.14)` | Democrat | black, 8.2 to 1 |
| 2 | `#1cc9ee` | `oklch(77.17% 0.1350 218.29)` | Picnic Day Sky | black, 10.5 to 1 |
| 3 | `#2ef4dc` | `oklch(87.01% 0.1488 182.36)` | Bright Aqua | black, 15 to 1 |
| 4 | `#47ffbe` | `oklch(89.37% 0.1721 164.40)` | Greenish Cyan | black, 16.3 to 1 |
| 5 | `#2df999` | `oklch(86.61% 0.2012 155.94)` | Atomic Spring | black, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #02aded 0.0%, #1cc9ee 25.0%, #2ef4dc 50.0%, #47ffbe 75.0%, #2df999 100.0%);
background: linear-gradient(90deg in oklch, oklch(70.47% 0.1474 234.14) 0.0%, oklch(77.17% 0.1350 218.29) 25.0%, oklch(87.01% 0.1488 182.36) 50.0%, oklch(89.37% 0.1721 164.40) 75.0%, oklch(86.61% 0.2012 155.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.147 | 234.1 |
| 2 | 0.772 | 0.135 | 218.3 |
| 3 | 0.87 | 0.149 | 182.4 |
| 4 | 0.894 | 0.181 | 164.4 |
| 5 | 0.866 | 0.201 | 155.9 |

## In these collections

- [Bright gradients](https://grabient.com/bright-gradients)
- [Summer gradients](https://grabient.com/summer-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)

## Other forms

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