# Aqua and sage teal and orange palette

The Aqua and sage teal and orange palette brings together light teal, teal, green, and orange. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is light teal.

- Also called: Light blue, teal, brown and orange radial swatches
- Seed: `kY3yeI3SG_MUgwTHDTpz6wz-KxQe`
- Page: https://grabient.com/kY3yeI3SG_MUgwTHDTpz6wz-KxQe?style=radialSwatches&steps=6&angle=315
- Drawn as: radial swatches, 6 steps, 315 degrees
- Kinds: dark center, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 3.3 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 | `#aee3e0` | `oklch(87.80% 0.0537 191.95)` | Timeless Seafoam | black, 14.8 to 1 |
| 2 | `#5cbbb1` | `oklch(73.23% 0.0923 185.61)` | Hygiene Green | black, 9.2 to 1 |
| 3 | `#0f7f81` | `oklch(54.33% 0.0896 196.18)` | Teal | white, 4.7 to 1 |
| 4 | `#667a69` | `oklch(55.91% 0.0358 149.68)` | Sage Green Grey | white, 4.5 to 1 |
| 5 | `#c26f41` | `oklch(62.60% 0.1213 48.23)` | Screaming Bell Metal | black, 5.6 to 1 |
| 6 | `#f1a34f` | `oklch(77.56% 0.1350 65.14)` | Troll Slayer Orange | black, 10 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #aee3e0 0.000% 16.667%, #5cbbb1 16.667% 33.333%, #0f7f81 33.333% 50.000%, #667a69 50.000% 66.667%, #c26f41 66.667% 83.333%, #f1a34f 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(87.80% 0.0537 191.95) 0.000% 16.667%, oklch(73.23% 0.0923 185.61) 16.667% 33.333%, oklch(54.33% 0.0896 196.18) 33.333% 50.000%, oklch(55.91% 0.0358 149.68) 50.000% 66.667%, oklch(62.60% 0.1213 48.23) 66.667% 83.333%, oklch(77.56% 0.1350 65.14) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.878 | 0.054 | 192 |
| 2 | 0.732 | 0.092 | 185.6 |
| 3 | 0.543 | 0.09 | 196.2 |
| 4 | 0.559 | 0.036 | 149.7 |
| 5 | 0.626 | 0.121 | 48.2 |
| 6 | 0.776 | 0.135 | 65.1 |

## In these collections

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

## Other forms

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