# Bronze and ochre color palette

The Bronze and ochre color palette brings together orange, gold, and light orange. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits seasonal packaging and event invitations. Its darkest tone is orange, and its lightest tone is light orange.

- Also called: Vivid analogous orange to tan linear gradient
- Seed: `kUjmYmVjXBum6wbzqcCg`
- Page: https://grabient.com/kUjmYmVjXBum6wbzqcCg?steps=4&angle=270
- Drawn as: linear gradient, 4 steps, 270 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.7 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 | `#b15802` | `oklch(55.91% 0.1406 53.44)` | Elm Brown Red | white, 4.9 to 1 |
| 2 | `#d28304` | `oklch(67.72% 0.1474 68.23)` | Copious Caramel | black, 6.9 to 1 |
| 3 | `#fabc2a` | `oklch(83.07% 0.1612 83.03)` | Sunflower Valley | black, 12.3 to 1 |
| 4 | `#ffde86` | `oklch(90.94% 0.1132 89.37)` | Yellow Corn | black, 16 to 1 |

## CSS

```css
background: linear-gradient(270deg, #b15802 0.0%, #d28304 33.3%, #fabc2a 66.7%, #ffde86 100.0%);
background: linear-gradient(270deg in oklch, oklch(55.91% 0.1406 53.44) 0.0%, oklch(67.72% 0.1474 68.23) 33.3%, oklch(83.07% 0.1612 83.03) 66.7%, oklch(90.94% 0.1132 89.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.559 | 0.141 | 53.4 |
| 2 | 0.677 | 0.147 | 68.2 |
| 3 | 0.831 | 0.161 | 83 |
| 4 | 0.909 | 0.114 | 89.4 |

## In these collections

- [Autumn gradients](https://grabient.com/autumn-gradients)
- [Yellow swatches](https://grabient.com/yellow-swatches)

## Other forms

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