# Warm gray and off-white linear swatches

Warm gray and off-white linear swatches with 32 colors: #755f53, #796357, #7d675b, #836d60, #897366, #8f7a6c, #978173, #9e897a, #a69181, #ae9a89, #b5a291, #bdaa98, #c4b2a0, #cbb9a7, #d1c0ad, #d6c6b3, #dbcbb8, #dfd0bd, #e3d4c1, #e6d8c5, #e9dcc9, #ecdfcd, #efe2d0, #f1e5d3, #f3e8d6, #f5ead9, #f6ecdc, #f8eede, #f9f0e0, #fbf2e2, #fcf4e4, #fdf5e6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSgBkjawvCnuIQU`
- Page: https://grabient.com/kSgBkjawvCnuIQU?style=linearSwatches&steps=32&angle=45
- Drawn as: linear swatches, 32 steps, 45 degrees
- Kinds: dark to light, neutral, light, warm
- Hues: achromatic
- Contrast of its darkest and lightest colors: 5.5 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 | `#755f53` | `oklch(50.39% 0.0344 49.22)` | Clove Brown | white, 5.9 to 1 |
| 2 | `#796357` | `oklch(51.66% 0.0344 50.04)` | Bear Hug | white, 5.6 to 1 |
| 3 | `#7d675b` | `oklch(53.26% 0.0343 51.07)` | Almond Truffle | white, 5.2 to 1 |
| 4 | `#836d60` | `oklch(55.13% 0.0342 52.28)` | Summer Sparrow | white, 4.8 to 1 |
| 5 | `#897366` | `oklch(57.24% 0.0341 53.63)` | Pine Bark | black, 4.7 to 1 |
| 6 | `#8f7a6c` | `oklch(59.55% 0.0340 55.11)` | Miami Spice | black, 5.1 to 1 |
| 7 | `#978173` | `oklch(62.00% 0.0339 56.68)` | Locomotion | black, 5.7 to 1 |
| 8 | `#9e897a` | `oklch(64.55% 0.0338 58.32)` | Sycamore Tan | black, 6.3 to 1 |
| 9 | `#a69181` | `oklch(67.17% 0.0336 60.01)` | Beach Cabana | black, 7 to 1 |
| 10 | `#ae9a89` | `oklch(69.80% 0.0335 61.72)` | Threshold Taupe | black, 7.7 to 1 |
| 11 | `#b5a291` | `oklch(72.40% 0.0333 63.42)` | Hickory | black, 8.5 to 1 |
| 12 | `#bdaa98` | `oklch(74.94% 0.0331 65.08)` | Western Sandstone | black, 9.3 to 1 |
| 13 | `#c4b2a0` | `oklch(77.35% 0.0328 66.68)` | Mink Haze | black, 10.2 to 1 |
| 14 | `#cbb9a7` | `oklch(79.61% 0.0326 68.19)` | Dhurrie Beige | black, 11 to 1 |
| 15 | `#d1c0ad` | `oklch(81.66% 0.0322 69.59)` | Merino Wool | black, 11.8 to 1 |
| 16 | `#d6c6b3` | `oklch(83.46% 0.0319 70.84)` | Cafe Latte | black, 12.5 to 1 |
| 17 | `#dbcbb8` | `oklch(84.99% 0.0315 71.95)` | Loft Light | black, 13.2 to 1 |
| 18 | `#dfd0bd` | `oklch(86.39% 0.0310 73.00)` | Dainty Lace | black, 13.8 to 1 |
| 19 | `#e3d4c1` | `oklch(87.67% 0.0304 74.01)` | Fine White Sand | black, 14.4 to 1 |
| 20 | `#e6d8c5` | `oklch(88.85% 0.0298 74.98)` | Sandcastle | black, 14.9 to 1 |
| 21 | `#e9dcc9` | `oklch(89.94% 0.0291 75.91)` | Aged Parchment | black, 15.5 to 1 |
| 22 | `#ecdfcd` | `oklch(90.93% 0.0284 76.79)` | Sausage Roll | black, 16 to 1 |
| 23 | `#efe2d0` | `oklch(91.84% 0.0276 77.63)` | Buckwheat Flour | black, 16.4 to 1 |
| 24 | `#f1e5d3` | `oklch(92.67% 0.0269 78.42)` | Original White | black, 16.8 to 1 |
| 25 | `#f3e8d6` | `oklch(93.43% 0.0261 79.17)` | Grey Linnet Egg | black, 17.2 to 1 |
| 26 | `#f5ead9` | `oklch(94.12% 0.0254 79.87)` | Total Recall | black, 17.6 to 1 |
| 27 | `#f6ecdc` | `oklch(94.75% 0.0247 80.52)` | Modern Ivory | black, 17.9 to 1 |
| 28 | `#f8eede` | `oklch(95.33% 0.0240 81.12)` | Starglider | black, 18.3 to 1 |
| 29 | `#f9f0e0` | `oklch(95.86% 0.0234 81.68)` | Desert Star | black, 18.6 to 1 |
| 30 | `#fbf2e2` | `oklch(96.35% 0.0229 82.18)` | Whitewashed Fence | black, 18.8 to 1 |
| 31 | `#fcf4e4` | `oklch(96.81% 0.0224 82.63)` | Historic Cream | black, 19.1 to 1 |
| 32 | `#fdf5e6` | `oklch(97.24% 0.0220 83.03)` | Old Lace | black, 19.3 to 1 |

