# Champagne, sage and deep cyan modern palette

The Champagne, sage and deep cyan modern palette brings together pale orange, light orange, and teal. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is pale orange.

- Also called: Gray and teal radial swatches
- Seed: `kU6hU8Y41AMcRzC0j8Hg`
- Page: https://grabient.com/kU6hU8Y41AMcRzC0j8Hg?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: light to dark, neutral
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#eee4d0` | `oklch(92.13% 0.0289 84.38)` | Tawny Daylily | black, 16.6 to 1 |
| 2 | `#c3b79f` | `oklch(78.35% 0.0358 86.49)` | Wagon Wheel | black, 10.6 to 1 |
| 3 | `#527e7a` | `oklch(55.91% 0.0482 190.05)` | Nickel Ore Green | black, 4.6 to 1 |
| 4 | `#2e5257` | `oklch(41.34% 0.0427 206.96)` | Sea of Atlantis | white, 8.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #eee4d0 0.000% 25.000%, #c3b79f 25.000% 50.000%, #527e7a 50.000% 75.000%, #2e5257 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(92.13% 0.0289 84.38) 0.000% 25.000%, oklch(78.35% 0.0358 86.49) 25.000% 50.000%, oklch(55.91% 0.0482 190.05) 50.000% 75.000%, oklch(41.34% 0.0427 206.96) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.921 | 0.029 | 84.4 |
| 2 | 0.783 | 0.036 | 86.5 |
| 3 | 0.559 | 0.048 | 190.1 |
| 4 | 0.413 | 0.043 | 207 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)

## Other forms

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