# Tan and stone beige palette

The Tan and stone beige palette brings together light gray, off-white, and light orange. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is light gray, and its lightest tone is off-white.

- Also called: Gray and white angular gradient
- Seed: `kYwBA3aodAXUFwH5BUBb4g_eSJv4`
- Page: https://grabient.com/kYwBA3aodAXUFwH5BUBb4g_eSJv4?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: neutral, light, warm
- Hues: achromatic
- Contrast of its darkest and lightest colors: 1.9 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 | `#b8aea1` | `oklch(75.59% 0.0220 77.34)` | Marshy Habitat | black, 9.6 to 1 |
| 2 | `#bab1a3` | `oklch(76.46% 0.0218 77.66)` | Stonelake | black, 9.9 to 1 |
| 3 | `#beb5a7` | `oklch(77.65% 0.0214 78.09)` | Sophistication | black, 10.3 to 1 |
| 4 | `#c2b9ac` | `oklch(79.06% 0.0210 78.61)` | City Dweller | black, 10.8 to 1 |
| 5 | `#c7beb1` | `oklch(80.59% 0.0205 79.18)` | Hearthstone | black, 11.4 to 1 |
| 6 | `#cbc3b6` | `oklch(82.13% 0.0200 79.79)` | Sculptor Clay | black, 12 to 1 |
| 7 | `#d0c8bb` | `oklch(83.59% 0.0194 80.39)` | Fossil Sand | black, 12.6 to 1 |
| 8 | `#d4cdc0` | `oklch(84.96% 0.0188 81.02)` | Porous Stone | black, 13.2 to 1 |
| 9 | `#d8d1c5` | `oklch(86.41% 0.0181 81.70)` | Mineral | black, 13.8 to 1 |
| 10 | `#ddd6cb` | `oklch(87.88% 0.0174 82.41)` | Pearl Oyster | black, 14.5 to 1 |
| 11 | `#e1dbd0` | `oklch(89.30% 0.0166 83.13)` | Merino | black, 15.2 to 1 |
| 12 | `#e5dfd4` | `oklch(90.61% 0.0159 83.84)` | Hourglass | black, 15.8 to 1 |
| 13 | `#e8e3d8` | `oklch(91.74% 0.0153 84.50)` | Moon Shell | black, 16.4 to 1 |
| 14 | `#ebe6dc` | `oklch(92.68% 0.0149 85.12)` | Elk Skin | black, 16.9 to 1 |
| 15 | `#eee9df` | `oklch(93.56% 0.0144 85.82)` | Palladian | black, 17.3 to 1 |
| 16 | `#f0ece2` | `oklch(94.35% 0.0139 86.52)` | Greek Villa | black, 17.8 to 1 |
| 17 | `#f2eee4` | `oklch(94.97% 0.0135 87.16)` | Atrium White | black, 18.1 to 1 |
| 18 | `#f3efe6` | `oklch(95.34% 0.0134 87.64)` | Whipped Cream | black, 18.3 to 1 |
| 19 | `#f4f0e6` | `oklch(95.41% 0.0135 87.90)` | Romance | black, 18.3 to 1 |
| 20 | `#f3eee4` | `oklch(95.10% 0.0140 87.85)` | Stonewashed Pink | black, 18.2 to 1 |
| 21 | `#f0ece1` | `oklch(94.33% 0.0151 87.44)` | Acoustic White | black, 17.7 to 1 |
| 22 | `#ede8dc` | `oklch(93.21% 0.0165 86.76)` | Hint of Vanilla | black, 17.1 to 1 |
| 23 | `#e9e3d7` | `oklch(91.85% 0.0181 85.94)` | Moon Shell | black, 16.4 to 1 |
| 24 | `#e5dfd1` | `oklch(90.37% 0.0197 85.06)` | Cotton Knit | black, 15.7 to 1 |
| 25 | `#e1dacb` | `oklch(88.90% 0.0211 84.23)` | Albescent | black, 15 to 1 |
| 26 | `#ddd5c6` | `oklch(87.53% 0.0222 83.56)` | Sonoran Sands | black, 14.4 to 1 |
| 27 | `#d9d0c1` | `oklch(86.06% 0.0232 82.96)` | Cool Concrete | black, 13.7 to 1 |
| 28 | `#d4cbbb` | `oklch(84.46% 0.0240 82.35)` | Shoreline Haze | black, 13 to 1 |
| 29 | `#cfc6b5` | `oklch(82.84% 0.0247 81.78)` | Lover’s Hideaway | black, 12.3 to 1 |
| 30 | `#cac1b0` | `oklch(81.33% 0.0253 81.26)` | Neutra | black, 11.7 to 1 |
| 31 | `#c7bdac` | `oklch(80.05% 0.0258 80.83)` | Aspen Branch | black, 11.2 to 1 |
| 32 | `#c4baa9` | `oklch(79.13% 0.0262 80.51)` | Castle Path | black, 10.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #b8aea1 0.0%, #bab1a3 3.2%, #beb5a7 6.5%, #c2b9ac 9.7%, #c7beb1 12.9%, #cbc3b6 16.1%, #d0c8bb 19.4%, #d4cdc0 22.6%, #d8d1c5 25.8%, #ddd6cb 29.0%, #e1dbd0 32.3%, #e5dfd4 35.5%, #e8e3d8 38.7%, #ebe6dc 41.9%, #eee9df 45.2%, #f0ece2 48.4%, #f2eee4 51.6%, #f3efe6 54.8%, #f4f0e6 58.1%, #f3eee4 61.3%, #f0ece1 64.5%, #ede8dc 67.7%, #e9e3d7 71.0%, #e5dfd1 74.2%, #e1dacb 77.4%, #ddd5c6 80.6%, #d9d0c1 83.9%, #d4cbbb 87.1%, #cfc6b5 90.3%, #cac1b0 93.5%, #c7bdac 96.8%, #c4baa9 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(75.59% 0.0220 77.34) 0.0%, oklch(76.46% 0.0218 77.66) 3.2%, oklch(77.65% 0.0214 78.09) 6.5%, oklch(79.06% 0.0210 78.61) 9.7%, oklch(80.59% 0.0205 79.18) 12.9%, oklch(82.13% 0.0200 79.79) 16.1%, oklch(83.59% 0.0194 80.39) 19.4%, oklch(84.96% 0.0188 81.02) 22.6%, oklch(86.41% 0.0181 81.70) 25.8%, oklch(87.88% 0.0174 82.41) 29.0%, oklch(89.30% 0.0166 83.13) 32.3%, oklch(90.61% 0.0159 83.84) 35.5%, oklch(91.74% 0.0153 84.50) 38.7%, oklch(92.68% 0.0149 85.12) 41.9%, oklch(93.56% 0.0144 85.82) 45.2%, oklch(94.35% 0.0139 86.52) 48.4%, oklch(94.97% 0.0135 87.16) 51.6%, oklch(95.34% 0.0134 87.64) 54.8%, oklch(95.41% 0.0135 87.90) 58.1%, oklch(95.10% 0.0140 87.85) 61.3%, oklch(94.33% 0.0151 87.44) 64.5%, oklch(93.21% 0.0165 86.76) 67.7%, oklch(91.85% 0.0181 85.94) 71.0%, oklch(90.37% 0.0197 85.06) 74.2%, oklch(88.90% 0.0211 84.23) 77.4%, oklch(87.53% 0.0222 83.56) 80.6%, oklch(86.06% 0.0232 82.96) 83.9%, oklch(84.46% 0.0240 82.35) 87.1%, oklch(82.84% 0.0247 81.78) 90.3%, oklch(81.33% 0.0253 81.26) 93.5%, oklch(80.05% 0.0258 80.83) 96.8%, oklch(79.13% 0.0262 80.51) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.756 | 0.022 | 77.3 |
| 2 | 0.839 | 0.019 | 80.5 |
| 3 | 0.921 | 0.015 | 84.7 |
| 4 | 0.953 | 0.014 | 87.9 |
| 5 | 0.878 | 0.022 | 83.7 |
| 6 | 0.791 | 0.026 | 80.5 |

## In these collections

- [Beige](https://grabient.com/beige)

## Other forms

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