# Champagne teal and orange palette

The Champagne teal and orange palette brings together light teal, pale yellow, and light orange. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is light orange, and its lightest tone is pale yellow.

- Also called: Light blue, off-white and peach linear swatches
- Seed: `kWyzWHcRC_HcKNdsm7t4Ce-Y`
- Page: https://grabient.com/kWyzWHcRC_HcKNdsm7t4Ce-Y?style=linearSwatches&steps=5&angle=270
- Drawn as: linear swatches, 5 steps, 270 degrees
- Kinds: pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 1.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 | `#84cdc8` | `oklch(79.92% 0.0730 189.84)` | Surf Wash | black, 11.5 to 1 |
| 2 | `#bbe5dd` | `oklch(88.98% 0.0455 182.45)` | Soothing Sea | black, 15.3 to 1 |
| 3 | `#efebd6` | `oklch(93.70% 0.0276 96.85)` | Olive Tint | black, 17.4 to 1 |
| 4 | `#f5c49e` | `oklch(85.43% 0.0758 58.81)` | Shrimp Toast | black, 13.2 to 1 |
| 5 | `#e99a74` | `oklch(75.59% 0.1089 46.13)` | Light Amber Orange | black, 9.3 to 1 |

## CSS

```css
background: linear-gradient(270deg, #84cdc8 0.000% 20.000%, #bbe5dd 20.000% 40.000%, #efebd6 40.000% 60.000%, #f5c49e 60.000% 80.000%, #e99a74 80.000% 100.000%);
background: linear-gradient(270deg, oklch(79.92% 0.0730 189.84) 0.000% 20.000%, oklch(88.98% 0.0455 182.45) 20.000% 40.000%, oklch(93.70% 0.0276 96.85) 40.000% 60.000%, oklch(85.43% 0.0758 58.81) 60.000% 80.000%, oklch(75.59% 0.1089 46.13) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.073 | 189.8 |
| 2 | 0.89 | 0.045 | 182.4 |
| 3 | 0.937 | 0.028 | 96.8 |
| 4 | 0.854 | 0.076 | 58.8 |
| 5 | 0.756 | 0.109 | 46.1 |

## In these collections

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

## Other forms

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