# Gold, bronze and near-black hunger games palette

The Gold, bronze and near-black hunger games palette brings together light orange, gold, orange, dark red, and black. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is black, and its lightest tone is light orange.

- Also called: Beige, orange, maroon and black linear swatches
- Seed: `kW2h0-VrM_TbBu4lMz0jwO_4`
- Page: https://grabient.com/kW2h0-VrM_TbBu4lMz0jwO_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.2 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 | `#dccfb3` | `oklch(85.83% 0.0400 87.19)` | Found Fossil | black, 13.6 to 1 |
| 2 | `#c38e00` | `oklch(68.11% 0.1404 81.89)` | Moutarde de Bénichon | black, 7.2 to 1 |
| 3 | `#843300` | `oklch(42.92% 0.1230 44.84)` | Coffee Addiction | white, 8.5 to 1 |
| 4 | `#58000e` | `oklch(29.16% 0.1174 21.77)` | Saving Light | white, 14.7 to 1 |
| 5 | `#080404` | `oklch(11.81% 0.0096 21.67)` | Pupil | white, 20.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dccfb3 0.000% 20.000%, #c38e00 20.000% 40.000%, #843300 40.000% 60.000%, #58000e 60.000% 80.000%, #080404 80.000% 100.000%);
background: linear-gradient(90deg, oklch(85.83% 0.0400 87.19) 0.000% 20.000%, oklch(68.11% 0.1404 81.89) 20.000% 40.000%, oklch(42.92% 0.1230 44.84) 40.000% 60.000%, oklch(29.16% 0.1174 21.77) 60.000% 80.000%, oklch(11.81% 0.0096 21.67) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.04 | 87.2 |
| 2 | 0.681 | 0.141 | 81.9 |
| 3 | 0.429 | 0.181 | 44.9 |
| 4 | 0.291 | 0.141 | 21.7 |
| 5 | 0.118 | 0.01 | 21.7 |

## In these collections

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

## Other forms

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