# Moss and teal green and gold palette

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

- Also called: Vivid analogous tan and green angular swatches
- Seed: `kU3lVE2au-j4hyHPtEAg`
- Page: https://grabient.com/kU3lVE2au-j4hyHPtEAg?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: dark center, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.1 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 | `#ecd678` | `oklch(87.40% 0.1171 96.33)` | Sport Yellow | black, 14.4 to 1 |
| 2 | `#c2993c` | `oklch(70.47% 0.1199 84.70)` | Crispy Gold | black, 7.9 to 1 |
| 3 | `#2a6f4a` | `oklch(48.82% 0.0923 156.56)` | Precious Emerald | white, 6 to 1 |
| 4 | `#08a167` | `oklch(62.60% 0.1433 158.68)` | Emerald Light Green | black, 6.3 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #ecd678 0.000% 25.000%, #c2993c 25.000% 50.000%, #2a6f4a 50.000% 75.000%, #08a167 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(87.40% 0.1171 96.33) 0.000% 25.000%, oklch(70.47% 0.1199 84.70) 25.000% 50.000%, oklch(48.82% 0.0923 156.56) 50.000% 75.000%, oklch(62.60% 0.1433 158.68) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.117 | 96.3 |
| 2 | 0.705 | 0.12 | 84.7 |
| 3 | 0.488 | 0.092 | 156.6 |
| 4 | 0.626 | 0.143 | 158.7 |

## In these collections

- [Green and gold](https://grabient.com/green-and-gold)

## Other forms

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