# Cassette Room palette

The Cassette Room palette brings together dark gray, orange, gold, blue, and dark blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is gold.

- Also called: Brown, orange, green and navy linear gradient
- Seed: `kWOg0ex67AeUwRBAFdIJA5Ao`
- Page: https://grabient.com/kWOg0ex67AeUwRBAFdIJA5Ao?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center
- Hues: two-hue
- Contrast of its darkest and lightest colors: 8.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 | `#241a16` | `oklch(22.83% 0.0179 42.89)` | Dark Orchestra | white, 17 to 1 |
| 2 | `#2f1f18` | `oklch(25.59% 0.0275 43.01)` | Weathervane | white, 15.8 to 1 |
| 3 | `#3e251b` | `oklch(29.35% 0.0412 42.92)` | Brown Pod | white, 14.1 to 1 |
| 4 | `#502d1f` | `oklch(33.83% 0.0574 42.81)` | Dark Wood Grain | white, 12 to 1 |
| 5 | `#653622` | `oklch(38.74% 0.0750 42.84)` | Freshly Roasted Coffee | white, 10 to 1 |
| 6 | `#7b3f25` | `oklch(43.82% 0.0924 43.18)` | Burnished Russet | white, 8.1 to 1 |
| 7 | `#914927` | `oklch(48.77% 0.1083 44.01)` | Madeira Brown | white, 6.6 to 1 |
| 8 | `#a45229` | `oklch(53.32% 0.1212 45.48)` | Garfield | white, 5.4 to 1 |
| 9 | `#b45c2a` | `oklch(57.23% 0.1299 47.72)` | Fallen Canopy | white, 4.6 to 1 |
| 10 | `#c3682e` | `oklch(61.20% 0.1357 49.71)` | Sesame Crunch | black, 5.3 to 1 |
| 11 | `#d27435` | `oklch(65.36% 0.1394 51.46)` | Mann Orange | black, 6.2 to 1 |
| 12 | `#df813e` | `oklch(69.44% 0.1413 53.53)` | Tree Poppy | black, 7.3 to 1 |
| 13 | `#ea8e45` | `oklch(73.17% 0.1416 56.49)` | California | black, 8.4 to 1 |
| 14 | `#f29b4a` | `oklch(76.27% 0.1404 60.90)` | Question Mark Block | black, 9.5 to 1 |
| 15 | `#f3a64d` | `oklch(78.48% 0.1379 67.33)` | Troll Slayer Orange | black, 10.3 to 1 |
| 16 | `#edb04d` | `oklch(79.53% 0.1344 76.34)` | Goldenrod Field | black, 10.8 to 1 |
| 17 | `#ddb64d` | `oklch(79.11% 0.1296 88.82)` | Up in Flames | black, 10.8 to 1 |
| 18 | `#beb956` | `oklch(77.08% 0.1222 106.42)` | Parachute | black, 10.3 to 1 |
| 19 | `#96b868` | `oklch(73.76% 0.1126 127.84)` | Light Birch Green | black, 9.3 to 1 |
| 20 | `#6baf7d` | `oklch(69.53% 0.1016 151.37)` | Elf Shoe | black, 8 to 1 |
| 21 | `#4aa18c` | `oklch(64.78% 0.0901 175.30)` | Marine Green | black, 6.7 to 1 |
| 22 | `#3c8e91` | `oklch(59.90% 0.0789 197.93)` | Blue Chill | black, 5.4 to 1 |
| 23 | `#3e7c8d` | `oklch(55.26% 0.0689 217.55)` | Larkspur | white, 4.6 to 1 |
| 24 | `#416d84` | `oklch(51.25% 0.0609 232.44)` | Santorini Blue | white, 5.6 to 1 |
| 25 | `#41617a` | `oklch(47.89% 0.0551 241.66)` | Mallard Blue | white, 6.5 to 1 |
| 26 | `#3d576f` | `oklch(44.50% 0.0506 246.72)` | Atlantic Tide | white, 7.5 to 1 |
| 27 | `#364d64` | `oklch(41.15% 0.0472 248.57)` | Rain Boots | white, 8.7 to 1 |
| 28 | `#2f4459` | `oklch(37.94% 0.0446 248.14)` | Moonlit Ocean | white, 9.9 to 1 |
| 29 | `#273d50` | `oklch(34.95% 0.0427 246.31)` | Asurmen Blue Wash | white, 11.2 to 1 |
| 30 | `#213647` | `oklch(32.30% 0.0412 244.00)` | Tahitian Pearl | white, 12.4 to 1 |
| 31 | `#1b3040` | `oklch(30.06% 0.0399 242.12)` | Tangaroa | white, 13.5 to 1 |
| 32 | `#172c3b` | `oklch(28.35% 0.0386 241.56)` | Oceanic Noir | white, 14.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #241a16 0.0%, #2f1f18 3.2%, #3e251b 6.5%, #502d1f 9.7%, #653622 12.9%, #7b3f25 16.1%, #914927 19.4%, #a45229 22.6%, #b45c2a 25.8%, #c3682e 29.0%, #d27435 32.3%, #df813e 35.5%, #ea8e45 38.7%, #f29b4a 41.9%, #f3a64d 45.2%, #edb04d 48.4%, #ddb64d 51.6%, #beb956 54.8%, #96b868 58.1%, #6baf7d 61.3%, #4aa18c 64.5%, #3c8e91 67.7%, #3e7c8d 71.0%, #416d84 74.2%, #41617a 77.4%, #3d576f 80.6%, #364d64 83.9%, #2f4459 87.1%, #273d50 90.3%, #213647 93.5%, #1b3040 96.8%, #172c3b 100.0%);
background: linear-gradient(135deg in oklch, oklch(22.83% 0.0179 42.89) 0.0%, oklch(25.59% 0.0275 43.01) 3.2%, oklch(29.35% 0.0412 42.92) 6.5%, oklch(33.83% 0.0574 42.81) 9.7%, oklch(38.74% 0.0750 42.84) 12.9%, oklch(43.82% 0.0924 43.18) 16.1%, oklch(48.77% 0.1083 44.01) 19.4%, oklch(53.32% 0.1212 45.48) 22.6%, oklch(57.23% 0.1299 47.72) 25.8%, oklch(61.20% 0.1357 49.71) 29.0%, oklch(65.36% 0.1394 51.46) 32.3%, oklch(69.44% 0.1413 53.53) 35.5%, oklch(73.17% 0.1416 56.49) 38.7%, oklch(76.27% 0.1404 60.90) 41.9%, oklch(78.48% 0.1379 67.33) 45.2%, oklch(79.53% 0.1344 76.34) 48.4%, oklch(79.11% 0.1296 88.82) 51.6%, oklch(77.08% 0.1222 106.42) 54.8%, oklch(73.76% 0.1126 127.84) 58.1%, oklch(69.53% 0.1016 151.37) 61.3%, oklch(64.78% 0.0901 175.30) 64.5%, oklch(59.90% 0.0789 197.93) 67.7%, oklch(55.26% 0.0689 217.55) 71.0%, oklch(51.25% 0.0609 232.44) 74.2%, oklch(47.89% 0.0551 241.66) 77.4%, oklch(44.50% 0.0506 246.72) 80.6%, oklch(41.15% 0.0472 248.57) 83.9%, oklch(37.94% 0.0446 248.14) 87.1%, oklch(34.95% 0.0427 246.31) 90.3%, oklch(32.30% 0.0412 244.00) 93.5%, oklch(30.06% 0.0399 242.12) 96.8%, oklch(28.35% 0.0386 241.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.018 | 42.9 |
| 2 | 0.563 | 0.128 | 47.1 |
| 3 | 0.795 | 0.132 | 82 |
| 4 | 0.504 | 0.059 | 235.2 |
| 5 | 0.283 | 0.039 | 241.6 |

## In these collections

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

## Other forms

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