# Black Gold Orange Wedges

This angular gradient moves through near-black brown, deep gold, bright gold, pale gold, amber, and closes in vivid orange. The continuous route preserves several useful light and dark areas for foreground elements. Use it for bold Funhaus graphics, playful branding, geometric editorial layouts, or energetic interface backgrounds with clear color roles.

- Also called: Analogous brown, orange and yellow angular gradient
- Seed: `kUMQw45z4_ng4QzVUTgA`
- Page: https://grabient.com/kUMQw45z4_ng4QzVUTgA?style=angularGradient&steps=32&angle=145
- Drawn as: angular gradient, 32 steps, 145 degrees
- Kinds: light center, vivid, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.1 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 | `#18140c` | `oklch(19.29% 0.0165 79.45)` | Darkness | white, 18.3 to 1 |
| 2 | `#241c0f` | `oklch(23.04% 0.0261 79.14)` | Burnt Coffee | white, 16.9 to 1 |
| 3 | `#342711` | `oklch(28.10% 0.0393 78.58)` | Brown Tumbleweed | white, 14.5 to 1 |
| 4 | `#483414` | `oklch(34.17% 0.0552 77.85)` | Bavarian Sweet Mustard | white, 11.7 to 1 |
| 5 | `#604415` | `oklch(40.95% 0.0729 77.05)` | Mud Brown | white, 8.9 to 1 |
| 6 | `#7b5615` | `oklch(48.14% 0.0916 76.27)` | Autumn Leaf Brown | white, 6.5 to 1 |
| 7 | `#986813` | `oklch(55.45% 0.1103 75.61)` | Embarrassed Frog | white, 4.8 to 1 |
| 8 | `#b47b0f` | `oklch(62.57% 0.1283 75.15)` | Golden Brown | black, 5.7 to 1 |
| 9 | `#cf8d08` | `oklch(69.20% 0.1445 74.99)` | End of Summer | black, 7.4 to 1 |
| 10 | `#e79d00` | `oklch(75.05% 0.1582 75.21)` | Hot Butter | black, 9.2 to 1 |
| 11 | `#faab00` | `oklch(79.81% 0.1677 75.91)` | Beer | black, 10.9 to 1 |
| 12 | `#ffba42` | `oklch(83.41% 0.1518 77.38)` | Just Ducky | black, 12.3 to 1 |
| 13 | `#ffc968` | `oklch(86.45% 0.1296 80.01)` | Honeypot | black, 13.7 to 1 |
| 14 | `#ffd47f` | `oklch(89.01% 0.1142 83.53)` | Soft Saffron | black, 15 to 1 |
| 15 | `#ffde8f` | `oklch(91.09% 0.1044 87.60)` | Brite Gold | black, 16 to 1 |
| 16 | `#ffe598` | `oklch(92.72% 0.1001 91.88)` | Summer Harvest | black, 16.9 to 1 |
| 17 | `#ffeb9b` | `oklch(93.93% 0.1019 96.03)` | Drover | black, 17.6 to 1 |
| 18 | `#fff097` | `oklch(94.73% 0.1107 99.72)` | Daisy Chain | black, 18.1 to 1 |
| 19 | `#fff38a` | `oklch(95.14% 0.1272 102.60)` | The First Daffodil | black, 18.4 to 1 |
| 20 | `#fff476` | `oklch(95.18% 0.1472 104.33)` | Yellow Salmonberry | black, 18.4 to 1 |
| 21 | `#fef36e` | `oklch(94.87% 0.1533 104.58)` | Pale Ale | black, 18.3 to 1 |
| 22 | `#fff069` | `oklch(94.20% 0.1547 103.00)` | Pale Ale | black, 17.9 to 1 |
| 23 | `#ffe96b` | `oklch(92.74% 0.1465 99.29)` | Fuzzy Duckling | black, 17 to 1 |
| 24 | `#ffde66` | `oklch(90.49% 0.1425 93.78)` | Lemon Tart | black, 15.8 to 1 |
| 25 | `#ffd05b` | `oklch(87.66% 0.1430 86.90)` | Radler | black, 14.3 to 1 |
| 26 | `#ffbf4b` | `oklch(84.42% 0.1475 79.09)` | Twenty Carat | black, 12.8 to 1 |
| 27 | `#ffad3a` | `oklch(80.96% 0.1554 70.79)` | Blissful Orange | black, 11.3 to 1 |
| 28 | `#ff9a27` | `oklch(77.47% 0.1665 62.44)` | Dragon Ball | black, 9.9 to 1 |
| 29 | `#ff8614` | `oklch(74.14% 0.1801 54.46)` | Autumn Glory | black, 8.6 to 1 |
| 30 | `#ff7203` | `oklch(71.15% 0.1951 47.30)` | Philippine Orange | black, 7.6 to 1 |
| 31 | `#ff5f00` | `oklch(68.68% 0.2097 41.38)` | Vivid Orange | black, 6.8 to 1 |
| 32 | `#ff4f03` | `oklch(66.93% 0.2222 37.18)` | Aerospace Orange | black, 6.3 to 1 |

