# Misty blue brown gradient

Monochrome gray to brown linear gradient with 32 colors: #a8bec8, #a4bec5, #a0bfc0, #9ec0b6, #a2bfa9, #aabb9a, #b4b48c, #baaa83, #b99f7b, #b09272, #a28366, #907359, #7e634b, #6d543f, #604836, #573e31, #533932, #523838, #533a42, #54404f, #53485c, #505166, #4d596c, #495e6c, #456168, #45625f, #486055, #4e5d4a, #545942, #59543d, #5d503b, #5f4d3b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome gray to brown linear gradient
- Seed: `kWyBSiXBUuTAOu88DKttw2sY`
- Page: https://grabient.com/kWyBSiXBUuTAOu88DKttw2sY?steps=32&angle=315
- Drawn as: linear gradient, 32 steps, 315 degrees
- Kinds: dark center, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#a8bec8` | `oklch(78.74% 0.0276 227.81)` | Juliet Blue | black, 10.8 to 1 |
| 2 | `#a4bec5` | `oklch(78.44% 0.0303 215.05)` | Clear Vista | black, 10.7 to 1 |
| 3 | `#a0bfc0` | `oklch(78.26% 0.0344 197.12)` | Frosty Glade | black, 10.7 to 1 |
| 4 | `#9ec0b6` | `oklch(78.06% 0.0393 175.73)` | Shadow Green | black, 10.6 to 1 |
| 5 | `#a2bfa9` | `oklch(77.70% 0.0445 152.56)` | Spring Reflection | black, 10.5 to 1 |
| 6 | `#aabb9a` | `oklch(77.03% 0.0494 129.31)` | Ash Tree | black, 10.2 to 1 |
| 7 | `#b4b48c` | `oklch(75.91% 0.0537 107.67)` | Sumptuous Sage | black, 9.8 to 1 |
| 8 | `#baaa83` | `oklch(74.20% 0.0567 89.36)` | Barbados Beige | black, 9.1 to 1 |
| 9 | `#b99f7b` | `oklch(71.73% 0.0580 76.03)` | Earthy Ochre | black, 8.3 to 1 |
| 10 | `#b09272` | `oklch(67.98% 0.0576 68.22)` | Buffalo Bill | black, 7.2 to 1 |
| 11 | `#a28366` | `oklch(63.14% 0.0558 64.48)` | New Chestnut | black, 5.9 to 1 |
| 12 | `#907359` | `oklch(57.66% 0.0531 63.19)` | Library Oak | black, 4.7 to 1 |
| 13 | `#7e634b` | `oklch(52.03% 0.0499 62.70)` | Old Boot | white, 5.5 to 1 |
| 14 | `#6d543f` | `oklch(46.71% 0.0465 61.41)` | Breakfast Blend | white, 6.9 to 1 |
| 15 | `#604836` | `oklch(42.15% 0.0434 57.68)` | Beauty Spot | white, 8.5 to 1 |
| 16 | `#573e31` | `oklch(38.84% 0.0409 49.87)` | Lounge Leather | white, 9.8 to 1 |
| 17 | `#533932` | `oklch(37.19% 0.0392 36.65)` | Ragtop | white, 10.5 to 1 |
| 18 | `#523838` | `oklch(37.05% 0.0380 18.98)` | Droëwors | white, 10.6 to 1 |
| 19 | `#533a42` | `oklch(38.05% 0.0370 357.98)` | Monarch Velvet | white, 10.1 to 1 |
| 20 | `#54404f` | `oklch(39.82% 0.0362 334.60)` | Punchit Purple | white, 9.4 to 1 |
| 21 | `#53485c` | `oklch(41.98% 0.0355 309.78)` | Mata Hari | white, 8.5 to 1 |
| 22 | `#505166` | `oklch(44.16% 0.0351 284.47)` | Inky Storm | white, 7.7 to 1 |
| 23 | `#4d596c` | `oklch(46.00% 0.0347 259.61)` | Midnight Sun | white, 7.1 to 1 |
| 24 | `#495e6c` | `oklch(47.12% 0.0345 236.16)` | Ragtime Blues | white, 6.7 to 1 |
| 25 | `#456168` | `oklch(47.37% 0.0344 213.65)` | Tempe Star | white, 6.6 to 1 |
| 26 | `#45625f` | `oklch(47.18% 0.0346 189.58)` | Brochantite Green | white, 6.6 to 1 |
| 27 | `#486055` | `oklch(46.68% 0.0349 164.81)` | Chalcedony Green | white, 6.7 to 1 |
| 28 | `#4e5d4a` | `oklch(45.96% 0.0354 140.36)` | Fresh Pine | white, 7 to 1 |
| 29 | `#545942` | `oklch(45.16% 0.0360 117.22)` | Pinetop | white, 7.3 to 1 |
| 30 | `#59543d` | `oklch(44.37% 0.0365 96.40)` | Batu Cave | white, 7.6 to 1 |
| 31 | `#5d503b` | `oklch(43.72% 0.0369 78.92)` | Arrow Shaft | white, 7.8 to 1 |
| 32 | `#5f4d3b` | `oklch(43.31% 0.0372 65.78)` | Half-Caff | white, 8 to 1 |

