# Analogous brown, orange and tan linear swatches

Analogous brown, orange and tan linear swatches with 32 colors: #371300, #3c1500, #421700, #4a1a00, #531d00, #5c2100, #662502, #702905, #7b2e09, #85320c, #8e370f, #973c11, #a04012, #a94512, #b24a10, #bb4f0d, #c45509, #cc5b04, #d46100, #db6800, #e27000, #e87908, #ec8317, #f08e26, #f39935, #f6a544, #f8b054, #f9bb63, #fac571, #fbcd7d, #fcd488, #fdda90. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUPTMiOq8_Na9wXypMOA`
- Page: https://grabient.com/kUPTMiOq8_Na9wXypMOA?style=linearSwatches&steps=32
- Drawn as: linear swatches, 32 steps, 90 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.4 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 | `#371300` | `oklch(24.02% 0.0660 47.38)` | Chocolate Melange | white, 16.7 to 1 |
| 2 | `#3c1500` | `oklch(25.28% 0.0699 47.00)` | American Bronze | white, 16.1 to 1 |
| 3 | `#421700` | `oklch(26.90% 0.0751 46.39)` | Bath in Chocolate | white, 15.4 to 1 |
| 4 | `#4a1a00` | `oklch(28.81% 0.0815 45.62)` | Chocolate Rush | white, 14.5 to 1 |
| 5 | `#531d00` | `oklch(30.95% 0.0889 44.75)` | Evil Cigar | white, 13.6 to 1 |
| 6 | `#5c2100` | `oklch(33.26% 0.0963 44.00)` | Conker Brown | white, 12.5 to 1 |
| 7 | `#662502` | `oklch(35.69% 0.1030 43.11)` | Raw Chocolate | white, 11.4 to 1 |
| 8 | `#702905` | `oklch(38.17% 0.1098 42.33)` | Chestnut | white, 10.4 to 1 |
| 9 | `#7b2e09` | `oklch(40.65% 0.1163 41.74)` | Reddish Brown | white, 9.4 to 1 |
| 10 | `#85320c` | `oklch(43.06% 0.1224 41.41)` | Rogan Josh | white, 8.5 to 1 |
| 11 | `#8e370f` | `oklch(45.34% 0.1279 41.39)` | Citrine Brown | white, 7.7 to 1 |
| 12 | `#973c11` | `oklch(47.49% 0.1329 41.72)` | Hot Brown | white, 7 to 1 |
| 13 | `#a04012` | `oklch(49.62% 0.1383 42.24)` | Powdered Coffee | white, 6.4 to 1 |
| 14 | `#a94512` | `oklch(51.75% 0.1439 42.95)` | Rusted Lock | white, 5.9 to 1 |
| 15 | `#b24a10` | `oklch(53.89% 0.1496 43.84)` | Beef Bourguignon | white, 5.4 to 1 |
| 16 | `#bb4f0d` | `oklch(56.02% 0.1550 44.90)` | Crustose Lichen | white, 4.9 to 1 |
| 17 | `#c45509` | `oklch(58.15% 0.1599 46.14)` | Rust Orange | black, 4.6 to 1 |
| 18 | `#cc5b04` | `oklch(60.29% 0.1641 47.55)` | Rusty Orange | black, 5 to 1 |
| 19 | `#d46100` | `oklch(62.42% 0.1672 49.11)` | Exuberance | black, 5.5 to 1 |
| 20 | `#db6800` | `oklch(64.55% 0.1686 50.86)` | Apple II Chocolate | black, 6 to 1 |
| 21 | `#e27000` | `oklch(66.69% 0.1698 52.77)` | Accent Orange | black, 6.5 to 1 |
| 22 | `#e87908` | `oklch(68.83% 0.1689 54.89)` | Pumpkin Cat | black, 7.1 to 1 |
| 23 | `#ec8317` | `oklch(71.11% 0.1654 57.45)` | Rè Dài Chéng Orange | black, 7.8 to 1 |
| 24 | `#f08e26` | `oklch(73.52% 0.1599 60.46)` | Carrot Orange | black, 8.5 to 1 |
| 25 | `#f39935` | `oklch(76.00% 0.1529 63.79)` | Amber Glow | black, 9.4 to 1 |
| 26 | `#f6a544` | `oklch(78.48% 0.1448 67.30)` | O’Brien Orange | black, 10.3 to 1 |
| 27 | `#f8b054` | `oklch(80.91% 0.1361 70.86)` | Flare | black, 11.3 to 1 |
| 28 | `#f9bb63` | `oklch(83.23% 0.1273 74.34)` | Cochin Chicken | black, 12.3 to 1 |
| 29 | `#fac571` | `oklch(85.37% 0.1188 77.60)` | Liquid Gold | black, 13.2 to 1 |
| 30 | `#fbcd7d` | `oklch(87.28% 0.1112 80.52)` | Afternoon | black, 14.1 to 1 |
| 31 | `#fcd488` | `oklch(88.89% 0.1050 82.97)` | Oberon | black, 14.9 to 1 |
| 32 | `#fdda90` | `oklch(90.16% 0.1006 84.80)` | Cha-Cha-Cha | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #371300 0.000% 3.125%, #3c1500 3.125% 6.250%, #421700 6.250% 9.375%, #4a1a00 9.375% 12.500%, #531d00 12.500% 15.625%, #5c2100 15.625% 18.750%, #662502 18.750% 21.875%, #702905 21.875% 25.000%, #7b2e09 25.000% 28.125%, #85320c 28.125% 31.250%, #8e370f 31.250% 34.375%, #973c11 34.375% 37.500%, #a04012 37.500% 40.625%, #a94512 40.625% 43.750%, #b24a10 43.750% 46.875%, #bb4f0d 46.875% 50.000%, #c45509 50.000% 53.125%, #cc5b04 53.125% 56.250%, #d46100 56.250% 59.375%, #db6800 59.375% 62.500%, #e27000 62.500% 65.625%, #e87908 65.625% 68.750%, #ec8317 68.750% 71.875%, #f08e26 71.875% 75.000%, #f39935 75.000% 78.125%, #f6a544 78.125% 81.250%, #f8b054 81.250% 84.375%, #f9bb63 84.375% 87.500%, #fac571 87.500% 90.625%, #fbcd7d 90.625% 93.750%, #fcd488 93.750% 96.875%, #fdda90 96.875% 100.000%);
background: linear-gradient(90deg, oklch(24.02% 0.0660 47.38) 0.000% 3.125%, oklch(25.28% 0.0699 47.00) 3.125% 6.250%, oklch(26.90% 0.0751 46.39) 6.250% 9.375%, oklch(28.81% 0.0815 45.62) 9.375% 12.500%, oklch(30.95% 0.0889 44.75) 12.500% 15.625%, oklch(33.26% 0.0963 44.00) 15.625% 18.750%, oklch(35.69% 0.1030 43.11) 18.750% 21.875%, oklch(38.17% 0.1098 42.33) 21.875% 25.000%, oklch(40.65% 0.1163 41.74) 25.000% 28.125%, oklch(43.06% 0.1224 41.41) 28.125% 31.250%, oklch(45.34% 0.1279 41.39) 31.250% 34.375%, oklch(47.49% 0.1329 41.72) 34.375% 37.500%, oklch(49.62% 0.1383 42.24) 37.500% 40.625%, oklch(51.75% 0.1439 42.95) 40.625% 43.750%, oklch(53.89% 0.1496 43.84) 43.750% 46.875%, oklch(56.02% 0.1550 44.90) 46.875% 50.000%, oklch(58.15% 0.1599 46.14) 50.000% 53.125%, oklch(60.29% 0.1641 47.55) 53.125% 56.250%, oklch(62.42% 0.1672 49.11) 56.250% 59.375%, oklch(64.55% 0.1686 50.86) 59.375% 62.500%, oklch(66.69% 0.1698 52.77) 62.500% 65.625%, oklch(68.83% 0.1689 54.89) 65.625% 68.750%, oklch(71.11% 0.1654 57.45) 68.750% 71.875%, oklch(73.52% 0.1599 60.46) 71.875% 75.000%, oklch(76.00% 0.1529 63.79) 75.000% 78.125%, oklch(78.48% 0.1448 67.30) 78.125% 81.250%, oklch(80.91% 0.1361 70.86) 81.250% 84.375%, oklch(83.23% 0.1273 74.34) 84.375% 87.500%, oklch(85.37% 0.1188 77.60) 87.500% 90.625%, oklch(87.28% 0.1112 80.52) 90.625% 93.750%, oklch(88.89% 0.1050 82.97) 93.750% 96.875%, oklch(90.16% 0.1006 84.80) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.07 | 47.8 |
| 2 | 0.461 | 0.13 | 41.5 |
| 3 | 0.681 | 0.169 | 54.2 |
| 4 | 0.902 | 0.101 | 84.8 |

## In these collections

- [Thanksgiving gradients](https://grabient.com/thanksgiving-gradients)

## Other forms

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