# Champagne and lime yellow palette

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

- Also called: Analogous beige to green linear gradient
- Seed: `kS7CBIbKnBuM9wK`
- Page: https://grabient.com/kS7CBIbKnBuM9wK?steps=5&angle=45
- Drawn as: linear gradient, 5 steps, 45 degrees
- Kinds: light
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.5 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 | `#ede9c8` | `oklch(92.91% 0.0441 101.25)` | Ethereal Green | black, 17.1 to 1 |
| 2 | `#e1e1a7` | `oklch(89.64% 0.0758 108.25)` | Cocktail Onion | black, 15.5 to 1 |
| 3 | `#cbd980` | `oklch(85.43% 0.1144 116.04)` | Goody Gumdrop | black, 13.7 to 1 |
| 4 | `#b5cf5a` | `oklch(81.23% 0.1463 120.14)` | Juicy Lime | black, 12 to 1 |
| 5 | `#a5c837` | `oklch(77.95% 0.1695 122.39)` | Android Green | black, 10.8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #ede9c8 0.0%, #e1e1a7 25.0%, #cbd980 50.0%, #b5cf5a 75.0%, #a5c837 100.0%);
background: linear-gradient(45deg in oklch, oklch(92.91% 0.0441 101.25) 0.0%, oklch(89.64% 0.0758 108.25) 25.0%, oklch(85.43% 0.1144 116.04) 50.0%, oklch(81.23% 0.1463 120.14) 75.0%, oklch(77.95% 0.1695 122.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.929 | 0.044 | 101.3 |
| 2 | 0.854 | 0.114 | 116 |
| 3 | 0.78 | 0.169 | 122.4 |

## In these collections

- [Yellow gradients](https://grabient.com/yellow-gradients)

## Other forms

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