# Analogous black, brown and orange angular swatches

Analogous black, brown and orange angular swatches with 28 colors: #000000, #000000, #000000, #010101, #020404, #050a07, #0c110b, #17190f, #232113, #2f2817, #3d2f1c, #4b3821, #5b4126, #6b4b2a, #7b552e, #8a6031, #996933, #a77235, #b37a38, #bf803b, #c9863d, #d38a3f, #db8f40, #e29241, #e89642, #ee9843, #f39b43, #f79d44. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUAAC6I4srM-nvbiNb9A`
- Page: https://grabient.com/kUAAC6I4srM-nvbiNb9A?style=angularSwatches&steps=28
- Drawn as: angular swatches, 28 steps, 90 degrees
- Kinds: dark to light, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 9.8 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 | `#000000` | `oklch(0.00% 0.0000 0.00)` | Black | white, 21 to 1 |
| 2 | `#000000` | `oklch(1.84% 0.0018 248.91)` | Black | white, 20.9 to 1 |
| 3 | `#000000` | `oklch(4.20% 0.0038 231.37)` | Black | white, 20.9 to 1 |
| 4 | `#010101` | `oklch(7.00% 0.0061 210.29)` | Binary Black | white, 20.8 to 1 |
| 5 | `#020404` | `oklch(10.14% 0.0087 187.05)` | Armour Wash | white, 20.5 to 1 |
| 6 | `#050a07` | `oklch(13.54% 0.0119 163.00)` | Reversed Grey | white, 19.9 to 1 |
| 7 | `#0c110b` | `oklch(17.10% 0.0155 139.53)` | Sinister | white, 19 to 1 |
| 8 | `#17190f` | `oklch(20.75% 0.0198 117.98)` | Nightshade Berries | white, 17.7 to 1 |
| 9 | `#232113` | `oklch(24.40% 0.0247 99.73)` | Black Mesa | white, 16.2 to 1 |
| 10 | `#2f2817` | `oklch(27.95% 0.0303 86.14)` | Cocoa Brown | white, 14.6 to 1 |
| 11 | `#3d2f1c` | `oklch(31.62% 0.0371 77.09)` | Agrax Earthshade | white, 12.9 to 1 |
| 12 | `#4b3821` | `oklch(35.59% 0.0453 71.14)` | Café Noir | white, 11.1 to 1 |
| 13 | `#5b4126` | `oklch(39.75% 0.0544 67.71)` | Beech Brown | white, 9.4 to 1 |
| 14 | `#6b4b2a` | `oklch(43.99% 0.0641 66.21)` | Cafe Royale | white, 7.8 to 1 |
| 15 | `#7b552e` | `oklch(48.21% 0.0740 66.05)` | Arable Brown | white, 6.5 to 1 |
| 16 | `#8a6031` | `oklch(52.29% 0.0839 66.65)` | Rusty Coin | white, 5.5 to 1 |
| 17 | `#996933` | `oklch(56.12% 0.0932 67.42)` | Vintage Caramel | white, 4.7 to 1 |
| 18 | `#a77235` | `oklch(59.59% 0.1016 67.77)` | Digger’s Gold | black, 5.1 to 1 |
| 19 | `#b37a38` | `oklch(62.60% 0.1089 67.12)` | Durian | black, 5.7 to 1 |
| 20 | `#bf803b` | `oklch(65.18% 0.1151 65.90)` | Ginger Beer | black, 6.3 to 1 |
| 21 | `#c9863d` | `oklch(67.46% 0.1209 64.92)` | Gold Coast | black, 6.9 to 1 |
| 22 | `#d38a3f` | `oklch(69.48% 0.1261 64.15)` | Buried Treasure | black, 7.4 to 1 |
| 23 | `#db8f40` | `oklch(71.25% 0.1309 63.54)` | Suede Vest | black, 7.9 to 1 |
| 24 | `#e29241` | `oklch(72.79% 0.1351 63.07)` | Yellow Sumac | black, 8.4 to 1 |
| 25 | `#e89642` | `oklch(74.13% 0.1389 62.70)` | Colorado Peach | black, 8.8 to 1 |
| 26 | `#ee9843` | `oklch(75.29% 0.1422 62.39)` | Mandarin Essence | black, 9.2 to 1 |
| 27 | `#f39b43` | `oklch(76.30% 0.1451 62.12)` | Chat Orange | black, 9.5 to 1 |
| 28 | `#f79d44` | `oklch(77.17% 0.1474 61.84)` | Sunshade | black, 9.8 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #000000 0.000% 3.571%, #000000 3.571% 7.143%, #000000 7.143% 10.714%, #010101 10.714% 14.286%, #020404 14.286% 17.857%, #050a07 17.857% 21.429%, #0c110b 21.429% 25.000%, #17190f 25.000% 28.571%, #232113 28.571% 32.143%, #2f2817 32.143% 35.714%, #3d2f1c 35.714% 39.286%, #4b3821 39.286% 42.857%, #5b4126 42.857% 46.429%, #6b4b2a 46.429% 50.000%, #7b552e 50.000% 53.571%, #8a6031 53.571% 57.143%, #996933 57.143% 60.714%, #a77235 60.714% 64.286%, #b37a38 64.286% 67.857%, #bf803b 67.857% 71.429%, #c9863d 71.429% 75.000%, #d38a3f 75.000% 78.571%, #db8f40 78.571% 82.143%, #e29241 82.143% 85.714%, #e89642 85.714% 89.286%, #ee9843 89.286% 92.857%, #f39b43 92.857% 96.429%, #f79d44 96.429% 100.000%);
background: conic-gradient(from 90deg, oklch(0.00% 0.0000 0.00) 0.000% 3.571%, oklch(1.84% 0.0018 248.91) 3.571% 7.143%, oklch(4.20% 0.0038 231.37) 7.143% 10.714%, oklch(7.00% 0.0061 210.29) 10.714% 14.286%, oklch(10.14% 0.0087 187.05) 14.286% 17.857%, oklch(13.54% 0.0119 163.00) 17.857% 21.429%, oklch(17.10% 0.0155 139.53) 21.429% 25.000%, oklch(20.75% 0.0198 117.98) 25.000% 28.571%, oklch(24.40% 0.0247 99.73) 28.571% 32.143%, oklch(27.95% 0.0303 86.14) 32.143% 35.714%, oklch(31.62% 0.0371 77.09) 35.714% 39.286%, oklch(35.59% 0.0453 71.14) 39.286% 42.857%, oklch(39.75% 0.0544 67.71) 42.857% 46.429%, oklch(43.99% 0.0641 66.21) 46.429% 50.000%, oklch(48.21% 0.0740 66.05) 50.000% 53.571%, oklch(52.29% 0.0839 66.65) 53.571% 57.143%, oklch(56.12% 0.0932 67.42) 57.143% 60.714%, oklch(59.59% 0.1016 67.77) 60.714% 64.286%, oklch(62.60% 0.1089 67.12) 64.286% 67.857%, oklch(65.18% 0.1151 65.90) 67.857% 71.429%, oklch(67.46% 0.1209 64.92) 71.429% 75.000%, oklch(69.48% 0.1261 64.15) 75.000% 78.571%, oklch(71.25% 0.1309 63.54) 78.571% 82.143%, oklch(72.79% 0.1351 63.07) 82.143% 85.714%, oklch(74.13% 0.1389 62.70) 85.714% 89.286%, oklch(75.29% 0.1422 62.39) 89.286% 92.857%, oklch(76.30% 0.1451 62.12) 92.857% 96.429%, oklch(77.17% 0.1474 61.84) 96.429% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0 | 0 | 261.6 |
| 2 | 0.28 | 0.03 | 86.1 |
| 3 | 0.626 | 0.109 | 67.1 |
| 4 | 0.772 | 0.147 | 61.8 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)
- [Harvest gradients](https://grabient.com/harvest-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)

## Other forms

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