# Black, navy, brown and orange linear gradient

Black, navy, brown and orange linear gradient with 14 colors: #150109, #010002, #000000, #000004, #04061c, #161f30, #393742, #565353, #736b63, #957e5f, #ad8a53, #c08e3f, #c78828, #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=14
- Drawn as: linear gradient, 14 steps, 90 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.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 | `#150109` | `oklch(13.39% 0.0455 355.08)` | Glossy Black | white, 20.1 to 1 |
| 2 | `#010002` | `oklch(5.31% 0.0173 306.59)` | Binary Black | white, 20.9 to 1 |
| 3 | `#000000` | `oklch(0.08% 0.0005 282.30)` | Black | white, 20.9 to 1 |
| 4 | `#000004` | `oklch(5.10% 0.0305 267.60)` | Binary Black | white, 20.9 to 1 |
| 5 | `#04061c` | `oklch(13.50% 0.0487 272.47)` | Melanophobia | white, 20 to 1 |
| 6 | `#161f30` | `oklch(23.88% 0.0353 262.39)` | Hēi Sè Black | white, 16.5 to 1 |
| 7 | `#393742` | `oklch(34.32% 0.0195 295.59)` | Black Marlin | white, 11.6 to 1 |
| 8 | `#565353` | `oklch(44.49% 0.0038 20.05)` | Black Space | white, 7.6 to 1 |
| 9 | `#736b63` | `oklch(53.27% 0.0162 64.76)` | Shot-Put | white, 5.2 to 1 |
| 10 | `#957e5f` | `oklch(60.57% 0.0525 74.64)` | Dapper Tan | black, 5.4 to 1 |
| 11 | `#ad8a53` | `oklch(65.43% 0.0843 78.56)` | Limed Oak | black, 6.5 to 1 |
| 12 | `#c08e3f` | `oklch(67.95% 0.1126 75.76)` | Pizza | black, 7.1 to 1 |
| 13 | `#c78828` | `oklch(67.44% 0.1306 71.98)` | Gentleman’s Whiskey | black, 6.9 to 1 |
| 14 | `#c97e10` | `oklch(65.75% 0.1406 67.99)` | Bamboo Brown | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #150109 0.0%, #010002 7.7%, #000000 15.4%, #000004 23.1%, #04061c 30.8%, #161f30 38.5%, #393742 46.2%, #565353 53.8%, #736b63 61.5%, #957e5f 69.2%, #ad8a53 76.9%, #c08e3f 84.6%, #c78828 92.3%, #c97e10 100.0%);
background: linear-gradient(90deg in oklch, oklch(13.39% 0.0455 355.08) 0.0%, oklch(5.31% 0.0173 306.59) 7.7%, oklch(0.08% 0.0005 282.30) 15.4%, oklch(5.10% 0.0305 267.60) 23.1%, oklch(13.50% 0.0487 272.47) 30.8%, oklch(23.88% 0.0353 262.39) 38.5%, oklch(34.32% 0.0195 295.59) 46.2%, oklch(44.49% 0.0038 20.05) 53.8%, oklch(53.27% 0.0162 64.76) 61.5%, oklch(60.57% 0.0525 74.64) 69.2%, oklch(65.43% 0.0843 78.56) 76.9%, oklch(67.95% 0.1126 75.76) 84.6%, oklch(67.44% 0.1306 71.98) 92.3%, 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=14)
- [PNG](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.png?steps=14)
- [SVG](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.svg?steps=14)
- [CSS](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.css?steps=14)
- [ASE](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.ase?steps=14)
- [GPL](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.gpl?steps=14)
- [GRD](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.grd?steps=14)
- [Design tokens](https://grabient.com/kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A.tokens.json?steps=14)
- [Social card](https://grabient.com/api/og?seed=kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A&steps=14)
- [Palettes like this one](https://grabient.com/palettes?q=kcIiH8gAA1g4RwKmCb-vYHP88Ww3Wqj_U7M_A)
- [Guide for agents](https://grabient.com/llms.txt)