Smoked Black Coffee to Lovely Breeze color palette

3E2D33Smoked Black Coffee 455B3DHeavy Green 567F86North Atlantic 9DB190Rooftop Garden F6D7DFLovely Breeze

Open in generator Export PNG, PDF, ASE…

About this palette

Smoked Black Coffee to Lovely Breeze is a 5-color muted, cool, gradient palette: #3E2D33 (Smoked Black Coffee), #455B3D (Heavy Green), #567F86 (North Atlantic), #9DB190 (Rooftop Garden), #F6D7DF (Lovely Breeze). It mixes gray, green, turquoise, pink tones and feels cool overall. The strongest text pairing is #3E2D33 on #F6D7DF with a contrast ratio of 9.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoked Black Coffee	rgb(62, 45, 51)	hsl(339, 16%, 21%)
Heavy Green	rgb(69, 91, 61)	hsl(104, 20%, 30%)
North Atlantic	rgb(86, 127, 134)	hsl(189, 22%, 43%)
Rooftop Garden	rgb(157, 177, 144)	hsl(96, 17%, 63%)
Lovely Breeze	rgb(246, 215, 223)	hsl(345, 63%, 90%)

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.

Aa9.65:1 Very good#3E2D33 on #F6D7DF
Aa9.65:1 Very good#F6D7DF on #3E2D33
Aa5.61:1 Good#3E2D33 on #9DB190
Aa5.61:1 Good#9DB190 on #3E2D33
Aa5.58:1 Good#455B3D on #F6D7DF
Aa5.58:1 Good#F6D7DF on #455B3D
Aa3.29:1 Poor#567F86 on #F6D7DF
Aa3.29:1 Poor#F6D7DF on #567F86

Color blindness preview

CSS variables

/* Smoked Black Coffee to Lovely Breeze — https://swatchly.xyz/palette/3e2d33-455b3d-567f86-9db190-f6d7df */
:root {
  --smoked-black-coffee: #3e2d33;
  --heavy-green: #455b3d;
  --north-atlantic: #567f86;
  --rooftop-garden: #9db190;
  --lovely-breeze: #f6d7df;
}

Tailwind CSS v4

/* Smoked Black Coffee to Lovely Breeze — https://swatchly.xyz/palette/3e2d33-455b3d-567f86-9db190-f6d7df */
@theme {
  --color-smoked-black-coffee: #3e2d33;
  --color-smoked-black-coffee-50: #fef1f5;
  --color-smoked-black-coffee-100: #f5e7eb;
  --color-smoked-black-coffee-200: #e3d2d8;
  --color-smoked-black-coffee-300: #cebbc1;
  --color-smoked-black-coffee-400: #b09ba2;
  --color-smoked-black-coffee-500: #948087;
  --color-smoked-black-coffee-600: #79666c;
  --color-smoked-black-coffee-700: #615055;
  --color-smoked-black-coffee-800: #4c3d42;
  --color-smoked-black-coffee-900: #3e2d33;
  --color-smoked-black-coffee-950: #251c1f;
  --color-heavy-green: #455b3d;
  --color-heavy-green-50: #ecfae7;
  --color-heavy-green-100: #e1f1db;
  --color-heavy-green-200: #cbdec4;
  --color-heavy-green-300: #b2c8ab;
  --color-heavy-green-400: #91a989;
  --color-heavy-green-500: #758d6d;
  --color-heavy-green-600: #5c7254;
  --color-heavy-green-700: #455b3d;
  --color-heavy-green-800: #35472f;
  --color-heavy-green-900: #283723;
  --color-heavy-green-950: #172214;
  --color-north-atlantic: #567f86;
  --color-north-atlantic-50: #e2fafe;
  --color-north-atlantic-100: #d9f3f8;
  --color-north-atlantic-200: #c3e2e8;
  --color-north-atlantic-300: #abcfd5;
  --color-north-atlantic-400: #8ab2b9;
  --color-north-atlantic-500: #6f989f;
  --color-north-atlantic-600: #567f86;
  --color-north-atlantic-700: #3f656c;
  --color-north-atlantic-800: #2d5055;
  --color-north-atlantic-900: #203d42;
  --color-north-atlantic-950: #11262a;
  --color-rooftop-garden: #9db190;
  --color-rooftop-garden-50: #f1fcea;
  --color-rooftop-garden-100: #e8f4e0;
  --color-rooftop-garden-200: #d4e3ca;
  --color-rooftop-garden-300: #bdceb2;
  --color-rooftop-garden-400: #9db190;
  --color-rooftop-garden-500: #819474;
  --color-rooftop-garden-600: #657859;
  --color-rooftop-garden-700: #4e5f43;
  --color-rooftop-garden-800: #3b4a32;
  --color-rooftop-garden-900: #2c3824;
  --color-rooftop-garden-950: #1a2214;
  --color-lovely-breeze: #f6d7df;
  --color-lovely-breeze-50: #fff9fb;
  --color-lovely-breeze-100: #ffedf2;
  --color-lovely-breeze-200: #f6d7df;
  --color-lovely-breeze-300: #dac1c7;
  --color-lovely-breeze-400: #ba9fa6;
  --color-lovely-breeze-500: #9e8289;
  --color-lovely-breeze-600: #81666d;
  --color-lovely-breeze-700: #674f55;
  --color-lovely-breeze-800: #503c41;
  --color-lovely-breeze-900: #3f2d32;
  --color-lovely-breeze-950: #281b1f;
}