# Monochrome brown and black linear swatches

Monochrome brown and black linear swatches with 32 colors: #431617, #411517, #3f1416, #3d1316, #3a1215, #371114, #331013, #300f12, #2d0e11, #290d10, #260b0f, #230a0e, #20090d, #1d080c, #1a070b, #18070a, #150609, #140608, #120508, #100507, #0e0406, #0c0406, #0b0405, #090305, #080305, #070304, #060304, #050304, #050203, #040203, #040203, #030203. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSRTMPE4s-YuCPc`
- Page: https://grabient.com/kSRTMPE4s-YuCPc?style=linearSwatches&steps=32&angle=135
- Drawn as: linear swatches, 32 steps, 135 degrees
- Kinds: neutral, dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#431617` | `oklch(27.17% 0.0703 21.09)` | English Breakfast | white, 15.3 to 1 |
| 2 | `#411517` | `oklch(26.73% 0.0688 20.64)` | English Breakfast | white, 15.5 to 1 |
| 3 | `#3f1416` | `oklch(26.18% 0.0670 20.12)` | Dark Sienna | white, 15.8 to 1 |
| 4 | `#3d1316` | `oklch(25.54% 0.0648 19.52)` | Dark Sienna | white, 16.1 to 1 |
| 5 | `#3a1215` | `oklch(24.82% 0.0624 18.85)` | Dark Sienna | white, 16.4 to 1 |
| 6 | `#371114` | `oklch(24.04% 0.0598 18.13)` | Black Rooster | white, 16.7 to 1 |
| 7 | `#331013` | `oklch(23.20% 0.0570 17.35)` | Black Rooster | white, 17.1 to 1 |
| 8 | `#300f12` | `oklch(22.33% 0.0541 16.52)` | Dark Danger | white, 17.4 to 1 |
| 9 | `#2d0e11` | `oklch(21.43% 0.0511 15.66)` | Dark Danger | white, 17.7 to 1 |
| 10 | `#290d10` | `oklch(20.52% 0.0480 14.75)` | Italian Roast | white, 18.1 to 1 |
| 11 | `#260b0f` | `oklch(19.62% 0.0450 13.82)` | Italian Roast | white, 18.4 to 1 |
| 12 | `#230a0e` | `oklch(18.73% 0.0420 12.86)` | Italian Roast | white, 18.7 to 1 |
| 13 | `#20090d` | `oklch(17.88% 0.0391 11.88)` | Italian Roast | white, 19 to 1 |
| 14 | `#1d080c` | `oklch(17.08% 0.0363 10.90)` | Noir Fiction | white, 19.2 to 1 |
| 15 | `#1a070b` | `oklch(16.33% 0.0338 9.90)` | Noir Fiction | white, 19.4 to 1 |
| 16 | `#18070a` | `oklch(15.66% 0.0314 8.91)` | Noir Fiction | white, 19.6 to 1 |
| 17 | `#150609` | `oklch(15.06% 0.0293 7.90)` | Chyornyi Black | white, 19.7 to 1 |
| 18 | `#140608` | `oklch(14.50% 0.0272 6.81)` | Knight Rider | white, 19.8 to 1 |
| 19 | `#120508` | `oklch(13.96% 0.0252 5.62)` | Knight Rider | white, 19.9 to 1 |
| 20 | `#100507` | `oklch(13.43% 0.0232 4.36)` | Knight Rider | white, 20 to 1 |
| 21 | `#0e0406` | `oklch(12.93% 0.0213 3.05)` | Knight Rider | white, 20.1 to 1 |
| 22 | `#0c0406` | `oklch(12.46% 0.0194 1.70)` | Knight Rider | white, 20.2 to 1 |
| 23 | `#0b0405` | `oklch(12.00% 0.0176 0.34)` | Pupil | white, 20.3 to 1 |
| 24 | `#090305` | `oklch(11.57% 0.0158 358.98)` | Pupil | white, 20.4 to 1 |
| 25 | `#080305` | `oklch(11.16% 0.0142 357.64)` | Pupil | white, 20.4 to 1 |
| 26 | `#070304` | `oklch(10.78% 0.0126 356.34)` | Pupil | white, 20.5 to 1 |
| 27 | `#060304` | `oklch(10.43% 0.0111 355.10)` | Pupil | white, 20.5 to 1 |
| 28 | `#050304` | `oklch(10.10% 0.0098 353.94)` | Pupil | white, 20.5 to 1 |
| 29 | `#050203` | `oklch(9.79% 0.0085 352.87)` | Raven’s Coat | white, 20.6 to 1 |
| 30 | `#040203` | `oklch(9.52% 0.0074 351.93)` | Raven’s Coat | white, 20.6 to 1 |
| 31 | `#040203` | `oklch(9.27% 0.0064 351.11)` | Raven’s Coat | white, 20.6 to 1 |
| 32 | `#030203` | `oklch(9.06% 0.0055 350.45)` | Raven’s Coat | white, 20.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #431617 0.000% 3.125%, #411517 3.125% 6.250%, #3f1416 6.250% 9.375%, #3d1316 9.375% 12.500%, #3a1215 12.500% 15.625%, #371114 15.625% 18.750%, #331013 18.750% 21.875%, #300f12 21.875% 25.000%, #2d0e11 25.000% 28.125%, #290d10 28.125% 31.250%, #260b0f 31.250% 34.375%, #230a0e 34.375% 37.500%, #20090d 37.500% 40.625%, #1d080c 40.625% 43.750%, #1a070b 43.750% 46.875%, #18070a 46.875% 50.000%, #150609 50.000% 53.125%, #140608 53.125% 56.250%, #120508 56.250% 59.375%, #100507 59.375% 62.500%, #0e0406 62.500% 65.625%, #0c0406 65.625% 68.750%, #0b0405 68.750% 71.875%, #090305 71.875% 75.000%, #080305 75.000% 78.125%, #070304 78.125% 81.250%, #060304 81.250% 84.375%, #050304 84.375% 87.500%, #050203 87.500% 90.625%, #040203 90.625% 93.750%, #040203 93.750% 96.875%, #030203 96.875% 100.000%);
background: linear-gradient(135deg, oklch(27.17% 0.0703 21.09) 0.000% 3.125%, oklch(26.73% 0.0688 20.64) 3.125% 6.250%, oklch(26.18% 0.0670 20.12) 6.250% 9.375%, oklch(25.54% 0.0648 19.52) 9.375% 12.500%, oklch(24.82% 0.0624 18.85) 12.500% 15.625%, oklch(24.04% 0.0598 18.13) 15.625% 18.750%, oklch(23.20% 0.0570 17.35) 18.750% 21.875%, oklch(22.33% 0.0541 16.52) 21.875% 25.000%, oklch(21.43% 0.0511 15.66) 25.000% 28.125%, oklch(20.52% 0.0480 14.75) 28.125% 31.250%, oklch(19.62% 0.0450 13.82) 31.250% 34.375%, oklch(18.73% 0.0420 12.86) 34.375% 37.500%, oklch(17.88% 0.0391 11.88) 37.500% 40.625%, oklch(17.08% 0.0363 10.90) 40.625% 43.750%, oklch(16.33% 0.0338 9.90) 43.750% 46.875%, oklch(15.66% 0.0314 8.91) 46.875% 50.000%, oklch(15.06% 0.0293 7.90) 50.000% 53.125%, oklch(14.50% 0.0272 6.81) 53.125% 56.250%, oklch(13.96% 0.0252 5.62) 56.250% 59.375%, oklch(13.43% 0.0232 4.36) 59.375% 62.500%, oklch(12.93% 0.0213 3.05) 62.500% 65.625%, oklch(12.46% 0.0194 1.70) 65.625% 68.750%, oklch(12.00% 0.0176 0.34) 68.750% 71.875%, oklch(11.57% 0.0158 358.98) 71.875% 75.000%, oklch(11.16% 0.0142 357.64) 75.000% 78.125%, oklch(10.78% 0.0126 356.34) 78.125% 81.250%, oklch(10.43% 0.0111 355.10) 81.250% 84.375%, oklch(10.10% 0.0098 353.94) 84.375% 87.500%, oklch(9.79% 0.0085 352.87) 87.500% 90.625%, oklch(9.52% 0.0074 351.93) 90.625% 93.750%, oklch(9.27% 0.0064 351.11) 93.750% 96.875%, oklch(9.06% 0.0055 350.45) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.272 | 0.07 | 21.1 |
| 2 | 0.154 | 0.03 | 8.4 |
| 3 | 0.091 | 0.006 | -9.6 |

## In these collections

- [Black gradients](https://grabient.com/black-gradients)

## Other forms

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