# Cocoa Chartreuse Diagonal Glow

This linear gradient travels diagonally from near-black cocoa through deep chocolate brown and olive into vivid chartreuse. The visible middle route carries mossy green and yellow-green transitions that keep the two-color pairing clear. Its broad dark and bright areas suit bold backgrounds, package panels, editorial covers, and high-contrast interface surfaces.

- Also called: Black, brown, green and yellow linear gradient
- Seed: `kUNBEbKhJAtY3yT0QD9g`
- Page: https://grabient.com/kUNBEbKhJAtY3yT0QD9g?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.3 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 | `#21130f` | `oklch(20.47% 0.0234 37.97)` | Bighorn Sheep | white, 18 to 1 |
| 2 | `#221510` | `oklch(21.10% 0.0246 38.03)` | Used Oil | white, 17.7 to 1 |
| 3 | `#251611` | `oklch(21.78% 0.0257 37.71)` | Used Oil | white, 17.5 to 1 |
| 4 | `#271713` | `oklch(22.55% 0.0268 37.20)` | Used Oil | white, 17.1 to 1 |
| 5 | `#2a1914` | `oklch(23.42% 0.0281 36.66)` | Tetsu-Guro Black | white, 16.8 to 1 |
| 6 | `#2d1b16` | `oklch(24.42% 0.0297 36.29)` | Tetsu-Guro Black | white, 16.3 to 1 |
| 7 | `#311d18` | `oklch(25.59% 0.0318 36.25)` | Scorched | white, 15.8 to 1 |
| 8 | `#35201a` | `oklch(26.93% 0.0345 36.72)` | Scorched | white, 15.2 to 1 |
| 9 | `#3a231c` | `oklch(28.49% 0.0380 37.89)` | Brown Pod | white, 14.5 to 1 |
| 10 | `#41271e` | `oklch(30.27% 0.0423 39.93)` | Polished Mahogany | white, 13.7 to 1 |
| 11 | `#482b20` | `oklch(32.33% 0.0476 43.02)` | Subterranean | white, 12.7 to 1 |
| 12 | `#513120` | `oklch(34.71% 0.0543 47.49)` | Dark Wood Grain | white, 11.6 to 1 |
| 13 | `#5b371f` | `oklch(37.53% 0.0628 53.74)` | Kuro Brown | white, 10.4 to 1 |
| 14 | `#66401c` | `oklch(40.72% 0.0728 61.42)` | Satoimo Brown | white, 9.1 to 1 |
| 15 | `#704a16` | `oklch(44.18% 0.0838 70.10)` | Hairy Brown | white, 7.8 to 1 |
| 16 | `#79560a` | `oklch(47.84% 0.0955 79.36)` | Autumn Leaf Brown | white, 6.6 to 1 |
| 17 | `#806300` | `oklch(51.59% 0.1054 88.75)` | Ground Earth | white, 5.6 to 1 |
| 18 | `#857200` | `oklch(55.34% 0.1144 97.92)` | Sunlit Kelp Green | white, 4.7 to 1 |
| 19 | `#878100` | `oklch(59.01% 0.1261 106.40)` | Drably Olive | black, 5.1 to 1 |
| 20 | `#889001` | `oklch(62.51% 0.1400 113.79)` | Old Asparagus | black, 6 to 1 |
| 21 | `#879e19` | `oklch(65.75% 0.1484 119.65)` | Bruni Green | black, 6.9 to 1 |
| 22 | `#87a928` | `oklch(68.66% 0.1549 123.62)` | Avocado Green | black, 7.7 to 1 |
| 23 | `#8ab433` | `oklch(71.48% 0.1601 125.97)` | Outrageous Green | black, 8.6 to 1 |
| 24 | `#8fbe3c` | `oklch(74.26% 0.1641 127.05)` | Funky Frog | black, 9.5 to 1 |
| 25 | `#97c743` | `oklch(76.99% 0.1673 127.10)` | Aromatic Herbs | black, 10.5 to 1 |
| 26 | `#a1cf48` | `oklch(79.61% 0.1696 126.35)` | Green Lantern | black, 11.5 to 1 |
| 27 | `#abd74c` | `oklch(82.10% 0.1714 125.04)` | Burst of Lime | black, 12.5 to 1 |
| 28 | `#b6de4f` | `oklch(84.42% 0.1727 123.40)` | Conifer | black, 13.5 to 1 |
| 29 | `#c1e452` | `oklch(86.54% 0.1737 121.67)` | Greenivorous | black, 14.4 to 1 |
| 30 | `#cae954` | `oklch(88.42% 0.1745 120.08)` | Lime Fizz | black, 15.3 to 1 |
| 31 | `#d2ee57` | `oklch(90.03% 0.1754 118.87)` | Ultra Moss | black, 16 to 1 |
| 32 | `#d8f259` | `oklch(91.34% 0.1764 118.28)` | Ultra Moss | black, 16.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #21130f 0.0%, #221510 3.2%, #251611 6.5%, #271713 9.7%, #2a1914 12.9%, #2d1b16 16.1%, #311d18 19.4%, #35201a 22.6%, #3a231c 25.8%, #41271e 29.0%, #482b20 32.3%, #513120 35.5%, #5b371f 38.7%, #66401c 41.9%, #704a16 45.2%, #79560a 48.4%, #806300 51.6%, #857200 54.8%, #878100 58.1%, #889001 61.3%, #879e19 64.5%, #87a928 67.7%, #8ab433 71.0%, #8fbe3c 74.2%, #97c743 77.4%, #a1cf48 80.6%, #abd74c 83.9%, #b6de4f 87.1%, #c1e452 90.3%, #cae954 93.5%, #d2ee57 96.8%, #d8f259 100.0%);
background: linear-gradient(45deg in oklch, oklch(20.47% 0.0234 37.97) 0.0%, oklch(21.10% 0.0246 38.03) 3.2%, oklch(21.78% 0.0257 37.71) 6.5%, oklch(22.55% 0.0268 37.20) 9.7%, oklch(23.42% 0.0281 36.66) 12.9%, oklch(24.42% 0.0297 36.29) 16.1%, oklch(25.59% 0.0318 36.25) 19.4%, oklch(26.93% 0.0345 36.72) 22.6%, oklch(28.49% 0.0380 37.89) 25.8%, oklch(30.27% 0.0423 39.93) 29.0%, oklch(32.33% 0.0476 43.02) 32.3%, oklch(34.71% 0.0543 47.49) 35.5%, oklch(37.53% 0.0628 53.74) 38.7%, oklch(40.72% 0.0728 61.42) 41.9%, oklch(44.18% 0.0838 70.10) 45.2%, oklch(47.84% 0.0955 79.36) 48.4%, oklch(51.59% 0.1054 88.75) 51.6%, oklch(55.34% 0.1144 97.92) 54.8%, oklch(59.01% 0.1261 106.40) 58.1%, oklch(62.51% 0.1400 113.79) 61.3%, oklch(65.75% 0.1484 119.65) 64.5%, oklch(68.66% 0.1549 123.62) 67.7%, oklch(71.48% 0.1601 125.97) 71.0%, oklch(74.26% 0.1641 127.05) 74.2%, oklch(76.99% 0.1673 127.10) 77.4%, oklch(79.61% 0.1696 126.35) 80.6%, oklch(82.10% 0.1714 125.04) 83.9%, oklch(84.42% 0.1727 123.40) 87.1%, oklch(86.54% 0.1737 121.67) 90.3%, oklch(88.42% 0.1745 120.08) 93.5%, oklch(90.03% 0.1754 118.87) 96.8%, oklch(91.34% 0.1764 118.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.023 | 38 |
| 2 | 0.331 | 0.05 | 44.3 |
| 3 | 0.677 | 0.153 | 122.5 |
| 4 | 0.913 | 0.176 | 118.3 |

## In these collections

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

## Other forms

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