Afternoon Coffee to Poolside color palette

6F514EAfternoon Coffee 2B3D41Tempest in a Teapot 917471Chocolate Temptation B79A97Creamed Caramel 9BBABDShallow Sea B7E0E5Poolside

Open in generator Export PNG, PDF, ASE…

About this palette

Afternoon Coffee to Poolside is a 6-color muted palette: #6F514E (Afternoon Coffee), #2B3D41 (Tempest in a Teapot), #917471 (Chocolate Temptation), #B79A97 (Creamed Caramel), #9BBABD (Shallow Sea), #B7E0E5 (Poolside). It mixes red, gray, turquoise tones and feels warm overall. The strongest text pairing is #2B3D41 on #B7E0E5 with a contrast ratio of 8.02:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Afternoon Coffee	rgb(111, 81, 78)	hsl(5, 17%, 37%)
Tempest in a Teapot	rgb(43, 61, 65)	hsl(191, 20%, 21%)
Chocolate Temptation	rgb(145, 116, 113)	hsl(6, 13%, 51%)
Creamed Caramel	rgb(183, 154, 151)	hsl(6, 18%, 65%)
Shallow Sea	rgb(155, 186, 189)	hsl(185, 20%, 67%)
Poolside	rgb(183, 224, 229)	hsl(187, 47%, 81%)

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.02:1 Very good#2B3D41 on #B7E0E5
Aa8.02:1 Very good#B7E0E5 on #2B3D41
Aa5.50:1 Good#2B3D41 on #9BBABD
Aa5.50:1 Good#9BBABD on #2B3D41
Aa5.00:1 Good#6F514E on #B7E0E5
Aa5.00:1 Good#B7E0E5 on #6F514E
Aa4.38:1 Poor#2B3D41 on #B79A97
Aa4.38:1 Poor#B79A97 on #2B3D41

Color blindness preview

CSS variables

/* Afternoon Coffee to Poolside — https://swatchly.xyz/palette/6f514e-2b3d41-917471-b79a97-9bbabd-b7e0e5 */
:root {
  --afternoon-coffee: #6f514e;
  --tempest-in-a-teapot: #2b3d41;
  --chocolate-temptation: #917471;
  --creamed-caramel: #b79a97;
  --shallow-sea: #9bbabd;
  --poolside: #b7e0e5;
}

Tailwind CSS v4

/* Afternoon Coffee to Poolside — https://swatchly.xyz/palette/6f514e-2b3d41-917471-b79a97-9bbabd-b7e0e5 */
@theme {
  --color-afternoon-coffee: #6f514e;
  --color-afternoon-coffee-50: #fff2f0;
  --color-afternoon-coffee-100: #fce5e3;
  --color-afternoon-coffee-200: #ecd1ce;
  --color-afternoon-coffee-300: #d8bbb7;
  --color-afternoon-coffee-400: #bb9b98;
  --color-afternoon-coffee-500: #a1807d;
  --color-afternoon-coffee-600: #866764;
  --color-afternoon-coffee-700: #6f514e;
  --color-afternoon-coffee-800: #573f3c;
  --color-afternoon-coffee-900: #442f2d;
  --color-afternoon-coffee-950: #2c1d1b;
  --color-tempest-in-a-teapot: #2b3d41;
  --color-tempest-in-a-teapot-50: #ecf8fa;
  --color-tempest-in-a-teapot-100: #e1eef1;
  --color-tempest-in-a-teapot-200: #cbdbde;
  --color-tempest-in-a-teapot-300: #b3c5c9;
  --color-tempest-in-a-teapot-400: #93a7ab;
  --color-tempest-in-a-teapot-500: #798d91;
  --color-tempest-in-a-teapot-600: #607378;
  --color-tempest-in-a-teapot-700: #4c5e62;
  --color-tempest-in-a-teapot-800: #3b4b4f;
  --color-tempest-in-a-teapot-900: #2b3d41;
  --color-tempest-in-a-teapot-950: #1c2629;
  --color-chocolate-temptation: #917471;
  --color-chocolate-temptation-50: #ffefed;
  --color-chocolate-temptation-100: #f7e2df;
  --color-chocolate-temptation-200: #e4cbc9;
  --color-chocolate-temptation-300: #ceb2af;
  --color-chocolate-temptation-400: #ae918e;
  --color-chocolate-temptation-500: #917471;
  --color-chocolate-temptation-600: #775c59;
  --color-chocolate-temptation-700: #604846;
  --color-chocolate-temptation-800: #4d3836;
  --color-chocolate-temptation-900: #3c2b29;
  --color-chocolate-temptation-950: #271a19;
  --color-creamed-caramel: #b79a97;
  --color-creamed-caramel-50: #fff2f0;
  --color-creamed-caramel-100: #fae6e4;
  --color-creamed-caramel-200: #e9d2cf;
  --color-creamed-caramel-300: #d4bab8;
  --color-creamed-caramel-400: #b79a97;
  --color-creamed-caramel-500: #9b7f7c;
  --color-creamed-caramel-600: #7f6562;
  --color-creamed-caramel-700: #664f4c;
  --color-creamed-caramel-800: #513d3b;
  --color-creamed-caramel-900: #3f2e2c;
  --color-creamed-caramel-950: #281c1a;
  --color-shallow-sea: #9bbabd;
  --color-shallow-sea-50: #dff2f4;
  --color-shallow-sea-100: #d1e7e9;
  --color-shallow-sea-200: #b8d1d4;
  --color-shallow-sea-300: #9bbabd;
  --color-shallow-sea-400: #7f9da0;
  --color-shallow-sea-500: #668487;
  --color-shallow-sea-600: #506b6e;
  --color-shallow-sea-700: #3d5759;
  --color-shallow-sea-800: #2f4547;
  --color-shallow-sea-900: #233739;
  --color-shallow-sea-950: #142223;
  --color-poolside: #b7e0e5;
  --color-poolside-50: #e4fafd;
  --color-poolside-100: #d7f1f4;
  --color-poolside-200: #b7e0e5;
  --color-poolside-300: #a6c8cc;
  --color-poolside-400: #83a9ae;
  --color-poolside-500: #678e93;
  --color-poolside-600: #4e7378;
  --color-poolside-700: #3a5c60;
  --color-poolside-800: #2a484c;
  --color-poolside-900: #1e383b;
  --color-poolside-950: #102325;
}