# Teal and near-black analogous palette

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

- Also called: Analogous green, black and blue linear swatches
- Seed: `kUjFF3mYzCqIRQpPKkJg`
- Page: https://grabient.com/kUjFF3mYzCqIRQpPKkJg?style=linearSwatches&steps=4&angle=45
- Drawn as: linear swatches, 4 steps, 45 degrees
- Kinds: dark center, vivid, dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#008665` | `oklch(55.12% 0.1116 168.04)` | Spectral Green | black, 4.6 to 1 |
| 2 | `#001b1a` | `oklch(20.08% 0.0344 191.30)` | Black Stallion | white, 17.9 to 1 |
| 3 | `#002c34` | `oklch(26.77% 0.0469 213.49)` | Black Chasm | white, 14.9 to 1 |
| 4 | `#2c91c2` | `oklch(62.20% 0.1157 234.62)` | Porpita Porpita | black, 5.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #008665 0.000% 25.000%, #001b1a 25.000% 50.000%, #002c34 50.000% 75.000%, #2c91c2 75.000% 100.000%);
background: linear-gradient(45deg, oklch(55.12% 0.1116 168.04) 0.000% 25.000%, oklch(20.08% 0.0344 191.30) 25.000% 50.000%, oklch(26.77% 0.0469 213.49) 50.000% 75.000%, oklch(62.20% 0.1157 234.62) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.112 | 168 |
| 2 | 0.201 | 0.034 | 191.3 |
| 3 | 0.268 | 0.047 | 213.5 |
| 4 | 0.622 | 0.116 | 234.6 |

## In these collections

- [Analogous swatches](https://grabient.com/analogous-swatches)

## Other forms

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