Night Market to Couch Potato Color Palette

About this palette

Night Market to Couch Potato is a 5-color muted palette: #4C6179 (Night Market), #879380 (Aloe Tip), #3A3326 (Creole), #E9D4E9 (Scented Spring), #C6B4A0 (Couch Potato). It mixes blue, gray, pink tones and feels cool overall. The strongest text pairing is #3A3326 on #E9D4E9 with a contrast ratio of 8.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Market	rgb(76, 97, 121)	hsl(212, 23%, 39%)
Aloe Tip	rgb(135, 147, 128)	hsl(98, 8%, 54%)
Creole	rgb(58, 51, 38)	hsl(39, 21%, 19%)
Scented Spring	rgb(233, 212, 233)	hsl(300, 32%, 87%)
Couch Potato	rgb(198, 180, 160)	hsl(32, 25%, 70%)

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.

Aa8.96:1 Very good#3A3326 on #E9D4E9
Aa8.96:1 Very good#E9D4E9 on #3A3326
Aa6.21:1 Good#3A3326 on #C6B4A0
Aa6.21:1 Good#C6B4A0 on #3A3326
Aa4.57:1 Good#4C6179 on #E9D4E9
Aa4.57:1 Good#E9D4E9 on #4C6179
Aa3.87:1 Poor#879380 on #3A3326
Aa3.87:1 Poor#3A3326 on #879380

Color blindness preview

CSS variables

/* Night Market to Couch Potato — https://swatchly.xyz/palette/4c6179-879380-3a3326-e9d4e9-c6b4a0 */
:root {
  --night-market: #4c6179;
  --aloe-tip: #879380;
  --creole: #3a3326;
  --scented-spring: #e9d4e9;
  --couch-potato: #c6b4a0;
}

Tailwind CSS v4

/* Night Market to Couch Potato — https://swatchly.xyz/palette/4c6179-879380-3a3326-e9d4e9-c6b4a0 */
@theme {
  --color-night-market: #4c6179;
  --color-night-market-50: #eef6ff;
  --color-night-market-100: #deedfe;
  --color-night-market-200: #cadbf0;
  --color-night-market-300: #b3c7de;
  --color-night-market-400: #94a9c2;
  --color-night-market-500: #798fa9;
  --color-night-market-600: #61768f;
  --color-night-market-700: #4c6179;
  --color-night-market-800: #3a4c60;
  --color-night-market-900: #2b3a4b;
  --color-night-market-950: #192431;
  --color-aloe-tip: #879380;
  --color-aloe-tip-50: #f2f9ee;
  --color-aloe-tip-100: #e9f1e5;
  --color-aloe-tip-200: #d6dfd1;
  --color-aloe-tip-300: #c0cbba;
  --color-aloe-tip-400: #a1ad9b;
  --color-aloe-tip-500: #879380;
  --color-aloe-tip-600: #6b7765;
  --color-aloe-tip-700: #545e4e;
  --color-aloe-tip-800: #40493b;
  --color-aloe-tip-900: #30382c;
  --color-aloe-tip-950: #1d221a;
  --color-creole: #3a3326;
  --color-creole-50: #f9f5eb;
  --color-creole-100: #f0eae0;
  --color-creole-200: #ddd7cb;
  --color-creole-300: #c7c0b2;
  --color-creole-400: #a9a192;
  --color-creole-500: #8e8677;
  --color-creole-600: #736b5d;
  --color-creole-700: #5c5548;
  --color-creole-800: #494337;
  --color-creole-900: #3a3326;
  --color-creole-950: #232019;
  --color-scented-spring: #e9d4e9;
  --color-scented-spring-50: #fff4ff;
  --color-scented-spring-100: #f7eaf7;
  --color-scented-spring-200: #e9d4e9;
  --color-scented-spring-300: #cfbecf;
  --color-scented-spring-400: #b09db0;
  --color-scented-spring-500: #948194;
  --color-scented-spring-600: #786678;
  --color-scented-spring-700: #605060;
  --color-scented-spring-800: #4b3d4b;
  --color-scented-spring-900: #3a2e3a;
  --color-scented-spring-950: #251c25;
  --color-couch-potato: #c6b4a0;
  --color-couch-potato-50: #f9eee2;
  --color-couch-potato-100: #efe2d5;
  --color-couch-potato-200: #dbcdbd;
  --color-couch-potato-300: #c6b4a0;
  --color-couch-potato-400: #a89784;
  --color-couch-potato-500: #8e7d6a;
  --color-couch-potato-600: #746453;
  --color-couch-potato-700: #5e5040;
  --color-couch-potato-800: #4b3f30;
  --color-couch-potato-900: #3b3125;
  --color-couch-potato-950: #251e15;
}