# Teal and near-black color palette

The Teal and near-black color palette brings together off-white, teal, dark teal, and dark blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous light blue, teal and black angular swatches
- Seed: `kW7w2APhs_7GgwQlHUGlZnEo`
- Page: https://grabient.com/kW7w2APhs_7GgwQlHUGlZnEo?style=angularSwatches&steps=5&angle=200
- Drawn as: angular swatches, 5 steps, 200 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.1 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 | `#dff0ec` | `oklch(94.09% 0.0179 180.00)` | Drifting Tide | black, 17.7 to 1 |
| 2 | `#246e61` | `oklch(48.82% 0.0744 180.00)` | Antique Green | white, 6 to 1 |
| 3 | `#00504d` | `oklch(38.98% 0.0674 189.51)` | Action Green | white, 9.2 to 1 |
| 4 | `#003337` | `oklch(29.14% 0.0497 204.35)` | Artist Blue | white, 13.7 to 1 |
| 5 | `#001120` | `oklch(16.96% 0.0428 245.11)` | Kuretake Black Manga | white, 19.1 to 1 |

## CSS

```css
background: conic-gradient(from 200deg, #dff0ec 0.000% 20.000%, #246e61 20.000% 40.000%, #00504d 40.000% 60.000%, #003337 60.000% 80.000%, #001120 80.000% 100.000%);
background: conic-gradient(from 200deg, oklch(94.09% 0.0179 180.00) 0.000% 20.000%, oklch(48.82% 0.0744 180.00) 20.000% 40.000%, oklch(38.98% 0.0674 189.51) 40.000% 60.000%, oklch(29.14% 0.0497 204.35) 60.000% 80.000%, oklch(16.96% 0.0428 245.11) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.941 | 0.018 | 180 |
| 2 | 0.488 | 0.074 | 180 |
| 3 | 0.39 | 0.09 | 189.5 |
| 4 | 0.291 | 0.08 | 204.3 |
| 5 | 0.169 | 0.07 | 244.5 |

## In these collections

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

## Other forms

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