# Cream and moss color palette

The Cream and moss color palette brings together off-white, pale yellow, gold, yellow, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its light and open character suits presentation backgrounds and section dividers. Its darkest tone is yellow, and its lightest tone is off-white.

- Also called: Analogous white, beige, gray and olive linear swatches
- Seed: `kW-whLepI---XwBEC0F36xBA`
- Page: https://grabient.com/kW-whLepI---XwBEC0F36xBA?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: pastel, light
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.9 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 | `#fcfcf3` | `oklch(98.82% 0.0110 105.47)` | White Desert | black, 20.3 to 1 |
| 2 | `#fcf4cf` | `oklch(96.46% 0.0496 97.01)` | Effervescent | black, 19 to 1 |
| 3 | `#e2d8a7` | `oklch(87.80% 0.0648 98.07)` | Buckwheat Groats | black, 14.6 to 1 |
| 4 | `#6e6f5b` | `oklch(53.54% 0.0303 110.75)` | Lazy Lichen | white, 5.1 to 1 |
| 5 | `#a4ba5d` | `oklch(75.20% 0.1213 120.26)` | Chinese Money Plant | black, 9.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fcfcf3 0.000% 20.000%, #fcf4cf 20.000% 40.000%, #e2d8a7 40.000% 60.000%, #6e6f5b 60.000% 80.000%, #a4ba5d 80.000% 100.000%);
background: linear-gradient(90deg, oklch(98.82% 0.0110 105.47) 0.000% 20.000%, oklch(96.46% 0.0496 97.01) 20.000% 40.000%, oklch(87.80% 0.0648 98.07) 40.000% 60.000%, oklch(53.54% 0.0303 110.75) 60.000% 80.000%, oklch(75.20% 0.1213 120.26) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.988 | 0.011 | 105.5 |
| 2 | 0.965 | 0.05 | 97 |
| 3 | 0.878 | 0.065 | 98.1 |
| 4 | 0.535 | 0.03 | 110.8 |
| 5 | 0.752 | 0.121 | 120.3 |

## In these collections

- [Light mode color palette](https://grabient.com/light-mode-color-palette)
- [Presentation swatches](https://grabient.com/presentation-swatches)

## Other forms

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