Couch to Fire color palette

4F281ACouch 001A23Black Stallion 3FB9D6Blue Martini 7EDEF8Sky B76E3FDune Spice 91442FFire

About this palette

Couch to Fire is a 6-color vintage palette: #4F281A (Couch), #001A23 (Black Stallion), #3FB9D6 (Blue Martini), #7EDEF8 (Sky), #B76E3F (Dune Spice), #91442F (Fire). It mixes brown, blue, orange, red tones and feels balanced overall. The strongest text pairing is #001A23 on #7EDEF8 with a contrast ratio of 11.68:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Couch	rgb(79, 40, 26)	hsl(16, 50%, 21%)
Black Stallion	rgb(0, 26, 35)	hsl(195, 100%, 7%)
Blue Martini	rgb(63, 185, 214)	hsl(192, 65%, 54%)
Sky	rgb(126, 222, 248)	hsl(193, 90%, 73%)
Dune Spice	rgb(183, 110, 63)	hsl(24, 49%, 48%)
Fire	rgb(145, 68, 47)	hsl(13, 51%, 38%)

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.

Aa11.68:1 Very good#001A23 on #7EDEF8
Aa11.68:1 Very good#7EDEF8 on #001A23
Aa8.29:1 Very good#4F281A on #7EDEF8
Aa8.29:1 Very good#7EDEF8 on #4F281A
Aa7.78:1 Very good#001A23 on #3FB9D6
Aa7.78:1 Very good#3FB9D6 on #001A23
Aa5.53:1 Good#4F281A on #3FB9D6
Aa5.53:1 Good#3FB9D6 on #4F281A

Color blindness preview

CSS variables

/* Couch to Fire — https://swatchly.xyz/palette/4f281a-001a23-3fb9d6-7edef8-b76e3f-91442f */
:root {
  --couch: #4f281a;
  --black-stallion: #001a23;
  --blue-martini: #3fb9d6;
  --sky: #7edef8;
  --dune-spice: #b76e3f;
  --fire: #91442f;
}

Tailwind CSS v4

/* Couch to Fire — https://swatchly.xyz/palette/4f281a-001a23-3fb9d6-7edef8-b76e3f-91442f */
@theme {
  --color-couch: #4f281a;
  --color-couch-50: #fff2ed;
  --color-couch-100: #ffe5dc;
  --color-couch-200: #f4cec1;
  --color-couch-300: #e1b6a7;
  --color-couch-400: #c49685;
  --color-couch-500: #a87a6a;
  --color-couch-600: #8c6051;
  --color-couch-700: #734b3d;
  --color-couch-800: #5c3a2d;
  --color-couch-900: #4f281a;
  --color-couch-950: #2f1a13;
  --color-black-stallion: #001a23;
  --color-black-stallion-50: #e8f8ff;
  --color-black-stallion-100: #dbeff7;
  --color-black-stallion-200: #c5dce5;
  --color-black-stallion-300: #abc6d0;
  --color-black-stallion-400: #8aa7b2;
  --color-black-stallion-500: #6c8a95;
  --color-black-stallion-600: #516d78;
  --color-black-stallion-700: #3b545e;
  --color-black-stallion-800: #2a3f47;
  --color-black-stallion-900: #1d2e34;
  --color-black-stallion-950: #001a23;
  --color-blue-martini: #3fb9d6;
  --color-blue-martini-50: #ebfbff;
  --color-blue-martini-100: #d4f5ff;
  --color-blue-martini-200: #9deaff;
  --color-blue-martini-300: #7bd6ee;
  --color-blue-martini-400: #3fb9d6;
  --color-blue-martini-500: #0c9bb8;
  --color-blue-martini-600: #007d95;
  --color-blue-martini-700: #006376;
  --color-blue-martini-800: #004d5c;
  --color-blue-martini-900: #003b47;
  --color-blue-martini-950: #00242d;
  --color-sky: #7edef8;
  --color-sky-50: #d4f5ff;
  --color-sky-100: #b4eeff;
  --color-sky-200: #7edef8;
  --color-sky-300: #75c7de;
  --color-sky-400: #4baac2;
  --color-sky-500: #2790a8;
  --color-sky-600: #00758c;
  --color-sky-700: #005e71;
  --color-sky-800: #004b5a;
  --color-sky-900: #003a46;
  --color-sky-950: #00242d;
  --color-dune-spice: #b76e3f;
  --color-dune-spice-50: #fff2ea;
  --color-dune-spice-100: #ffe4d4;
  --color-dune-spice-200: #ffc8a8;
  --color-dune-spice-300: #f1ad84;
  --color-dune-spice-400: #d48b5e;
  --color-dune-spice-500: #b76e3f;
  --color-dune-spice-600: #9a5526;
  --color-dune-spice-700: #7e4012;
  --color-dune-spice-800: #663004;
  --color-dune-spice-900: #512300;
  --color-dune-spice-950: #351400;
  --color-fire: #91442f;
  --color-fire-50: #fff2ee;
  --color-fire-100: #ffe5dd;
  --color-fire-200: #ffccbd;
  --color-fire-300: #f9af9b;
  --color-fire-400: #df8e78;
  --color-fire-500: #c5735d;
  --color-fire-600: #a95a44;
  --color-fire-700: #91442f;
  --color-fire-800: #743322;
  --color-fire-900: #5c2516;
  --color-fire-950: #3d150a;
}