# Teal and Orange: Deep cyan and stone

The "Teal and Orange: Deep cyan and stone" palette brings together blue, teal, light gray, 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 blue, and its lightest tone is light gray.

- Also called: Complementary blue, gray and brown linear swatches
- Seed: `kYZzCnwxi8VgXv_qh7aWK82cQyv-`
- Page: https://grabient.com/kYZzCnwxi8VgXv_qh7aWK82cQyv-?style=linearSwatches&steps=6&angle=270
- Drawn as: linear swatches, 6 steps, 270 degrees
- Kinds: light center, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#204f68` | `oklch(40.55% 0.0661 235.55)` | Seafarer | white, 8.8 to 1 |
| 2 | `#34767e` | `oklch(52.76% 0.0675 204.90)` | Diver’s Eden | white, 5.1 to 1 |
| 3 | `#6aa8af` | `oklch(69.29% 0.0648 204.90)` | Timid Sea | black, 7.8 to 1 |
| 4 | `#c7cdbe` | `oklch(83.86% 0.0207 125.64)` | Lamb’s Ears | black, 12.8 to 1 |
| 5 | `#df8155` | `oklch(69.69% 0.1295 45.33)` | Show Business | black, 7.4 to 1 |
| 6 | `#ac4d18` | `oklch(53.54% 0.1392 45.33)` | Funky Monkey | white, 5.4 to 1 |

## CSS

```css
background: linear-gradient(270deg, #204f68 0.000% 16.667%, #34767e 16.667% 33.333%, #6aa8af 33.333% 50.000%, #c7cdbe 50.000% 66.667%, #df8155 66.667% 83.333%, #ac4d18 83.333% 100.000%);
background: linear-gradient(270deg, oklch(40.55% 0.0661 235.55) 0.000% 16.667%, oklch(52.76% 0.0675 204.90) 16.667% 33.333%, oklch(69.29% 0.0648 204.90) 33.333% 50.000%, oklch(83.86% 0.0207 125.64) 50.000% 66.667%, oklch(69.69% 0.1295 45.33) 66.667% 83.333%, oklch(53.54% 0.1392 45.33) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.406 | 0.066 | 235.5 |
| 2 | 0.528 | 0.068 | 204.9 |
| 3 | 0.693 | 0.065 | 204.9 |
| 4 | 0.839 | 0.021 | 125.6 |
| 5 | 0.697 | 0.13 | 45.3 |
| 6 | 0.535 | 0.139 | 45.3 |

## In these collections

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

## Other forms

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