# Orange, lime and champagne color palette

The Orange, lime and champagne color palette brings together orange, teal, green, magenta, and pale yellow. The colors span a narrow lightness range, combining strong color with gentle contrast. Its light and open character suits game interface concepts and stream graphics. Its darkest tone is magenta, and its lightest tone is pale yellow.

- Also called: Orange, green, pink and beige angular swatches
- Seed: `kWv6Am4j3P2dIuRZU6495ZNg`
- Page: https://grabient.com/kWv6Am4j3P2dIuRZU6495ZNg?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#ff8c2f` | `oklch(75.20% 0.1705 54.14)` | Instant Orange | black, 9 to 1 |
| 2 | `#00d0c5` | `oklch(77.17% 0.1340 188.35)` | Blue Martina | black, 10.7 to 1 |
| 3 | `#94d935` | `oklch(81.10% 0.1998 130.23)` | Effervescent Lime | black, 12.2 to 1 |
| 4 | `#f554ca` | `oklch(70.08% 0.2301 340.17)` | Kinky Pinky | black, 7 to 1 |
| 5 | `#f8ecbe` | `oklch(94.09% 0.0606 95.35)` | Candle in the Wind | black, 17.7 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #ff8c2f 0.000% 20.000%, #00d0c5 20.000% 40.000%, #94d935 40.000% 60.000%, #f554ca 60.000% 80.000%, #f8ecbe 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(75.20% 0.1705 54.14) 0.000% 20.000%, oklch(77.17% 0.1340 188.35) 20.000% 40.000%, oklch(81.10% 0.1998 130.23) 40.000% 60.000%, oklch(70.08% 0.2301 340.17) 60.000% 80.000%, oklch(94.09% 0.0606 95.35) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.752 | 0.22 | 54.1 |
| 2 | 0.772 | 0.169 | 188.3 |
| 3 | 0.811 | 0.2 | 130.2 |
| 4 | 0.701 | 0.23 | -19.8 |
| 5 | 0.941 | 0.061 | 95.4 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Bright swatches](https://grabient.com/bright-swatches)

## Other forms

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