Couch to Shadow Play Color Palette

About this palette

Couch to Shadow Play is a 5-color dark, warm, earthy palette: #462B16 (Couch), #474700 (Green Not Found), #755900 (Coffee Adept), #1B0E00 (Balsamico), #311900 (Shadow Play). It mixes brown, black tones and feels warm overall. The strongest text pairing is #755900 on #1B0E00 with a contrast ratio of 2.87:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Couch	rgb(70, 43, 22)	hsl(26, 52%, 18%)
Green Not Found	rgb(71, 71, 0)	hsl(60, 100%, 14%)
Coffee Adept	rgb(117, 89, 0)	hsl(46, 100%, 23%)
Balsamico	rgb(27, 14, 0)	hsl(31, 100%, 5%)
Shadow Play	rgb(49, 25, 0)	hsl(31, 100%, 10%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Couch to Shadow Play — https://swatchly.xyz/palette/462b16-474700-755900-1b0e00-311900 */
:root {
  --couch: #462b16;
  --green-not-found: #474700;
  --coffee-adept: #755900;
  --balsamico: #1b0e00;
  --shadow-play: #311900;
}

Tailwind CSS v4

/* Couch to Shadow Play — https://swatchly.xyz/palette/462b16-474700-755900-1b0e00-311900 */
@theme {
  --color-couch: #462b16;
  --color-couch-50: #fff2ea;
  --color-couch-100: #fde6d7;
  --color-couch-200: #ecd2bf;
  --color-couch-300: #d8baa6;
  --color-couch-400: #ba9a83;
  --color-couch-500: #9e7e67;
  --color-couch-600: #82644e;
  --color-couch-700: #694e3a;
  --color-couch-800: #543c2b;
  --color-couch-900: #462b16;
  --color-couch-950: #291b11;
  --color-green-not-found: #474700;
  --color-green-not-found-50: #f7f8d5;
  --color-green-not-found-100: #edefc7;
  --color-green-not-found-200: #dadcad;
  --color-green-not-found-300: #c4c690;
  --color-green-not-found-400: #a5a76b;
  --color-green-not-found-500: #8a8b4e;
  --color-green-not-found-600: #707134;
  --color-green-not-found-700: #595a21;
  --color-green-not-found-800: #474700;
  --color-green-not-found-900: #363609;
  --color-green-not-found-950: #222203;
  --color-coffee-adept: #755900;
  --color-coffee-adept-50: #fff4dc;
  --color-coffee-adept-100: #fde9be;
  --color-coffee-adept-200: #edd7a3;
  --color-coffee-adept-300: #dbc186;
  --color-coffee-adept-400: #bfa35f;
  --color-coffee-adept-500: #a58840;
  --color-coffee-adept-600: #8b6f24;
  --color-coffee-adept-700: #755900;
  --color-coffee-adept-800: #5c4500;
  --color-coffee-adept-900: #473500;
  --color-coffee-adept-950: #2d2100;
  --color-balsamico: #1b0e00;
  --color-balsamico-50: #fef3e6;
  --color-balsamico-100: #f5e9db;
  --color-balsamico-200: #e3d5c4;
  --color-balsamico-300: #cebeab;
  --color-balsamico-400: #b09e89;
  --color-balsamico-500: #91806a;
  --color-balsamico-600: #73634f;
  --color-balsamico-700: #584a38;
  --color-balsamico-800: #413527;
  --color-balsamico-900: #2d2419;
  --color-balsamico-950: #1b0e00;
  --color-shadow-play: #311900;
  --color-shadow-play-50: #fff3e8;
  --color-shadow-play-100: #fce7d4;
  --color-shadow-play-200: #ebd3bd;
  --color-shadow-play-300: #d7bba2;
  --color-shadow-play-400: #b99b80;
  --color-shadow-play-500: #9e8064;
  --color-shadow-play-600: #82664b;
  --color-shadow-play-700: #695037;
  --color-shadow-play-800: #543d28;
  --color-shadow-play-900: #422f1d;
  --color-shadow-play-950: #311900;
}