# Teal and Orange: Sage and deep cyan

The "Teal and Orange: Sage and deep cyan" palette brings together orange, light orange, and teal. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is light orange.

- Also called: Orange, beige, teal and navy radial swatches
- Seed: `kYs4cfZ63AmkPwtQGE2PR_BSqTQc`
- Page: https://grabient.com/kYs4cfZ63AmkPwtQGE2PR_BSqTQc?style=radialSwatches&steps=6
- Drawn as: radial swatches, 6 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.8 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 | `#fb702b` | `oklch(70.47% 0.1860 43.59)` | Burning Orange | black, 7.4 to 1 |
| 2 | `#ffac7f` | `oklch(81.49% 0.1147 48.88)` | Larch Bolete | black, 11.4 to 1 |
| 3 | `#d8c3a8` | `oklch(82.68% 0.0427 73.18)` | Biscotti | black, 12.2 to 1 |
| 4 | `#579691` | `oklch(62.99% 0.0661 188.37)` | Martian Cerulean | black, 6.1 to 1 |
| 5 | `#006b70` | `oklch(48.04% 0.0817 200.00)` | Deep Lake | white, 6.2 to 1 |
| 6 | `#0d3d48` | `oklch(33.46% 0.0524 215.84)` | Ghostlands Coal | white, 11.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #fb702b 0.000% 16.667%, #ffac7f 16.667% 33.333%, #d8c3a8 33.333% 50.000%, #579691 50.000% 66.667%, #006b70 66.667% 83.333%, #0d3d48 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(70.47% 0.1860 43.59) 0.000% 16.667%, oklch(81.49% 0.1147 48.88) 16.667% 33.333%, oklch(82.68% 0.0427 73.18) 33.333% 50.000%, oklch(62.99% 0.0661 188.37) 50.000% 66.667%, oklch(48.04% 0.0817 200.00) 66.667% 83.333%, oklch(33.46% 0.0524 215.84) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.186 | 43.6 |
| 2 | 0.815 | 0.125 | 48.9 |
| 3 | 0.827 | 0.043 | 73.2 |
| 4 | 0.63 | 0.066 | 188.4 |
| 5 | 0.48 | 0.087 | 200 |
| 6 | 0.335 | 0.052 | 215.8 |

## In these collections

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

## Other forms

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