## CSS

```css
background: linear-gradient(315deg, #a8bec8 0.0%, #a4bec5 3.2%, #a0bfc0 6.5%, #9ec0b6 9.7%, #a2bfa9 12.9%, #aabb9a 16.1%, #b4b48c 19.4%, #baaa83 22.6%, #b99f7b 25.8%, #b09272 29.0%, #a28366 32.3%, #907359 35.5%, #7e634b 38.7%, #6d543f 41.9%, #604836 45.2%, #573e31 48.4%, #533932 51.6%, #523838 54.8%, #533a42 58.1%, #54404f 61.3%, #53485c 64.5%, #505166 67.7%, #4d596c 71.0%, #495e6c 74.2%, #456168 77.4%, #45625f 80.6%, #486055 83.9%, #4e5d4a 87.1%, #545942 90.3%, #59543d 93.5%, #5d503b 96.8%, #5f4d3b 100.0%);
background: linear-gradient(315deg in oklch, oklch(78.74% 0.0276 227.81) 0.0%, oklch(78.44% 0.0303 215.05) 3.2%, oklch(78.26% 0.0344 197.12) 6.5%, oklch(78.06% 0.0393 175.73) 9.7%, oklch(77.70% 0.0445 152.56) 12.9%, oklch(77.03% 0.0494 129.31) 16.1%, oklch(75.91% 0.0537 107.67) 19.4%, oklch(74.20% 0.0567 89.36) 22.6%, oklch(71.73% 0.0580 76.03) 25.8%, oklch(67.98% 0.0576 68.22) 29.0%, oklch(63.14% 0.0558 64.48) 32.3%, oklch(57.66% 0.0531 63.19) 35.5%, oklch(52.03% 0.0499 62.70) 38.7%, oklch(46.71% 0.0465 61.41) 41.9%, oklch(42.15% 0.0434 57.68) 45.2%, oklch(38.84% 0.0409 49.87) 48.4%, oklch(37.19% 0.0392 36.65) 51.6%, oklch(37.05% 0.0380 18.98) 54.8%, oklch(38.05% 0.0370 357.98) 58.1%, oklch(39.82% 0.0362 334.60) 61.3%, oklch(41.98% 0.0355 309.78) 64.5%, oklch(44.16% 0.0351 284.47) 67.7%, oklch(46.00% 0.0347 259.61) 71.0%, oklch(47.12% 0.0345 236.16) 74.2%, oklch(47.37% 0.0344 213.65) 77.4%, oklch(47.18% 0.0346 189.58) 80.6%, oklch(46.68% 0.0349 164.81) 83.9%, oklch(45.96% 0.0354 140.36) 87.1%, oklch(45.16% 0.0360 117.22) 90.3%, oklch(44.37% 0.0365 96.40) 93.5%, oklch(43.72% 0.0369 78.92) 96.8%, oklch(43.31% 0.0372 65.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.787 | 0.028 | 227.8 |
| 2 | 0.724 | 0.058 | 78.8 |
| 3 | 0.378 | 0.04 | 43.9 |
| 4 | 0.472 | 0.034 | -129.4 |
| 5 | 0.433 | 0.037 | -294.2 |

## In these collections

- [Lo-fi](https://grabient.com/lo-fi)

## Other forms

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