## CSS

```css
background: conic-gradient(from 145deg, #18140c 0.0%, #241c0f 3.2%, #342711 6.5%, #483414 9.7%, #604415 12.9%, #7b5615 16.1%, #986813 19.4%, #b47b0f 22.6%, #cf8d08 25.8%, #e79d00 29.0%, #faab00 32.3%, #ffba42 35.5%, #ffc968 38.7%, #ffd47f 41.9%, #ffde8f 45.2%, #ffe598 48.4%, #ffeb9b 51.6%, #fff097 54.8%, #fff38a 58.1%, #fff476 61.3%, #fef36e 64.5%, #fff069 67.7%, #ffe96b 71.0%, #ffde66 74.2%, #ffd05b 77.4%, #ffbf4b 80.6%, #ffad3a 83.9%, #ff9a27 87.1%, #ff8614 90.3%, #ff7203 93.5%, #ff5f00 96.8%, #ff4f03 100.0%);
background: conic-gradient(from 145deg in oklch, oklch(19.29% 0.0165 79.45) 0.0%, oklch(23.04% 0.0261 79.14) 3.2%, oklch(28.10% 0.0393 78.58) 6.5%, oklch(34.17% 0.0552 77.85) 9.7%, oklch(40.95% 0.0729 77.05) 12.9%, oklch(48.14% 0.0916 76.27) 16.1%, oklch(55.45% 0.1103 75.61) 19.4%, oklch(62.57% 0.1283 75.15) 22.6%, oklch(69.20% 0.1445 74.99) 25.8%, oklch(75.05% 0.1582 75.21) 29.0%, oklch(79.81% 0.1677 75.91) 32.3%, oklch(83.41% 0.1518 77.38) 35.5%, oklch(86.45% 0.1296 80.01) 38.7%, oklch(89.01% 0.1142 83.53) 41.9%, oklch(91.09% 0.1044 87.60) 45.2%, oklch(92.72% 0.1001 91.88) 48.4%, oklch(93.93% 0.1019 96.03) 51.6%, oklch(94.73% 0.1107 99.72) 54.8%, oklch(95.14% 0.1272 102.60) 58.1%, oklch(95.18% 0.1472 104.33) 61.3%, oklch(94.87% 0.1533 104.58) 64.5%, oklch(94.20% 0.1547 103.00) 67.7%, oklch(92.74% 0.1465 99.29) 71.0%, oklch(90.49% 0.1425 93.78) 74.2%, oklch(87.66% 0.1430 86.90) 77.4%, oklch(84.42% 0.1475 79.09) 80.6%, oklch(80.96% 0.1554 70.79) 83.9%, oklch(77.47% 0.1665 62.44) 87.1%, oklch(74.14% 0.1801 54.46) 90.3%, oklch(71.15% 0.1951 47.30) 93.5%, oklch(68.68% 0.2097 41.38) 96.8%, oklch(66.93% 0.2222 37.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.193 | 0.017 | 79.5 |
| 2 | 0.811 | 0.171 | 76.3 |
| 3 | 0.945 | 0.154 | 103.8 |
| 4 | 0.669 | 0.223 | 37.2 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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