# Bronze, stone and near-black color palette

The Bronze, stone and near-black color palette brings together gold, dark red, light orange, dark orange, and black. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is black, and its lightest tone is light orange.

- Also called: Brown, maroon, gray and black angular swatches
- Seed: `kWiV42IrM5WgMx6dGbsDwO_4`
- Page: https://grabient.com/kWiV42IrM5WgMx6dGbsDwO_4?style=angularSwatches&steps=5&angle=180
- Drawn as: angular swatches, 5 steps, 180 degrees
- Kinds: light center, vivid, dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.6 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 | `#946400` | `oklch(53.94% 0.1133 75.91)` | Gamboge Brown | white, 5.1 to 1 |
| 2 | `#50000e` | `oklch(27.20% 0.1092 20.05)` | Saving Light | white, 15.6 to 1 |
| 3 | `#cec3ab` | `oklch(81.89% 0.0344 85.45)` | Threaded Loom | black, 11.9 to 1 |
| 4 | `#350f00` | `oklch(22.84% 0.0667 43.75)` | Chocolate Melange | white, 17.2 to 1 |
| 5 | `#080504` | `oklch(11.81% 0.0096 44.23)` | Black Metal | white, 20.3 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #946400 0.000% 20.000%, #50000e 20.000% 40.000%, #cec3ab 40.000% 60.000%, #350f00 60.000% 80.000%, #080504 80.000% 100.000%);
background: conic-gradient(from 180deg, oklch(53.94% 0.1133 75.91) 0.000% 20.000%, oklch(27.20% 0.1092 20.05) 20.000% 40.000%, oklch(81.89% 0.0344 85.45) 40.000% 60.000%, oklch(22.84% 0.0667 43.75) 60.000% 80.000%, oklch(11.81% 0.0096 44.23) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.539 | 0.13 | 75.9 |
| 2 | 0.272 | 0.141 | 19.9 |
| 3 | 0.819 | 0.034 | 85.4 |
| 4 | 0.228 | 0.07 | 44.2 |
| 5 | 0.118 | 0.01 | 44.2 |

## In these collections

- [Halloween swatches](https://grabient.com/halloween-swatches)
- [Hunger Games swatches](https://grabient.com/hunger-games-swatches)

## Other forms

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