# Complementary brown, gray and blue linear gradient

Complementary brown, gray and blue linear gradient with 32 colors: #b87534, #b67233, #b36e32, #af6930, #ab642f, #a75e2e, #a25a2e, #9c552e, #96512e, #8f4d2d, #88492d, #82462e, #7b4330, #754033, #6e3e36, #663d39, #5f3c3c, #583c3e, #523b40, #4e3b43, #4b3b46, #473c4a, #433e4e, #3f4052, #3a4355, #374557, #36495a, #364d5d, #365162, #375566, #38596a, #385b6d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYnlQsRKg-bgdvowCztMQyzzmSPO`
- Page: https://grabient.com/kYnlQsRKg-bgdvowCztMQyzzmSPO?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.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 | `#b87534` | `oklch(62.20% 0.1157 61.88)` | Copper | black, 5.6 to 1 |
| 2 | `#b67233` | `oklch(61.36% 0.1154 60.54)` | Copper | black, 5.4 to 1 |
| 3 | `#b36e32` | `oklch(60.21% 0.1152 58.69)` | Reno Sand | black, 5.1 to 1 |
| 4 | `#af6930` | `oklch(58.83% 0.1149 56.49)` | Tanooki Suit Brown | black, 4.8 to 1 |
| 5 | `#ab642f` | `oklch(57.32% 0.1141 54.13)` | Autumn Surprise | black, 4.5 to 1 |
| 6 | `#a75e2e` | `oklch(55.76% 0.1129 51.77)` | Beef Hotpot | white, 4.8 to 1 |
| 7 | `#a25a2e` | `oklch(54.23% 0.1108 49.59)` | Glazed Ginger | white, 5.2 to 1 |
| 8 | `#9c552e` | `oklch(52.72% 0.1078 47.84)` | Warmth | white, 5.5 to 1 |
| 9 | `#96512e` | `oklch(51.09% 0.1042 46.56)` | Leather Brown | white, 5.9 to 1 |
| 10 | `#8f4d2d` | `oklch(49.40% 0.1000 45.41)` | Gingerbread | white, 6.4 to 1 |
| 11 | `#88492d` | `oklch(47.72% 0.0952 44.02)` | Two Cents | white, 6.8 to 1 |
| 12 | `#82462e` | `oklch(46.11% 0.0898 42.03)` | Hammered Copper | white, 7.3 to 1 |
| 13 | `#7b4330` | `oklch(44.63% 0.0838 39.09)` | Medium Tuscan Red | white, 7.8 to 1 |
| 14 | `#754033` | `oklch(43.32% 0.0770 35.14)` | Lava Core | white, 8.2 to 1 |
| 15 | `#6e3e36` | `oklch(42.04% 0.0683 31.00)` | Metallic Copper | white, 8.7 to 1 |
| 16 | `#663d39` | `oklch(40.84% 0.0587 26.35)` | Chipotle Paste | white, 9.1 to 1 |
| 17 | `#5f3c3c` | `oklch(39.76% 0.0489 20.75)` | Wine Brown | white, 9.5 to 1 |
| 18 | `#583c3e` | `oklch(38.83% 0.0401 13.74)` | Ancient Prunus | white, 9.8 to 1 |
| 19 | `#523b40` | `oklch(38.11% 0.0332 4.87)` | Charred Chocolate | white, 10.1 to 1 |
| 20 | `#4e3b43` | `oklch(37.63% 0.0290 353.50)` | Peacock Purple | white, 10.3 to 1 |
| 21 | `#4b3b46` | `oklch(37.38% 0.0273 338.09)` | Funkie Friday | white, 10.4 to 1 |
| 22 | `#473c4a` | `oklch(37.31% 0.0274 319.86)` | Funkie Friday | white, 10.4 to 1 |
| 23 | `#433e4e` | `oklch(37.43% 0.0288 300.56)` | Italian Grape | white, 10.3 to 1 |
| 24 | `#3f4052` | `oklch(37.71% 0.0308 281.98)` | Blueberry Tart | white, 10.1 to 1 |
| 25 | `#3a4355` | `oklch(38.14% 0.0330 265.88)` | Blue Zodiac | white, 9.9 to 1 |
| 26 | `#374557` | `oklch(38.71% 0.0348 253.97)` | Aristocratic Blue | white, 9.7 to 1 |
| 27 | `#36495a` | `oklch(39.61% 0.0369 245.82)` | Dilly Blue | white, 9.3 to 1 |
| 28 | `#364d5d` | `oklch(40.79% 0.0396 240.24)` | Ingénue Blue | white, 8.8 to 1 |
| 29 | `#365162` | `oklch(42.11% 0.0426 236.58)` | Sailing Safari | white, 8.3 to 1 |
| 30 | `#375566` | `oklch(43.40% 0.0455 234.19)` | Summer Night | white, 7.8 to 1 |
| 31 | `#38596a` | `oklch(44.51% 0.0479 232.41)` | Indian Teal | white, 7.5 to 1 |
| 32 | `#385b6d` | `oklch(45.28% 0.0496 230.60)` | Blue Spell | white, 7.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b87534 0.0%, #b67233 3.2%, #b36e32 6.5%, #af6930 9.7%, #ab642f 12.9%, #a75e2e 16.1%, #a25a2e 19.4%, #9c552e 22.6%, #96512e 25.8%, #8f4d2d 29.0%, #88492d 32.3%, #82462e 35.5%, #7b4330 38.7%, #754033 41.9%, #6e3e36 45.2%, #663d39 48.4%, #5f3c3c 51.6%, #583c3e 54.8%, #523b40 58.1%, #4e3b43 61.3%, #4b3b46 64.5%, #473c4a 67.7%, #433e4e 71.0%, #3f4052 74.2%, #3a4355 77.4%, #374557 80.6%, #36495a 83.9%, #364d5d 87.1%, #365162 90.3%, #375566 93.5%, #38596a 96.8%, #385b6d 100.0%);
background: linear-gradient(90deg in oklch, oklch(62.20% 0.1157 61.88) 0.0%, oklch(61.36% 0.1154 60.54) 3.2%, oklch(60.21% 0.1152 58.69) 6.5%, oklch(58.83% 0.1149 56.49) 9.7%, oklch(57.32% 0.1141 54.13) 12.9%, oklch(55.76% 0.1129 51.77) 16.1%, oklch(54.23% 0.1108 49.59) 19.4%, oklch(52.72% 0.1078 47.84) 22.6%, oklch(51.09% 0.1042 46.56) 25.8%, oklch(49.40% 0.1000 45.41) 29.0%, oklch(47.72% 0.0952 44.02) 32.3%, oklch(46.11% 0.0898 42.03) 35.5%, oklch(44.63% 0.0838 39.09) 38.7%, oklch(43.32% 0.0770 35.14) 41.9%, oklch(42.04% 0.0683 31.00) 45.2%, oklch(40.84% 0.0587 26.35) 48.4%, oklch(39.76% 0.0489 20.75) 51.6%, oklch(38.83% 0.0401 13.74) 54.8%, oklch(38.11% 0.0332 4.87) 58.1%, oklch(37.63% 0.0290 353.50) 61.3%, oklch(37.38% 0.0273 338.09) 64.5%, oklch(37.31% 0.0274 319.86) 67.7%, oklch(37.43% 0.0288 300.56) 71.0%, oklch(37.71% 0.0308 281.98) 74.2%, oklch(38.14% 0.0330 265.88) 77.4%, oklch(38.71% 0.0348 253.97) 80.6%, oklch(39.61% 0.0369 245.82) 83.9%, oklch(40.79% 0.0396 240.24) 87.1%, oklch(42.11% 0.0426 236.58) 90.3%, oklch(43.40% 0.0455 234.19) 93.5%, oklch(44.51% 0.0479 232.41) 96.8%, oklch(45.28% 0.0496 230.60) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.622 | 0.116 | 61.9 |
| 2 | 0.539 | 0.11 | 49.2 |
| 3 | 0.441 | 0.081 | 37.6 |
| 4 | 0.378 | 0.03 | -1.5 |
| 5 | 0.386 | 0.034 | -104 |
| 6 | 0.453 | 0.05 | -129.4 |

## In these collections

- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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