Couch to Voracious White Color Palette

About this palette

Couch to Voracious White is a 4-color palette: #4D2A19 (Couch), #317F7F (Jade Jewel), #77A7ED (Fennel Flower), #FFEEE9 (Voracious White). It mixes brown, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #4D2A19 on #FFEEE9 with a contrast ratio of 11.23:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Couch	rgb(77, 42, 25)	hsl(20, 51%, 20%)
Jade Jewel	rgb(49, 127, 127)	hsl(180, 44%, 35%)
Fennel Flower	rgb(119, 167, 237)	hsl(216, 77%, 70%)
Voracious White	rgb(255, 238, 233)	hsl(14, 100%, 96%)

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.23:1 Very good#4D2A19 on #FFEEE9
Aa11.23:1 Very good#FFEEE9 on #4D2A19
Aa5.14:1 Good#4D2A19 on #77A7ED
Aa5.14:1 Good#77A7ED on #4D2A19
Aa4.17:1 Poor#317F7F on #FFEEE9
Aa4.17:1 Poor#FFEEE9 on #317F7F

Color blindness preview

CSS variables

/* Couch to Voracious White — https://swatchly.xyz/palette/4d2a19-317f7f-77a7ed-ffeee9 */
:root {
  --couch: #4d2a19;
  --jade-jewel: #317f7f;
  --fennel-flower: #77a7ed;
  --voracious-white: #ffeee9;
}

Tailwind CSS v4

/* Couch to Voracious White — https://swatchly.xyz/palette/4d2a19-317f7f-77a7ed-ffeee9 */
@theme {
  --color-couch: #4d2a19;
  --color-couch-50: #fff2ec;
  --color-couch-100: #ffe5d9;
  --color-couch-200: #f1cfc0;
  --color-couch-300: #deb8a6;
  --color-couch-400: #c19784;
  --color-couch-500: #a57c69;
  --color-couch-600: #896250;
  --color-couch-700: #704d3c;
  --color-couch-800: #5a3b2d;
  --color-couch-900: #4d2a19;
  --color-couch-950: #2e1b12;
  --color-jade-jewel: #317f7f;
  --color-jade-jewel-50: #d6fefe;
  --color-jade-jewel-100: #caf7f6;
  --color-jade-jewel-200: #b0e6e5;
  --color-jade-jewel-300: #93d1d1;
  --color-jade-jewel-400: #6db4b3;
  --color-jade-jewel-500: #4e9999;
  --color-jade-jewel-600: #317f7f;
  --color-jade-jewel-700: #1a6666;
  --color-jade-jewel-800: #075051;
  --color-jade-jewel-900: #003e3e;
  --color-jade-jewel-950: #002727;
  --color-fennel-flower: #77a7ed;
  --color-fennel-flower-50: #f1f7ff;
  --color-fennel-flower-100: #e3eeff;
  --color-fennel-flower-200: #c4dcff;
  --color-fennel-flower-300: #a0c7ff;
  --color-fennel-flower-400: #77a7ed;
  --color-fennel-flower-500: #5c8ace;
  --color-fennel-flower-600: #426eaf;
  --color-fennel-flower-700: #2e5792;
  --color-fennel-flower-800: #1f4376;
  --color-fennel-flower-900: #14335e;
  --color-fennel-flower-950: #091f3e;
  --color-voracious-white: #ffeee9;
  --color-voracious-white-50: #ffeee9;
  --color-voracious-white-100: #f1e6e3;
  --color-voracious-white-200: #dfd2cf;
  --color-voracious-white-300: #cabcb8;
  --color-voracious-white-400: #ac9d98;
  --color-voracious-white-500: #91827d;
  --color-voracious-white-600: #766864;
  --color-voracious-white-700: #5f524e;
  --color-voracious-white-800: #4b3f3c;
  --color-voracious-white-900: #3a302e;
  --color-voracious-white-950: #241d1b;
}