# Black and Gold: Ochre and near-black

The "Black and Gold: Ochre and near-black" palette brings together gold, orange, dark gray, dark red, red, and light orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is light orange.

- Also called: Tan, brown and black angular gradient
- Seed: `kasFA6vhw_SIHvWSAjKnAnHTicwlZHkHg`
- Page: https://grabient.com/kasFA6vhw_SIHvWSAjKnAnHTicwlZHkHg?style=angularGradient&steps=32&angle=270
- Drawn as: angular gradient, 32 steps, 270 degrees
- Kinds: dark center, muted, dark, warm, monochrome
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.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 | `#be9544` | `oklch(69.29% 0.1102 82.27)` | Suzani Gold | black, 7.5 to 1 |
| 2 | `#b58d40` | `oklch(66.64% 0.1063 81.81)` | Mayan Gold | black, 6.8 to 1 |
| 3 | `#a8823a` | `oklch(62.93% 0.1009 81.33)` | Indian Brass | black, 5.9 to 1 |
| 4 | `#997534` | `oklch(58.56% 0.0944 80.59)` | Heavy Ochre | black, 4.9 to 1 |
| 5 | `#89682e` | `oklch(53.95% 0.0869 79.35)` | Aged Antics | white, 5.1 to 1 |
| 6 | `#7b5c29` | `oklch(49.51% 0.0786 77.39)` | Hot Curry | white, 6.1 to 1 |
| 7 | `#6c5027` | `oklch(45.25% 0.0689 75.46)` | Wagon Train | white, 7.4 to 1 |
| 8 | `#5c4524` | `oklch(40.73% 0.0572 74.34)` | Nightingale | white, 9 to 1 |
| 9 | `#4c3a22` | `oklch(36.17% 0.0447 72.45)` | Witch’s Cottage | white, 10.8 to 1 |
| 10 | `#3e2f20` | `oklch(31.83% 0.0329 68.15)` | Cola | white, 12.8 to 1 |
| 11 | `#31261d` | `oklch(27.93% 0.0232 59.81)` | Wood Bark | white, 14.6 to 1 |
| 12 | `#271e1a` | `oklch(24.54% 0.0164 44.58)` | Velvet Black | white, 16.2 to 1 |
| 13 | `#1e1717` | `oklch(21.29% 0.0115 20.29)` | Kālā Black | white, 17.6 to 1 |
| 14 | `#151113` | `oklch(18.38% 0.0080 352.29)` | Sticky Black Tarmac | white, 18.7 to 1 |
| 15 | `#0f0c0f` | `oklch(16.05% 0.0061 326.32)` | Black Sheep | white, 19.4 to 1 |
| 16 | `#0b0a0c` | `oklch(14.54% 0.0054 308.17)` | Existential Angst | white, 19.7 to 1 |
| 17 | `#0a090b` | `oklch(14.07% 0.0060 303.16)` | Existential Angst | white, 19.9 to 1 |
| 18 | `#0b090d` | `oklch(14.53% 0.0079 310.45)` | Existential Angst | white, 19.8 to 1 |
| 19 | `#0f0b0f` | `oklch(15.78% 0.0113 325.32)` | Black Sheep | white, 19.5 to 1 |
| 20 | `#160e13` | `oklch(17.71% 0.0159 343.05)` | Optophobia | white, 18.9 to 1 |
| 21 | `#1f1216` | `oklch(20.17% 0.0217 358.94)` | Bats Cloak | white, 18.1 to 1 |
| 22 | `#29171a` | `oklch(23.08% 0.0288 8.67)` | Kurobeni | white, 17 to 1 |
| 23 | `#361e20` | `oklch(26.73% 0.0386 14.44)` | Black Kite | white, 15.4 to 1 |
| 24 | `#472526` | `oklch(31.02% 0.0504 18.29)` | New Bulgarian Rose | white, 13.4 to 1 |
| 25 | `#592e2e` | `oklch(35.70% 0.0622 21.08)` | Bratwurst | white, 11.3 to 1 |
| 26 | `#6b3836` | `oklch(40.53% 0.0725 23.66)` | Sanguine Brown | white, 9.3 to 1 |
| 27 | `#7c443e` | `oklch(45.28% 0.0794 26.86)` | Sweet Spiceberry | white, 7.6 to 1 |
| 28 | `#8e5248` | `oklch(50.56% 0.0828 30.62)` | Cogswell Cedar | white, 6 to 1 |
| 29 | `#a06354` | `oklch(56.30% 0.0839 34.44)` | Rust Coloured | white, 4.7 to 1 |
| 30 | `#b27461` | `oklch(61.89% 0.0836 38.00)` | Vin Cuit | black, 5.5 to 1 |
| 31 | `#c0836d` | `oklch(66.69% 0.0829 41.01)` | Kitchen Terra Cotta | black, 6.7 to 1 |
| 32 | `#cb8e75` | `oklch(70.08% 0.0827 43.17)` | Ginger Scent | black, 7.6 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #be9544 0.0%, #b58d40 3.2%, #a8823a 6.5%, #997534 9.7%, #89682e 12.9%, #7b5c29 16.1%, #6c5027 19.4%, #5c4524 22.6%, #4c3a22 25.8%, #3e2f20 29.0%, #31261d 32.3%, #271e1a 35.5%, #1e1717 38.7%, #151113 41.9%, #0f0c0f 45.2%, #0b0a0c 48.4%, #0a090b 51.6%, #0b090d 54.8%, #0f0b0f 58.1%, #160e13 61.3%, #1f1216 64.5%, #29171a 67.7%, #361e20 71.0%, #472526 74.2%, #592e2e 77.4%, #6b3836 80.6%, #7c443e 83.9%, #8e5248 87.1%, #a06354 90.3%, #b27461 93.5%, #c0836d 96.8%, #cb8e75 100.0%);
background: conic-gradient(from 270deg in oklch, oklch(69.29% 0.1102 82.27) 0.0%, oklch(66.64% 0.1063 81.81) 3.2%, oklch(62.93% 0.1009 81.33) 6.5%, oklch(58.56% 0.0944 80.59) 9.7%, oklch(53.95% 0.0869 79.35) 12.9%, oklch(49.51% 0.0786 77.39) 16.1%, oklch(45.25% 0.0689 75.46) 19.4%, oklch(40.73% 0.0572 74.34) 22.6%, oklch(36.17% 0.0447 72.45) 25.8%, oklch(31.83% 0.0329 68.15) 29.0%, oklch(27.93% 0.0232 59.81) 32.3%, oklch(24.54% 0.0164 44.58) 35.5%, oklch(21.29% 0.0115 20.29) 38.7%, oklch(18.38% 0.0080 352.29) 41.9%, oklch(16.05% 0.0061 326.32) 45.2%, oklch(14.54% 0.0054 308.17) 48.4%, oklch(14.07% 0.0060 303.16) 51.6%, oklch(14.53% 0.0079 310.45) 54.8%, oklch(15.78% 0.0113 325.32) 58.1%, oklch(17.71% 0.0159 343.05) 61.3%, oklch(20.17% 0.0217 358.94) 64.5%, oklch(23.08% 0.0288 8.67) 67.7%, oklch(26.73% 0.0386 14.44) 71.0%, oklch(31.02% 0.0504 18.29) 74.2%, oklch(35.70% 0.0622 21.08) 77.4%, oklch(40.53% 0.0725 23.66) 80.6%, oklch(45.28% 0.0794 26.86) 83.9%, oklch(50.56% 0.0828 30.62) 87.1%, oklch(56.30% 0.0839 34.44) 90.3%, oklch(61.89% 0.0836 38.00) 93.5%, oklch(66.69% 0.0829 41.01) 96.8%, oklch(70.08% 0.0827 43.17) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.693 | 0.11 | 82.3 |
| 2 | 0.488 | 0.077 | 77 |
| 3 | 0.268 | 0.021 | 55.8 |
| 4 | 0.142 | 0.006 | -56.2 |
| 5 | 0.22 | 0.026 | 6.2 |
| 6 | 0.445 | 0.079 | 26.3 |
| 7 | 0.701 | 0.083 | 43.2 |

## In these collections

- [Black and gold color palette](https://grabient.com/black-and-gold-color-palette)

## Other forms

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