# Tan Charcoal Olive

These concentric swatch rings move through tan, charcoal, olive, and charcoal in its saved order. The complete composition preserves clear value changes and balanced color weight across every visible area. It suits botanical packaging, trail graphics, editorial layouts, and grounded interface accents, with lighter fields for breathing room and darker fields for type, borders, or focused accents.

- Also called: Gray, black, brown and dark green radial swatches
- Seed: `kWzy1UoAxFzuXPdLGTfJ4_Ko`
- Page: https://grabient.com/kWzy1UoAxFzuXPdLGTfJ4_Ko?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 8.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 | `#bec99c` | `oklch(81.50% 0.0620 118.83)` | Sprout | black, 11.9 to 1 |
| 2 | `#10271f` | `oklch(25.20% 0.0331 168.50)` | Deep Slate Green | white, 15.7 to 1 |
| 3 | `#3f6548` | `oklch(46.85% 0.0634 150.53)` | Firm Green | white, 6.6 to 1 |
| 4 | `#927a4d` | `oklch(59.06% 0.0689 81.84)` | Safari Trail | black, 5 to 1 |
| 5 | `#16382e` | `oklch(31.10% 0.0427 172.72)` | Medium Jungle Green | white, 12.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #bec99c 0.000% 20.000%, #10271f 20.000% 40.000%, #3f6548 40.000% 60.000%, #927a4d 60.000% 80.000%, #16382e 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(81.50% 0.0620 118.83) 0.000% 20.000%, oklch(25.20% 0.0331 168.50) 20.000% 40.000%, oklch(46.85% 0.0634 150.53) 40.000% 60.000%, oklch(59.06% 0.0689 81.84) 60.000% 80.000%, oklch(31.10% 0.0427 172.72) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.815 | 0.062 | 118.8 |
| 2 | 0.252 | 0.033 | 168.5 |
| 3 | 0.469 | 0.063 | 150.5 |
| 4 | 0.591 | 0.069 | 81.8 |
| 5 | 0.311 | 0.043 | 172.7 |

## In these collections

- [Forest swatches](https://grabient.com/forest-swatches)

## Other forms

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