# Black, navy, brown and orange linear gradient

Black, navy, brown and orange linear gradient with 32 colors: #150109, #0b0107, #020003, #000000, #000000, #000000, #000000, #000003, #01010c, #020317, #050920, #0c1428, #172030, #252a39, #343440, #443e45, #4f4b4c, #595756, #64615f, #726a63, #817363, #8f7b60, #9b815d, #a58758, #ae8b52, #b78d4a, #be8e41, #c48d39, #c78a2f, #c88624, #c8811a, #c97e10. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A`
- Page: https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Hues: complementary
- 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 | `#150109` | `oklch(13.39% 0.0455 355.08)` | Glossy Black | white, 20.1 to 1 |
| 2 | `#0b0107` | `oklch(10.79% 0.0364 339.35)` | Pupil | white, 20.5 to 1 |
| 3 | `#020003` | `oklch(6.88% 0.0228 316.16)` | Binary Black | white, 20.8 to 1 |
| 4 | `#000000` | `oklch(2.98% 0.0093 291.79)` | Black | white, 20.9 to 1 |
| 5 | `#000000` | `oklch(0.39% 0.0009 272.51)` | Black | white, 20.9 to 1 |
| 6 | `#000000` | `oklch(0.25% 0.0016 271.33)` | Black | white, 20.9 to 1 |
| 7 | `#000000` | `oklch(1.84% 0.0127 264.05)` | Black | white, 20.9 to 1 |
| 8 | `#000003` | `oklch(4.60% 0.0282 266.85)` | Binary Black | white, 20.9 to 1 |
| 9 | `#01010c` | `oklch(8.03% 0.0419 271.59)` | Benthic Black | white, 20.8 to 1 |
| 10 | `#020317` | `oklch(11.51% 0.0486 273.70)` | Obsidian Shard | white, 20.4 to 1 |
| 11 | `#050920` | `oklch(15.35% 0.0475 270.37)` | Melanophobia | white, 19.6 to 1 |
| 12 | `#0c1428` | `oklch(19.68% 0.0421 264.93)` | Corbeau | white, 18.2 to 1 |
| 13 | `#172030` | `oklch(24.23% 0.0347 262.42)` | Hēi Sè Black | white, 16.3 to 1 |
| 14 | `#252a39` | `oklch(28.70% 0.0277 267.87)` | Spinel Stone Black | white, 14.2 to 1 |
| 15 | `#343440` | `oklch(32.98% 0.0218 286.77)` | Witches Cauldron | white, 12.2 to 1 |
| 16 | `#443e45` | `oklch(37.33% 0.0140 318.82)` | Bluish Black | white, 10.3 to 1 |
| 17 | `#4f4b4c` | `oklch(41.62% 0.0069 355.87)` | Deep Earth | white, 8.6 to 1 |
| 18 | `#595756` | `oklch(45.71% 0.0032 29.54)` | Sumi Ink | white, 7.2 to 1 |
| 19 | `#64615f` | `oklch(49.46% 0.0056 51.81)` | Gropius Grey | white, 6.1 to 1 |
| 20 | `#726a63` | `oklch(53.01% 0.0152 64.09)` | Burnished Pewter | white, 5.2 to 1 |
| 21 | `#817363` | `oklch(56.33% 0.0294 70.49)` | Villa Oliva | white, 4.6 to 1 |
| 22 | `#8f7b60` | `oklch(59.32% 0.0454 73.60)` | Elmwood | black, 5.1 to 1 |
| 23 | `#9b815d` | `oklch(61.88% 0.0602 76.01)` | Corkboard | black, 5.6 to 1 |
| 24 | `#a58758` | `oklch(63.97% 0.0731 78.27)` | Chicory | black, 6.1 to 1 |
| 25 | `#ae8b52` | `oklch(65.66% 0.0863 78.49)` | Limed Oak | black, 6.6 to 1 |
| 26 | `#b78d4a` | `oklch(66.95% 0.0990 77.48)` | Yellow Acorn | black, 6.9 to 1 |
| 27 | `#be8e41` | `oklch(67.81% 0.1103 76.06)` | Pizza | black, 7.1 to 1 |
| 28 | `#c48d39` | `oklch(68.20% 0.1194 74.89)` | Child of the Moon | black, 7.2 to 1 |
| 29 | `#c78a2f` | `oklch(67.88% 0.1268 73.21)` | Gentleman’s Whiskey | black, 7.1 to 1 |
| 30 | `#c88624` | `oklch(67.12% 0.1327 71.19)` | Gentleman’s Whiskey | black, 6.8 to 1 |
| 31 | `#c8811a` | `oklch(66.28% 0.1372 69.29)` | Bamboo Brown | black, 6.6 to 1 |
| 32 | `#c97e10` | `oklch(65.75% 0.1406 67.99)` | Bamboo Brown | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #150109 0.0%, #0b0107 3.2%, #020003 6.5%, #000000 9.7%, #000000 12.9%, #000000 16.1%, #000000 19.4%, #000003 22.6%, #01010c 25.8%, #020317 29.0%, #050920 32.3%, #0c1428 35.5%, #172030 38.7%, #252a39 41.9%, #343440 45.2%, #443e45 48.4%, #4f4b4c 51.6%, #595756 54.8%, #64615f 58.1%, #726a63 61.3%, #817363 64.5%, #8f7b60 67.7%, #9b815d 71.0%, #a58758 74.2%, #ae8b52 77.4%, #b78d4a 80.6%, #be8e41 83.9%, #c48d39 87.1%, #c78a2f 90.3%, #c88624 93.5%, #c8811a 96.8%, #c97e10 100.0%);
background: linear-gradient(90deg in oklch, oklch(13.39% 0.0455 355.08) 0.0%, oklch(10.79% 0.0364 339.35) 3.2%, oklch(6.88% 0.0228 316.16) 6.5%, oklch(2.98% 0.0093 291.79) 9.7%, oklch(0.39% 0.0009 272.51) 12.9%, oklch(0.25% 0.0016 271.33) 16.1%, oklch(1.84% 0.0127 264.05) 19.4%, oklch(4.60% 0.0282 266.85) 22.6%, oklch(8.03% 0.0419 271.59) 25.8%, oklch(11.51% 0.0486 273.70) 29.0%, oklch(15.35% 0.0475 270.37) 32.3%, oklch(19.68% 0.0421 264.93) 35.5%, oklch(24.23% 0.0347 262.42) 38.7%, oklch(28.70% 0.0277 267.87) 41.9%, oklch(32.98% 0.0218 286.77) 45.2%, oklch(37.33% 0.0140 318.82) 48.4%, oklch(41.62% 0.0069 355.87) 51.6%, oklch(45.71% 0.0032 29.54) 54.8%, oklch(49.46% 0.0056 51.81) 58.1%, oklch(53.01% 0.0152 64.09) 61.3%, oklch(56.33% 0.0294 70.49) 64.5%, oklch(59.32% 0.0454 73.60) 67.7%, oklch(61.88% 0.0602 76.01) 71.0%, oklch(63.97% 0.0731 78.27) 74.2%, oklch(65.66% 0.0863 78.49) 77.4%, oklch(66.95% 0.0990 77.48) 80.6%, oklch(67.81% 0.1103 76.06) 83.9%, oklch(68.20% 0.1194 74.89) 87.1%, oklch(67.88% 0.1268 73.21) 90.3%, oklch(67.12% 0.1327 71.19) 93.5%, oklch(66.28% 0.1372 69.29) 96.8%, oklch(65.75% 0.1406 67.99) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.134 | 0.045 | 355.1 |
| 2 | 0 | 0 | 267.4 |
| 3 | 0.11 | 0.048 | 273.7 |
| 4 | 0.299 | 0.026 | 271.6 |
| 5 | 0.484 | 0.004 | 406.9 |
| 6 | 0.622 | 0.062 | 436.4 |
| 7 | 0.681 | 0.116 | 435.4 |
| 8 | 0.657 | 0.141 | 428 |

## In these collections

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

## Other forms

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