# Teal and Orange: Pale aqua and tan

The "Teal and Orange: Pale aqua and tan" palette brings together pale teal, light teal, teal, orange, and red. 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 red, and its lightest tone is pale teal.

- Also called: Duotone light blue and brown linear swatches
- Seed: `kY6ROEaRdAVoSvvXILCRiu-7Uhv0`
- Page: https://grabient.com/kY6ROEaRdAVoSvvXILCRiu-7Uhv0?style=linearSwatches&steps=6&angle=270
- Drawn as: linear swatches, 6 steps, 270 degrees
- Kinds: light to dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 7 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 | `#d1eae6` | `oklch(91.73% 0.0262 185.62)` | Foam | black, 16.6 to 1 |
| 2 | `#96d4ce` | `oklch(82.68% 0.0634 188.80)` | Summer Soft Blue | black, 12.6 to 1 |
| 3 | `#7eaca2` | `oklch(70.87% 0.0510 180.34)` | Green Room | black, 8.3 to 1 |
| 4 | `#c78a67` | `oklch(68.50% 0.0896 50.36)` | Copper Hide | black, 7.2 to 1 |
| 5 | `#ab5735` | `oklch(55.12% 0.1199 41.91)` | Flat Earth | white, 5 to 1 |
| 6 | `#763826` | `oklch(41.73% 0.0923 36.62)` | Bootstrap Leather | white, 8.9 to 1 |

## CSS

```css
background: linear-gradient(270deg, #d1eae6 0.000% 16.667%, #96d4ce 16.667% 33.333%, #7eaca2 33.333% 50.000%, #c78a67 50.000% 66.667%, #ab5735 66.667% 83.333%, #763826 83.333% 100.000%);
background: linear-gradient(270deg, oklch(91.73% 0.0262 185.62) 0.000% 16.667%, oklch(82.68% 0.0634 188.80) 16.667% 33.333%, oklch(70.87% 0.0510 180.34) 33.333% 50.000%, oklch(68.50% 0.0896 50.36) 50.000% 66.667%, oklch(55.12% 0.1199 41.91) 66.667% 83.333%, oklch(41.73% 0.0923 36.62) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.917 | 0.026 | 185.6 |
| 2 | 0.827 | 0.063 | 188.8 |
| 3 | 0.709 | 0.051 | 180.3 |
| 4 | 0.685 | 0.09 | 50.4 |
| 5 | 0.551 | 0.12 | 41.9 |
| 6 | 0.417 | 0.092 | 36.6 |

## In these collections

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

## Other forms

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