# Near-black, bronze and ochre dark mode ui

The Near-black, bronze and ochre dark mode ui brings together dark red, dark orange, orange, and gold. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark red, and its lightest tone is gold.

- Also called: Monochrome black to brown angular gradient
- Seed: `kUJiEbJihBD-9wdSr0HA`
- Page: https://grabient.com/kUJiEbJihBD-9wdSr0HA?style=angularGradient&steps=48&angle=210
- Drawn as: angular gradient, 48 steps, 210 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 6 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 | `#1a0401` | `oklch(14.96% 0.0455 37.97)` | Dwarf Fortress | white, 19.8 to 1 |
| 2 | `#1c0400` | `oklch(15.49% 0.0478 38.30)` | Dwarf Fortress | white, 19.6 to 1 |
| 3 | `#1e0400` | `oklch(16.11% 0.0506 38.68)` | Dwarf Fortress | white, 19.5 to 1 |
| 4 | `#210500` | `oklch(16.81% 0.0539 39.00)` | Dwarf Fortress | white, 19.3 to 1 |
| 5 | `#240500` | `oklch(17.61% 0.0569 38.57)` | Sepia Black | white, 19.1 to 1 |
| 6 | `#270600` | `oklch(18.46% 0.0589 39.20)` | Sepia Black | white, 18.8 to 1 |
| 7 | `#2a0800` | `oklch(19.38% 0.0610 39.87)` | Root Brew | white, 18.5 to 1 |
| 8 | `#2d0900` | `oklch(20.35% 0.0632 40.55)` | Root Brew | white, 18.2 to 1 |
| 9 | `#310b00` | `oklch(21.37% 0.0654 41.26)` | Chocolate Melange | white, 17.8 to 1 |
| 10 | `#340d00` | `oklch(22.42% 0.0677 41.99)` | Chocolate Melange | white, 17.4 to 1 |
| 11 | `#380f00` | `oklch(23.51% 0.0700 42.73)` | Chocolate Melange | white, 16.9 to 1 |
| 12 | `#3b1200` | `oklch(24.63% 0.0723 43.50)` | Red Bean | white, 16.4 to 1 |
| 13 | `#3f1400` | `oklch(25.76% 0.0746 44.28)` | Black Chocolate | white, 15.9 to 1 |
| 14 | `#431600` | `oklch(26.90% 0.0768 45.07)` | Old Study | white, 15.4 to 1 |
| 15 | `#471900` | `oklch(28.04% 0.0790 45.88)` | Old Study | white, 14.9 to 1 |
| 16 | `#4b1b00` | `oklch(29.18% 0.0811 46.70)` | Chocolate Rush | white, 14.4 to 1 |
| 17 | `#4e1e00` | `oklch(30.30% 0.0831 47.54)` | Evil Cigar | white, 13.8 to 1 |
| 18 | `#522100` | `oklch(31.47% 0.0852 48.41)` | Evil Cigar | white, 13.3 to 1 |
| 19 | `#562400` | `oklch(32.69% 0.0873 49.33)` | Conker Brown | white, 12.7 to 1 |
| 20 | `#5b2700` | `oklch(33.95% 0.0894 50.28)` | Hot Fudge | white, 12.1 to 1 |
| 21 | `#5f2a00` | `oklch(35.25% 0.0915 51.27)` | Count Chocula | white, 11.5 to 1 |
| 22 | `#642d00` | `oklch(36.58% 0.0937 52.28)` | Count Chocula | white, 10.9 to 1 |
| 23 | `#683100` | `oklch(37.92% 0.0959 53.32)` | Beasty Brown | white, 10.3 to 1 |
| 24 | `#6d3400` | `oklch(39.28% 0.0980 54.38)` | Nutmeg Wood Finish | white, 9.8 to 1 |
| 25 | `#713800` | `oklch(40.64% 0.1001 55.45)` | Philippine Bronze | white, 9.2 to 1 |
| 26 | `#763b00` | `oklch(42.00% 0.1022 56.53)` | Red Beech | white, 8.7 to 1 |
| 27 | `#7a3f00` | `oklch(43.35% 0.1042 57.62)` | Hazelnut Chocolate | white, 8.2 to 1 |
| 28 | `#7e4300` | `oklch(44.68% 0.1062 58.70)` | Hazelnut Chocolate | white, 7.8 to 1 |
| 29 | `#834600` | `oklch(45.98% 0.1080 59.78)` | Chocolate Pancakes | white, 7.3 to 1 |
| 30 | `#874a00` | `oklch(47.24% 0.1099 60.85)` | Dried Mustard | white, 6.9 to 1 |
| 31 | `#8b4e00` | `oklch(48.46% 0.1116 61.91)` | Plain Old Brown | white, 6.6 to 1 |
| 32 | `#8e5100` | `oklch(49.63% 0.1133 62.94)` | Plain Old Brown | white, 6.2 to 1 |
| 33 | `#925400` | `oklch(50.75% 0.1148 63.97)` | Mochaccino | white, 5.9 to 1 |
| 34 | `#955800` | `oklch(51.89% 0.1164 65.06)` | Charlie Brown | white, 5.7 to 1 |
| 35 | `#995c00` | `oklch(53.03% 0.1179 66.18)` | Sepia Wash | white, 5.4 to 1 |
| 36 | `#9c5f00` | `oklch(54.17% 0.1194 67.34)` | Raw Sienna | white, 5.1 to 1 |
| 37 | `#9f6300` | `oklch(55.30% 0.1209 68.51)` | Cumin Ochre | white, 4.9 to 1 |
| 38 | `#a36600` | `oklch(56.41% 0.1224 69.70)` | Cumin Ochre | white, 4.7 to 1 |
| 39 | `#a66a00` | `oklch(57.50% 0.1239 70.87)` | Butter Fudge | black, 4.6 to 1 |
| 40 | `#a96d00` | `oklch(58.56% 0.1254 72.03)` | Buckthorn Brown | black, 4.8 to 1 |
| 41 | `#ac7100` | `oklch(59.58% 0.1268 73.16)` | Cookie Dough | black, 5.1 to 1 |
| 42 | `#ae7400` | `oklch(60.55% 0.1282 74.24)` | Philippine Gold | black, 5.3 to 1 |
| 43 | `#b17700` | `oklch(61.47% 0.1295 75.27)` | Golden Brown | black, 5.5 to 1 |
| 44 | `#b37a00` | `oklch(62.33% 0.1308 76.24)` | Golden Brown | black, 5.7 to 1 |
| 45 | `#b57d00` | `oklch(63.11% 0.1320 77.12)` | Golden Brown | black, 5.9 to 1 |
| 46 | `#b77f00` | `oklch(63.81% 0.1331 77.91)` | Guo Tie Dumpling | black, 6 to 1 |
| 47 | `#b8820d` | `oklch(64.43% 0.1311 78.61)` | Letter Jacket | black, 6.2 to 1 |
| 48 | `#b98415` | `oklch(64.96% 0.1295 79.18)` | Fig Mustard Yellow | black, 6.3 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #1a0401 0.0%, #1c0400 2.1%, #1e0400 4.3%, #210500 6.4%, #240500 8.5%, #270600 10.6%, #2a0800 12.8%, #2d0900 14.9%, #310b00 17.0%, #340d00 19.1%, #380f00 21.3%, #3b1200 23.4%, #3f1400 25.5%, #431600 27.7%, #471900 29.8%, #4b1b00 31.9%, #4e1e00 34.0%, #522100 36.2%, #562400 38.3%, #5b2700 40.4%, #5f2a00 42.6%, #642d00 44.7%, #683100 46.8%, #6d3400 48.9%, #713800 51.1%, #763b00 53.2%, #7a3f00 55.3%, #7e4300 57.4%, #834600 59.6%, #874a00 61.7%, #8b4e00 63.8%, #8e5100 66.0%, #925400 68.1%, #955800 70.2%, #995c00 72.3%, #9c5f00 74.5%, #9f6300 76.6%, #a36600 78.7%, #a66a00 80.9%, #a96d00 83.0%, #ac7100 85.1%, #ae7400 87.2%, #b17700 89.4%, #b37a00 91.5%, #b57d00 93.6%, #b77f00 95.7%, #b8820d 97.9%, #b98415 100.0%);
background: conic-gradient(from 210deg in oklch, oklch(14.96% 0.0455 37.97) 0.0%, oklch(15.49% 0.0478 38.30) 2.1%, oklch(16.11% 0.0506 38.68) 4.3%, oklch(16.81% 0.0539 39.00) 6.4%, oklch(17.61% 0.0569 38.57) 8.5%, oklch(18.46% 0.0589 39.20) 10.6%, oklch(19.38% 0.0610 39.87) 12.8%, oklch(20.35% 0.0632 40.55) 14.9%, oklch(21.37% 0.0654 41.26) 17.0%, oklch(22.42% 0.0677 41.99) 19.1%, oklch(23.51% 0.0700 42.73) 21.3%, oklch(24.63% 0.0723 43.50) 23.4%, oklch(25.76% 0.0746 44.28) 25.5%, oklch(26.90% 0.0768 45.07) 27.7%, oklch(28.04% 0.0790 45.88) 29.8%, oklch(29.18% 0.0811 46.70) 31.9%, oklch(30.30% 0.0831 47.54) 34.0%, oklch(31.47% 0.0852 48.41) 36.2%, oklch(32.69% 0.0873 49.33) 38.3%, oklch(33.95% 0.0894 50.28) 40.4%, oklch(35.25% 0.0915 51.27) 42.6%, oklch(36.58% 0.0937 52.28) 44.7%, oklch(37.92% 0.0959 53.32) 46.8%, oklch(39.28% 0.0980 54.38) 48.9%, oklch(40.64% 0.1001 55.45) 51.1%, oklch(42.00% 0.1022 56.53) 53.2%, oklch(43.35% 0.1042 57.62) 55.3%, oklch(44.68% 0.1062 58.70) 57.4%, oklch(45.98% 0.1080 59.78) 59.6%, oklch(47.24% 0.1099 60.85) 61.7%, oklch(48.46% 0.1116 61.91) 63.8%, oklch(49.63% 0.1133 62.94) 66.0%, oklch(50.75% 0.1148 63.97) 68.1%, oklch(51.89% 0.1164 65.06) 70.2%, oklch(53.03% 0.1179 66.18) 72.3%, oklch(54.17% 0.1194 67.34) 74.5%, oklch(55.30% 0.1209 68.51) 76.6%, oklch(56.41% 0.1224 69.70) 78.7%, oklch(57.50% 0.1239 70.87) 80.9%, oklch(58.56% 0.1254 72.03) 83.0%, oklch(59.58% 0.1268 73.16) 85.1%, oklch(60.55% 0.1282 74.24) 87.2%, oklch(61.47% 0.1295 75.27) 89.4%, oklch(62.33% 0.1308 76.24) 91.5%, oklch(63.11% 0.1320 77.12) 93.6%, oklch(63.81% 0.1331 77.91) 95.7%, oklch(64.43% 0.1311 78.61) 97.9%, oklch(64.96% 0.1295 79.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.15 | 0.045 | 38 |
| 2 | 0.299 | 0.11 | 47.5 |
| 3 | 0.5 | 0.169 | 63.3 |
| 4 | 0.65 | 0.13 | 79.2 |

## In these collections

- [Dark mode UI gradients](https://grabient.com/dark-mode-ui-gradients)

## Other forms

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