## CSS

```css
background: linear-gradient(45deg, #755f53 0.000% 3.125%, #796357 3.125% 6.250%, #7d675b 6.250% 9.375%, #836d60 9.375% 12.500%, #897366 12.500% 15.625%, #8f7a6c 15.625% 18.750%, #978173 18.750% 21.875%, #9e897a 21.875% 25.000%, #a69181 25.000% 28.125%, #ae9a89 28.125% 31.250%, #b5a291 31.250% 34.375%, #bdaa98 34.375% 37.500%, #c4b2a0 37.500% 40.625%, #cbb9a7 40.625% 43.750%, #d1c0ad 43.750% 46.875%, #d6c6b3 46.875% 50.000%, #dbcbb8 50.000% 53.125%, #dfd0bd 53.125% 56.250%, #e3d4c1 56.250% 59.375%, #e6d8c5 59.375% 62.500%, #e9dcc9 62.500% 65.625%, #ecdfcd 65.625% 68.750%, #efe2d0 68.750% 71.875%, #f1e5d3 71.875% 75.000%, #f3e8d6 75.000% 78.125%, #f5ead9 78.125% 81.250%, #f6ecdc 81.250% 84.375%, #f8eede 84.375% 87.500%, #f9f0e0 87.500% 90.625%, #fbf2e2 90.625% 93.750%, #fcf4e4 93.750% 96.875%, #fdf5e6 96.875% 100.000%);
background: linear-gradient(45deg, oklch(50.39% 0.0344 49.22) 0.000% 3.125%, oklch(51.66% 0.0344 50.04) 3.125% 6.250%, oklch(53.26% 0.0343 51.07) 6.250% 9.375%, oklch(55.13% 0.0342 52.28) 9.375% 12.500%, oklch(57.24% 0.0341 53.63) 12.500% 15.625%, oklch(59.55% 0.0340 55.11) 15.625% 18.750%, oklch(62.00% 0.0339 56.68) 18.750% 21.875%, oklch(64.55% 0.0338 58.32) 21.875% 25.000%, oklch(67.17% 0.0336 60.01) 25.000% 28.125%, oklch(69.80% 0.0335 61.72) 28.125% 31.250%, oklch(72.40% 0.0333 63.42) 31.250% 34.375%, oklch(74.94% 0.0331 65.08) 34.375% 37.500%, oklch(77.35% 0.0328 66.68) 37.500% 40.625%, oklch(79.61% 0.0326 68.19) 40.625% 43.750%, oklch(81.66% 0.0322 69.59) 43.750% 46.875%, oklch(83.46% 0.0319 70.84) 46.875% 50.000%, oklch(84.99% 0.0315 71.95) 50.000% 53.125%, oklch(86.39% 0.0310 73.00) 53.125% 56.250%, oklch(87.67% 0.0304 74.01) 56.250% 59.375%, oklch(88.85% 0.0298 74.98) 59.375% 62.500%, oklch(89.94% 0.0291 75.91) 62.500% 65.625%, oklch(90.93% 0.0284 76.79) 65.625% 68.750%, oklch(91.84% 0.0276 77.63) 68.750% 71.875%, oklch(92.67% 0.0269 78.42) 71.875% 75.000%, oklch(93.43% 0.0261 79.17) 75.000% 78.125%, oklch(94.12% 0.0254 79.87) 78.125% 81.250%, oklch(94.75% 0.0247 80.52) 81.250% 84.375%, oklch(95.33% 0.0240 81.12) 84.375% 87.500%, oklch(95.86% 0.0234 81.68) 87.500% 90.625%, oklch(96.35% 0.0229 82.18) 90.625% 93.750%, oklch(96.81% 0.0224 82.63) 93.750% 96.875%, oklch(97.24% 0.0220 83.03) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.504 | 0.034 | 49.2 |
| 2 | 0.843 | 0.032 | 71.4 |
| 3 | 0.972 | 0.022 | 83 |

## In these collections

- [Cream](https://grabient.com/cream)
- [Marble swatches](https://grabient.com/marble-swatches)

## Other forms

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