# Ochre and bronze color palette

The Ochre and bronze color palette brings together orange, gold, and yellow. The colors span a moderate lightness range, combining strong color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is gold, and its lightest tone is yellow.

- Also called: Vivid analogous brown and yellow angular swatches
- Seed: `kYlFgz3LXAus6QTzMMCZTO_cEiPw`
- Page: https://grabient.com/kYlFgz3LXAus6QTzMMCZTO_cEiPw?style=angularSwatches&steps=6&angle=225
- Drawn as: angular swatches, 6 steps, 225 degrees
- Kinds: light center, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.3 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 | `#a66d0c` | `oklch(58.27% 0.1213 72.42)` | Buckthorn Brown | black, 4.8 to 1 |
| 2 | `#d89a14` | `oklch(72.83% 0.1474 78.76)` | New England Autumn | black, 8.5 to 1 |
| 3 | `#f5c531` | `oklch(84.25% 0.1598 89.33)` | Saffron | black, 12.8 to 1 |
| 4 | `#fcdf70` | `oklch(90.55% 0.1337 94.61)` | Pale Gold | black, 15.8 to 1 |
| 5 | `#dfb83d` | `oklch(79.53% 0.1419 90.39)` | Credo | black, 11 to 1 |
| 6 | `#81611b` | `oklch(51.18% 0.0937 82.99)` | Ground Earth | white, 5.7 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #a66d0c 0.000% 16.667%, #d89a14 16.667% 33.333%, #f5c531 33.333% 50.000%, #fcdf70 50.000% 66.667%, #dfb83d 66.667% 83.333%, #81611b 83.333% 100.000%);
background: conic-gradient(from 225deg, oklch(58.27% 0.1213 72.42) 0.000% 16.667%, oklch(72.83% 0.1474 78.76) 16.667% 33.333%, oklch(84.25% 0.1598 89.33) 33.333% 50.000%, oklch(90.55% 0.1337 94.61) 50.000% 66.667%, oklch(79.53% 0.1419 90.39) 66.667% 83.333%, oklch(51.18% 0.0937 82.99) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.583 | 0.121 | 72.4 |
| 2 | 0.728 | 0.147 | 78.8 |
| 3 | 0.843 | 0.16 | 89.3 |
| 4 | 0.906 | 0.134 | 94.6 |
| 5 | 0.795 | 0.142 | 90.4 |
| 6 | 0.512 | 0.094 | 83 |

## In these collections

- [Warm swatches](https://grabient.com/warm-swatches)
- [Gold swatches](https://grabient.com/gold-swatches)

## Other forms

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