# Cassette brown and moss green

Four diagonal swatches move from soft black brown through muted cassette tan and faded olive beige to moss green. The subdued colors suggest worn tape cases, old fabric, and quiet analog interiors. This restrained lo-fi palette suits music cover art, retro journal layouts, and background graphics for relaxed listening sessions.

- Also called: Black, brown and gray linear swatches
- Seed: `kURQgizRdA18TxK-DUfA`
- Page: https://grabient.com/kURQgizRdA18TxK-DUfA?style=linearSwatches&steps=4&angle=45
- Drawn as: linear swatches, 4 steps, 45 degrees
- Kinds: light center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 6.7 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 | `#2c2522` | `oklch(27.17% 0.0110 48.52)` | Gold Black | white, 15 to 1 |
| 2 | `#a0785d` | `oklch(60.63% 0.0634 55.91)` | Walking Stick | black, 5.3 to 1 |
| 3 | `#b7ae87` | `oklch(74.80% 0.0537 96.07)` | Hemp Fabric | black, 9.4 to 1 |
| 4 | `#4e675a` | `oklch(48.82% 0.0358 162.64)` | Jungle Camouflage | white, 6.1 to 1 |

## CSS

```css
background: linear-gradient(45deg, #2c2522 0.000% 25.000%, #a0785d 25.000% 50.000%, #b7ae87 50.000% 75.000%, #4e675a 75.000% 100.000%);
background: linear-gradient(45deg, oklch(27.17% 0.0110 48.52) 0.000% 25.000%, oklch(60.63% 0.0634 55.91) 25.000% 50.000%, oklch(74.80% 0.0537 96.07) 50.000% 75.000%, oklch(48.82% 0.0358 162.64) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.272 | 0.011 | 48.5 |
| 2 | 0.606 | 0.063 | 55.9 |
| 3 | 0.748 | 0.054 | 96.1 |
| 4 | 0.488 | 0.036 | 162.6 |

## In these collections

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

## Other forms

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