# Bronze color palette

This palette brings together dark orange, orange, and light orange. It lightens and then darkens across a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Seamless analogous brown and orange radial gradient
- Seed: `kYNyMfsq2_U_EQDjOsMzsK8h0SwM`
- Page: https://grabient.com/kYNyMfsq2_U_EQDjOsMzsK8h0SwM?style=radialGradient&steps=32&angle=45
- Drawn as: radial gradient, 32 steps, 45 degrees
- Kinds: light center, vivid, warm, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.4 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 | `#2c1106` | `oklch(21.65% 0.0482 44.30)` | Root Brew | white, 17.6 to 1 |
| 2 | `#331406` | `oklch(23.50% 0.0565 43.66)` | Chocolate Melange | white, 16.9 to 1 |
| 3 | `#3e1605` | `oklch(25.99% 0.0679 42.72)` | Old Study | white, 15.8 to 1 |
| 4 | `#4b1a04` | `oklch(28.96% 0.0815 41.63)` | Chocolate Rush | white, 14.5 to 1 |
| 5 | `#5a1d03` | `oklch(32.25% 0.0960 40.56)` | Peaty Brown | white, 13 to 1 |
| 6 | `#692102` | `oklch(35.69% 0.1102 39.65)` | Roastery | white, 11.5 to 1 |
| 7 | `#792502` | `oklch(39.10% 0.1231 39.07)` | Drip Coffee | white, 10.1 to 1 |
| 8 | `#882a03` | `oklch(42.53% 0.1348 38.74)` | Red Shade Wash | white, 8.8 to 1 |
| 9 | `#993005` | `oklch(46.27% 0.1471 38.33)` | Chocolate Fondue | white, 7.5 to 1 |
| 10 | `#ab3708` | `oklch(50.17% 0.1594 38.05)` | Burnt Sienna | white, 6.4 to 1 |
| 11 | `#bc3e0c` | `oklch(54.09% 0.1705 38.12)` | Copper Hopper | white, 5.4 to 1 |
| 12 | `#cd470f` | `oklch(57.86% 0.1797 38.79)` | Ōkaihau Express | white, 4.6 to 1 |
| 13 | `#db500e` | `oklch(61.33% 0.1859 40.26)` | Deep Orange | black, 5.1 to 1 |
| 14 | `#e65c09` | `oklch(64.51% 0.1881 43.02)` | Tobiko Orange | black, 5.9 to 1 |
| 15 | `#ef6b00` | `oklch(67.87% 0.1855 47.78)` | Epicurean Orange | black, 6.7 to 1 |
| 16 | `#f57c00` | `oklch(71.17% 0.1791 53.70)` | University of Tennessee Orange | black, 7.7 to 1 |
| 17 | `#f88c05` | `oklch(74.12% 0.1733 59.74)` | Jú Huáng Tangerine | black, 8.7 to 1 |
| 18 | `#f99818` | `oklch(76.41% 0.1667 64.86)` | Aromango | black, 9.5 to 1 |
| 19 | `#f9a022` | `oklch(77.74% 0.1622 68.05)` | Radiant Yellow | black, 10 to 1 |
| 20 | `#f9a024` | `oklch(77.84% 0.1616 68.27)` | Radiant Yellow | black, 10.1 to 1 |
| 21 | `#fa9a1c` | `oklch(76.89% 0.1660 65.24)` | Jack-O | black, 9.7 to 1 |
| 22 | `#fb8f0e` | `oklch(75.04% 0.1733 59.98)` | Jú Huáng Tangerine | black, 9 to 1 |
| 23 | `#fa7f06` | `oklch(72.41% 0.1811 53.65)` | Pumpkin Orange | black, 8.1 to 1 |
| 24 | `#f46e0d` | `oklch(69.11% 0.1867 47.40)` | Apocalyptic Orange | black, 7.1 to 1 |
| 25 | `#e95e15` | `oklch(65.24% 0.1876 42.40)` | Santiago Orange | black, 6 to 1 |
| 26 | `#d85117` | `oklch(60.88% 0.1813 39.77)` | Lāl Red | black, 5 to 1 |
| 27 | `#be4513` | `oklch(55.12% 0.1654 39.35)` | Pindjur Red | white, 5.2 to 1 |
| 28 | `#9d390c` | `oklch(48.08% 0.1424 40.34)` | Muddy | white, 6.9 to 1 |
| 29 | `#7a2e08` | `oklch(40.56% 0.1158 42.19)` | Beer Glazed Bacon | white, 9.4 to 1 |
| 30 | `#5a2306` | `oklch(33.33% 0.0893 44.36)` | Conker Brown | white, 12.4 to 1 |
| 31 | `#401a06` | `oklch(27.16% 0.0665 46.30)` | Bath in Chocolate | white, 15.2 to 1 |
| 32 | `#2f1405` | `oklch(22.83% 0.0510 47.47)` | Shadow Play | white, 17.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #2c1106 0.0%, #331406 3.2%, #3e1605 6.5%, #4b1a04 9.7%, #5a1d03 12.9%, #692102 16.1%, #792502 19.4%, #882a03 22.6%, #993005 25.8%, #ab3708 29.0%, #bc3e0c 32.3%, #cd470f 35.5%, #db500e 38.7%, #e65c09 41.9%, #ef6b00 45.2%, #f57c00 48.4%, #f88c05 51.6%, #f99818 54.8%, #f9a022 58.1%, #f9a024 61.3%, #fa9a1c 64.5%, #fb8f0e 67.7%, #fa7f06 71.0%, #f46e0d 74.2%, #e95e15 77.4%, #d85117 80.6%, #be4513 83.9%, #9d390c 87.1%, #7a2e08 90.3%, #5a2306 93.5%, #401a06 96.8%, #2f1405 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(21.65% 0.0482 44.30) 0.0%, oklch(23.50% 0.0565 43.66) 3.2%, oklch(25.99% 0.0679 42.72) 6.5%, oklch(28.96% 0.0815 41.63) 9.7%, oklch(32.25% 0.0960 40.56) 12.9%, oklch(35.69% 0.1102 39.65) 16.1%, oklch(39.10% 0.1231 39.07) 19.4%, oklch(42.53% 0.1348 38.74) 22.6%, oklch(46.27% 0.1471 38.33) 25.8%, oklch(50.17% 0.1594 38.05) 29.0%, oklch(54.09% 0.1705 38.12) 32.3%, oklch(57.86% 0.1797 38.79) 35.5%, oklch(61.33% 0.1859 40.26) 38.7%, oklch(64.51% 0.1881 43.02) 41.9%, oklch(67.87% 0.1855 47.78) 45.2%, oklch(71.17% 0.1791 53.70) 48.4%, oklch(74.12% 0.1733 59.74) 51.6%, oklch(76.41% 0.1667 64.86) 54.8%, oklch(77.74% 0.1622 68.05) 58.1%, oklch(77.84% 0.1616 68.27) 61.3%, oklch(76.89% 0.1660 65.24) 64.5%, oklch(75.04% 0.1733 59.98) 67.7%, oklch(72.41% 0.1811 53.65) 71.0%, oklch(69.11% 0.1867 47.40) 74.2%, oklch(65.24% 0.1876 42.40) 77.4%, oklch(60.88% 0.1813 39.77) 80.6%, oklch(55.12% 0.1654 39.35) 83.9%, oklch(48.08% 0.1424 40.34) 87.1%, oklch(40.56% 0.1158 42.19) 90.3%, oklch(33.33% 0.0893 44.36) 93.5%, oklch(27.16% 0.0665 46.30) 96.8%, oklch(22.83% 0.0510 47.47) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.048 | 44.3 |
| 2 | 0.398 | 0.125 | 39 |
| 3 | 0.626 | 0.187 | 41.1 |
| 4 | 0.78 | 0.161 | 68.6 |
| 5 | 0.618 | 0.183 | 40.1 |
| 6 | 0.228 | 0.051 | 47.5 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [Halloween gradients](https://grabient.com/halloween-gradients)

## Other forms

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