# Cream Chartreuse Cocoa Bands

These linear swatch bands move from cream and pale chartreuse through olive into cocoa brown and dark chocolate. The saved diagonal arrangement gives the lighter greens generous space while the two brown bands provide a grounded finish. It suits food packaging, editorial graphics, presentation themes, and interface accents that need a fresh green highlight beside warm neutrals.

- Also called: Gray, light green, brown and black linear swatches
- Seed: `kW7RdA8THDNm2QCzl7hHgo-I`
- Page: https://grabient.com/kW7RdA8THDNm2QCzl7hHgo-I?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: light to dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#f1e9d2` | `oklch(93.31% 0.0317 90.70)` | Country Dairy | black, 17.2 to 1 |
| 2 | `#d2e77a` | `oklch(88.98% 0.1364 118.18)` | Sulu | black, 15.4 to 1 |
| 3 | `#94ad30` | `oklch(70.47% 0.1488 120.29)` | Googolplex | black, 8.2 to 1 |
| 4 | `#643f25` | `oklch(40.55% 0.0648 55.83)` | Irish Coffee | white, 9.1 to 1 |
| 5 | `#2a1a14` | `oklch(23.62% 0.0276 41.04)` | Tetsu-Guro Black | white, 16.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f1e9d2 0.000% 20.000%, #d2e77a 20.000% 40.000%, #94ad30 40.000% 60.000%, #643f25 60.000% 80.000%, #2a1a14 80.000% 100.000%);
background: linear-gradient(45deg, oklch(93.31% 0.0317 90.70) 0.000% 20.000%, oklch(88.98% 0.1364 118.18) 20.000% 40.000%, oklch(70.47% 0.1488 120.29) 40.000% 60.000%, oklch(40.55% 0.0648 55.83) 60.000% 80.000%, oklch(23.62% 0.0276 41.04) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.933 | 0.032 | 90.7 |
| 2 | 0.89 | 0.136 | 118.2 |
| 3 | 0.705 | 0.149 | 120.3 |
| 4 | 0.406 | 0.065 | 55.8 |
| 5 | 0.236 | 0.028 | 41 |

## In these collections

- [Chocolate and chartreuse](https://grabient.com/chocolate-and-chartreuse)

## Other forms

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