# Black, navy, orange and brown linear gradient

Black, navy, orange and brown linear gradient with 32 colors: #000107, #00000f, #00001c, #01002a, #01003d, #001342, #002353, #083762, #204c6b, #336275, #48797d, #679081, #8ca486, #afb38b, #c8bf8d, #ddc889, #edce7f, #f9d170, #ffcf6d, #ffc96d, #ffbd5b, #fdad3e, #f29c31, #e38823, #cf7111, #b65a00, #9a4300, #7d2d00, #591702, #340502, #160000, #040000. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcERi8Fyy_zqWO_hlTGb7C9OA3va4rz2CA29A`
- Page: https://grabient.com/kcERi8Fyy_zqWO_hlTGb7C9OA3va4rz2CA29A?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 14.3 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 | `#000107` | `oklch(6.69% 0.0331 264.38)` | Black Hole | white, 20.8 to 1 |
| 2 | `#00000f` | `oklch(8.17% 0.0502 264.85)` | Benthic Black | white, 20.8 to 1 |
| 3 | `#00001c` | `oklch(10.36% 0.0705 265.90)` | Hadopelagic Water | white, 20.6 to 1 |
| 4 | `#01002a` | `oklch(12.93% 0.0878 266.16)` | Midnight | white, 20.3 to 1 |
| 5 | `#01003d` | `oklch(16.39% 0.1128 264.75)` | Endless Galaxy | white, 19.6 to 1 |
| 6 | `#001342` | `oklch(20.91% 0.0931 261.46)` | Cetacean Blue | white, 17.9 to 1 |
| 7 | `#002353` | `oklch(26.71% 0.0965 257.44)` | Subnautical | white, 15.3 to 1 |
| 8 | `#083762` | `oklch(33.30% 0.0902 251.56)` | Lost in Space | white, 12 to 1 |
| 9 | `#204c6b` | `oklch(40.23% 0.0712 242.06)` | Indigo Cloth | white, 9 to 1 |
| 10 | `#336275` | `oklch(47.02% 0.0596 226.86)` | Atlantis | white, 6.7 to 1 |
| 11 | `#48797d` | `oklch(54.28% 0.0538 201.94)` | Lucky Shamrock | white, 4.8 to 1 |
| 12 | `#679081` | `oklch(61.93% 0.0507 170.41)` | Stanford Green | black, 5.9 to 1 |
| 13 | `#8ca486` | `oklch(69.21% 0.0512 138.70)` | Gallery Green | black, 7.7 to 1 |
| 14 | `#afb38b` | `oklch(75.34% 0.0557 113.21)` | Sumptuous Sage | black, 9.6 to 1 |
| 15 | `#c8bf8d` | `oklch(79.92% 0.0663 98.60)` | Lime Peel | black, 11.2 to 1 |
| 16 | `#ddc889` | `oklch(83.54% 0.0841 91.64)` | 24 Karat | black, 12.6 to 1 |
| 17 | `#edce7f` | `oklch(86.12% 0.1048 88.91)` | Choux à la Crème | black, 13.7 to 1 |
| 18 | `#f9d170` | `oklch(87.55% 0.1238 87.17)` | Summer Lily | black, 14.3 to 1 |
| 19 | `#ffcf6d` | `oklch(87.70% 0.1280 83.39)` | Faded Sunlight | black, 14.3 to 1 |
| 20 | `#ffc96d` | `oklch(86.51% 0.1256 78.93)` | Chanterelle | black, 13.7 to 1 |
| 21 | `#ffbd5b` | `oklch(84.12% 0.1367 74.73)` | Honey Crusted Chicken | black, 12.6 to 1 |
| 22 | `#fdad3e` | `oklch(80.66% 0.1524 70.59)` | Peach Butter | black, 11.2 to 1 |
| 23 | `#f29c31` | `oklch(76.28% 0.1530 66.33)` | Amber Glow | black, 9.5 to 1 |
| 24 | `#e38823` | `oklch(70.87% 0.1521 61.95)` | Sumac Dyed | black, 7.8 to 1 |
| 25 | `#cf7111` | `oklch(64.25% 0.1497 57.58)` | Autumn Maple | black, 6 to 1 |
| 26 | `#b65a00` | `oklch(56.82% 0.1441 53.07)` | Elm Brown Red | white, 4.7 to 1 |
| 27 | `#9a4300` | `oklch(48.99% 0.1326 48.38)` | Roux | white, 6.6 to 1 |
| 28 | `#7d2d00` | `oklch(40.91% 0.1206 43.26)` | Reddish Brown | white, 9.3 to 1 |
| 29 | `#591702` | `oklch(31.35% 0.1016 37.24)` | Baragon Brown | white, 13.5 to 1 |
| 30 | `#340502` | `oklch(21.35% 0.0765 30.88)` | 3AM Breakup | white, 17.9 to 1 |
| 31 | `#160000` | `oklch(12.62% 0.0514 26.48)` | Dark Matter | white, 20.2 to 1 |
| 32 | `#040000` | `oklch(6.83% 0.0280 28.74)` | Binary Black | white, 20.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000107 0.0%, #00000f 3.2%, #00001c 6.5%, #01002a 9.7%, #01003d 12.9%, #001342 16.1%, #002353 19.4%, #083762 22.6%, #204c6b 25.8%, #336275 29.0%, #48797d 32.3%, #679081 35.5%, #8ca486 38.7%, #afb38b 41.9%, #c8bf8d 45.2%, #ddc889 48.4%, #edce7f 51.6%, #f9d170 54.8%, #ffcf6d 58.1%, #ffc96d 61.3%, #ffbd5b 64.5%, #fdad3e 67.7%, #f29c31 71.0%, #e38823 74.2%, #cf7111 77.4%, #b65a00 80.6%, #9a4300 83.9%, #7d2d00 87.1%, #591702 90.3%, #340502 93.5%, #160000 96.8%, #040000 100.0%);
background: linear-gradient(90deg in oklch, oklch(6.69% 0.0331 264.38) 0.0%, oklch(8.17% 0.0502 264.85) 3.2%, oklch(10.36% 0.0705 265.90) 6.5%, oklch(12.93% 0.0878 266.16) 9.7%, oklch(16.39% 0.1128 264.75) 12.9%, oklch(20.91% 0.0931 261.46) 16.1%, oklch(26.71% 0.0965 257.44) 19.4%, oklch(33.30% 0.0902 251.56) 22.6%, oklch(40.23% 0.0712 242.06) 25.8%, oklch(47.02% 0.0596 226.86) 29.0%, oklch(54.28% 0.0538 201.94) 32.3%, oklch(61.93% 0.0507 170.41) 35.5%, oklch(69.21% 0.0512 138.70) 38.7%, oklch(75.34% 0.0557 113.21) 41.9%, oklch(79.92% 0.0663 98.60) 45.2%, oklch(83.54% 0.0841 91.64) 48.4%, oklch(86.12% 0.1048 88.91) 51.6%, oklch(87.55% 0.1238 87.17) 54.8%, oklch(87.70% 0.1280 83.39) 58.1%, oklch(86.51% 0.1256 78.93) 61.3%, oklch(84.12% 0.1367 74.73) 64.5%, oklch(80.66% 0.1524 70.59) 67.7%, oklch(76.28% 0.1530 66.33) 71.0%, oklch(70.87% 0.1521 61.95) 74.2%, oklch(64.25% 0.1497 57.58) 77.4%, oklch(56.82% 0.1441 53.07) 80.6%, oklch(48.99% 0.1326 48.38) 83.9%, oklch(40.91% 0.1206 43.26) 87.1%, oklch(31.35% 0.1016 37.24) 90.3%, oklch(21.35% 0.0765 30.88) 93.5%, oklch(12.62% 0.0514 26.48) 96.8%, oklch(6.83% 0.0280 28.74) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.067 | 0.033 | 264.4 |
| 2 | 0.181 | 0.123 | 263.3 |
| 3 | 0.461 | 0.061 | 229.5 |
| 4 | 0.768 | 0.058 | 108 |
| 5 | 0.878 | 0.134 | 84.7 |
| 6 | 0.756 | 0.153 | 65.7 |
| 7 | 0.445 | 0.13 | 45.6 |
| 8 | 0.063 | 0.037 | 21.3 |

## In these collections

- [Multicolor gradients](https://grabient.com/multicolor-gradients)

## Other forms

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