# Teal emerald palette

The Teal emerald palette brings together green, teal, and dark blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is green.

- Also called: Green and black linear swatches
- Seed: `kUfkt1MxtAygSQueDcRA`
- Page: https://grabient.com/kUfkt1MxtAygSQueDcRA?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: vivid, dark, 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 | `#067453` | `oklch(49.61% 0.1033 164.53)` | Green Velvet | white, 5.7 to 1 |
| 2 | `#0b5d47` | `oklch(42.69% 0.0820 168.64)` | Evergreen | white, 7.8 to 1 |
| 3 | `#06473f` | `oklch(35.73% 0.0610 182.76)` | Tropical Forest | white, 10.6 to 1 |
| 4 | `#073237` | `oklch(29.29% 0.0453 206.59)` | Artist Blue | white, 13.7 to 1 |
| 5 | `#0a212d` | `oklch(23.62% 0.0372 234.28)` | The Count’s Black | white, 16.5 to 1 |

## CSS

```css
background: linear-gradient(180deg, #067453 0.000% 20.000%, #0b5d47 20.000% 40.000%, #06473f 40.000% 60.000%, #073237 60.000% 80.000%, #0a212d 80.000% 100.000%);
background: linear-gradient(180deg, oklch(49.61% 0.1033 164.53) 0.000% 20.000%, oklch(42.69% 0.0820 168.64) 20.000% 40.000%, oklch(35.73% 0.0610 182.76) 40.000% 60.000%, oklch(29.29% 0.0453 206.59) 60.000% 80.000%, oklch(23.62% 0.0372 234.28) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.496 | 0.103 | 164.5 |
| 2 | 0.402 | 0.074 | 171.9 |
| 3 | 0.315 | 0.05 | 197.3 |
| 4 | 0.236 | 0.037 | 234.3 |

## In these collections

- [Emerald color palette](https://grabient.com/emerald-color-palette)

## Other forms

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