# Teal and Orange: Deep cyan and sage

The "Teal and Orange: Deep cyan and sage" palette brings together dark blue, dark teal, teal, and orange. The colors span a moderate 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 blue, and its lightest tone is orange.

- Also called: Black, teal, brown and orange linear swatches
- Seed: `kYNhehJhS-rIPPk0lyzQbU_065wG`
- Page: https://grabient.com/kYNhehJhS-rIPPk0lyzQbU_065wG?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.4 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 | `#071c24` | `oklch(21.26% 0.0317 226.41)` | Black Stallion | white, 17.5 to 1 |
| 2 | `#00343f` | `oklch(29.93% 0.0531 215.92)` | Artist Blue | white, 13.4 to 1 |
| 3 | `#294d4f` | `oklch(39.37% 0.0413 202.10)` | Seagrass Green | white, 9.2 to 1 |
| 4 | `#693f30` | `oklch(41.34% 0.0634 40.42)` | Roasted Coffee | white, 8.9 to 1 |
| 5 | `#aa421a` | `oklch(51.57% 0.1461 39.36)` | Donkey Kong | white, 5.9 to 1 |
| 6 | `#d15f28` | `oklch(61.81% 0.1585 43.59)` | Harvest Pumpkin | black, 5.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #071c24 0.000% 16.667%, #00343f 16.667% 33.333%, #294d4f 33.333% 50.000%, #693f30 50.000% 66.667%, #aa421a 66.667% 83.333%, #d15f28 83.333% 100.000%);
background: linear-gradient(180deg, oklch(21.26% 0.0317 226.41) 0.000% 16.667%, oklch(29.93% 0.0531 215.92) 16.667% 33.333%, oklch(39.37% 0.0413 202.10) 33.333% 50.000%, oklch(41.34% 0.0634 40.42) 50.000% 66.667%, oklch(51.57% 0.1461 39.36) 66.667% 83.333%, oklch(61.81% 0.1585 43.59) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.032 | 226.4 |
| 2 | 0.299 | 0.056 | 215.8 |
| 3 | 0.394 | 0.041 | 202.1 |
| 4 | 0.413 | 0.063 | 40.4 |
| 5 | 0.516 | 0.146 | 39.4 |
| 6 | 0.618 | 0.158 | 43.6 |

## In these collections

- [Teal and orange](https://grabient.com/teal-and-orange)

## Other forms

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