Smoked Black Coffee to Sweet Dreams color palette

413033Smoked Black Coffee 60684BMonstera 889468Bullfrog 99B9AFTreetop DDD3EFSweet Dreams

About this palette

Smoked Black Coffee to Sweet Dreams is a 5-color muted, cool, gradient palette: #413033 (Smoked Black Coffee), #60684B (Monstera), #889468 (Bullfrog), #99B9AF (Treetop), #DDD3EF (Sweet Dreams). It mixes gray, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #413033 on #DDD3EF with a contrast ratio of 8.63:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoked Black Coffee	rgb(65, 48, 51)	hsl(349, 15%, 22%)
Monstera	rgb(96, 104, 75)	hsl(77, 16%, 35%)
Bullfrog	rgb(136, 148, 104)	hsl(76, 17%, 49%)
Treetop	rgb(153, 185, 175)	hsl(161, 19%, 66%)
Sweet Dreams	rgb(221, 211, 239)	hsl(261, 47%, 88%)

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.63:1 Very good#413033 on #DDD3EF
Aa8.63:1 Very good#DDD3EF on #413033
Aa5.85:1 Good#413033 on #99B9AF
Aa5.85:1 Good#99B9AF on #413033
Aa4.09:1 Poor#60684B on #DDD3EF
Aa4.09:1 Poor#DDD3EF on #60684B
Aa3.82:1 Poor#413033 on #889468
Aa3.82:1 Poor#889468 on #413033

Color blindness preview

CSS variables

/* Smoked Black Coffee to Sweet Dreams — https://swatchly.xyz/palette/413033-60684b-889468-99b9af-ddd3ef */
:root {
  --smoked-black-coffee: #413033;
  --monstera: #60684b;
  --bullfrog: #889468;
  --treetop: #99b9af;
  --sweet-dreams: #ddd3ef;
}

Tailwind CSS v4

/* Smoked Black Coffee to Sweet Dreams — https://swatchly.xyz/palette/413033-60684b-889468-99b9af-ddd3ef */
@theme {
  --color-smoked-black-coffee: #413033;
  --color-smoked-black-coffee-50: #fef1f3;
  --color-smoked-black-coffee-100: #f5e7e9;
  --color-smoked-black-coffee-200: #e3d3d5;
  --color-smoked-black-coffee-300: #cebbbe;
  --color-smoked-black-coffee-400: #b09c9f;
  --color-smoked-black-coffee-500: #958184;
  --color-smoked-black-coffee-600: #7b676b;
  --color-smoked-black-coffee-700: #635255;
  --color-smoked-black-coffee-800: #4f4042;
  --color-smoked-black-coffee-900: #413033;
  --color-smoked-black-coffee-950: #281e20;
  --color-monstera: #60684b;
  --color-monstera-50: #f2f8e6;
  --color-monstera-100: #e7edd8;
  --color-monstera-200: #d1d8c0;
  --color-monstera-300: #b9c1a5;
  --color-monstera-400: #98a082;
  --color-monstera-500: #7b8466;
  --color-monstera-600: #60684b;
  --color-monstera-700: #4c5239;
  --color-monstera-800: #3b412b;
  --color-monstera-900: #2d321f;
  --color-monstera-950: #1b1f12;
  --color-bullfrog: #889468;
  --color-bullfrog-50: #f3fbe1;
  --color-bullfrog-100: #eaf2d6;
  --color-bullfrog-200: #d7e1bf;
  --color-bullfrog-300: #c1cca6;
  --color-bullfrog-400: #a2ae84;
  --color-bullfrog-500: #889468;
  --color-bullfrog-600: #6c784d;
  --color-bullfrog-700: #555f38;
  --color-bullfrog-800: #414a28;
  --color-bullfrog-900: #31391b;
  --color-bullfrog-950: #1e230e;
  --color-treetop: #99b9af;
  --color-treetop-50: #eefffa;
  --color-treetop-100: #e6f8f2;
  --color-treetop-200: #d2e8e1;
  --color-treetop-300: #bbd5cd;
  --color-treetop-400: #99b9af;
  --color-treetop-500: #7c9a91;
  --color-treetop-600: #5f7d74;
  --color-treetop-700: #47635b;
  --color-treetop-800: #344d45;
  --color-treetop-900: #253a34;
  --color-treetop-950: #14231e;
  --color-sweet-dreams: #ddd3ef;
  --color-sweet-dreams-50: #f8f4ff;
  --color-sweet-dreams-100: #efe9fa;
  --color-sweet-dreams-200: #ddd3ef;
  --color-sweet-dreams-300: #c5bdd4;
  --color-sweet-dreams-400: #a69db6;
  --color-sweet-dreams-500: #8b819b;
  --color-sweet-dreams-600: #70677f;
  --color-sweet-dreams-700: #595167;
  --color-sweet-dreams-800: #453e51;
  --color-sweet-dreams-900: #352f3f;
  --color-sweet-dreams-950: #211d28;
}