# Teal and near-black color palette

The Teal and near-black color palette brings together teal and dark teal. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark teal, and its lightest tone is teal.

- Also called: Analogous teal, dark green and black linear swatches
- Seed: `kWnW13uq9AqokwMcF8DEIzAw`
- Page: https://grabient.com/kWnW13uq9AqokwMcF8DEIzAw?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, dark, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5.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 | `#009d77` | `oklch(61.81% 0.1251 168.04)` | Holly Green | black, 6 to 1 |
| 2 | `#006855` | `oklch(46.07% 0.0873 174.37)` | Piney Lake | white, 6.7 to 1 |
| 3 | `#003f38` | `oklch(33.08% 0.0593 181.76)` | Botanical Night | white, 11.8 to 1 |
| 4 | `#00201e` | `oklch(22.07% 0.0382 189.15)` | Stellar Explorer | white, 17 to 1 |
| 5 | `#000a0a` | `oklch(13.04% 0.0222 196.76)` | Black Knight | white, 20 to 1 |

## CSS

```css
background: linear-gradient(90deg, #009d77 0.000% 20.000%, #006855 20.000% 40.000%, #003f38 40.000% 60.000%, #00201e 60.000% 80.000%, #000a0a 80.000% 100.000%);
background: linear-gradient(90deg, oklch(61.81% 0.1251 168.04) 0.000% 20.000%, oklch(46.07% 0.0873 174.37) 20.000% 40.000%, oklch(33.08% 0.0593 181.76) 40.000% 60.000%, oklch(22.07% 0.0382 189.15) 60.000% 80.000%, oklch(13.04% 0.0222 196.76) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.618 | 0.15 | 168 |
| 2 | 0.461 | 0.13 | 174.4 |
| 3 | 0.331 | 0.101 | 181.8 |
| 4 | 0.22 | 0.065 | 189.2 |
| 5 | 0.13 | 0.034 | 196.6 |

## In these collections

- [Teal swatches](https://grabient.com/teal-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)
- [Green swatches](https://grabient.com/green-swatches)

## Other forms

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