# Cocoa Chartreuse Angular Wedges

These angular swatch wedges show dark chocolate, cocoa brown, toasted tan, bright chartreuse, and deep olive in their saved order. Each visible field remains distinct, giving the composition a firm balance between warm earth tones and acidic green. The palette suits labels, packaging, geometric posters, dashboards, and editorial accents that need clear separation.

- Also called: Analogous brown, yellow and olive angular swatches
- Seed: `kWQxUfO5hBVUhQZtvMXPiVAY`
- Page: https://grabient.com/kWQxUfO5hBVUhQZtvMXPiVAY?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#312019` | `oklch(26.38% 0.0289 43.59)` | Kenpōzome Black | white, 15.4 to 1 |
| 2 | `#775035` | `oklch(46.85% 0.0661 55.22)` | Umber Rust | white, 7 to 1 |
| 3 | `#ba8b55` | `oklch(66.93% 0.0909 68.96)` | Canvas | black, 6.8 to 1 |
| 4 | `#c7e053` | `oklch(86.22% 0.1667 118.62)` | Greenivorous | black, 14.2 to 1 |
| 5 | `#55691e` | `oklch(48.82% 0.1020 122.85)` | Bowser Shell | white, 6.1 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #312019 0.000% 20.000%, #775035 20.000% 40.000%, #ba8b55 40.000% 60.000%, #c7e053 60.000% 80.000%, #55691e 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(26.38% 0.0289 43.59) 0.000% 20.000%, oklch(46.85% 0.0661 55.22) 20.000% 40.000%, oklch(66.93% 0.0909 68.96) 40.000% 60.000%, oklch(86.22% 0.1667 118.62) 60.000% 80.000%, oklch(48.82% 0.1020 122.85) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.264 | 0.029 | 43.6 |
| 2 | 0.469 | 0.066 | 55.2 |
| 3 | 0.669 | 0.091 | 69 |
| 4 | 0.862 | 0.167 | 118.6 |
| 5 | 0.488 | 0.102 | 122.9 |

## In these collections

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

## Other forms

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