Medium Roast to Pandora’s Box Color Palette

About this palette

Medium Roast to Pandora’s Box is a 5-color cool, vintage palette: #3D2100 (Medium Roast), #007073 (Pine Scented Lagoon), #8E7BB4 (Aster), #D599E9 (Dream Vapour), #FFDCB5 (Pandora’s Box). It mixes brown, turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #3D2100 on #FFDCB5 with a contrast ratio of 11.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Medium Roast	rgb(61, 33, 0)	hsl(32, 100%, 12%)
Pine Scented Lagoon	rgb(0, 112, 115)	hsl(182, 100%, 23%)
Aster	rgb(142, 123, 180)	hsl(260, 28%, 59%)
Dream Vapour	rgb(213, 153, 233)	hsl(285, 65%, 76%)
Pandora’s Box	rgb(255, 220, 181)	hsl(32, 100%, 85%)

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.41:1 Very good#3D2100 on #FFDCB5
Aa11.41:1 Very good#FFDCB5 on #3D2100
Aa6.75:1 Good#3D2100 on #D599E9
Aa6.75:1 Good#D599E9 on #3D2100
Aa4.53:1 Good#007073 on #FFDCB5
Aa4.53:1 Good#FFDCB5 on #007073
Aa3.98:1 Poor#3D2100 on #8E7BB4
Aa3.98:1 Poor#8E7BB4 on #3D2100

Color blindness preview

CSS variables

/* Medium Roast to Pandora’s Box — https://swatchly.xyz/palette/3d2100-007073-8e7bb4-d599e9-ffdcb5 */
:root {
  --medium-roast: #3d2100;
  --pine-scented-lagoon: #007073;
  --aster: #8e7bb4;
  --dream-vapour: #d599e9;
  --pandora-s-box: #ffdcb5;
}

Tailwind CSS v4

/* Medium Roast to Pandora’s Box — https://swatchly.xyz/palette/3d2100-007073-8e7bb4-d599e9-ffdcb5 */
@theme {
  --color-medium-roast: #3d2100;
  --color-medium-roast-50: #fff3e7;
  --color-medium-roast-100: #fee7d1;
  --color-medium-roast-200: #edd2b8;
  --color-medium-roast-300: #dabb9d;
  --color-medium-roast-400: #bc9a7a;
  --color-medium-roast-500: #a38160;
  --color-medium-roast-600: #896849;
  --color-medium-roast-700: #725436;
  --color-medium-roast-800: #5e4328;
  --color-medium-roast-900: #4d361e;
  --color-medium-roast-950: #3d2100;
  --color-pine-scented-lagoon: #007073;
  --color-pine-scented-lagoon-50: #d7feff;
  --color-pine-scented-lagoon-100: #c1f5f6;
  --color-pine-scented-lagoon-200: #a2e1e3;
  --color-pine-scented-lagoon-300: #80cacc;
  --color-pine-scented-lagoon-400: #55aaad;
  --color-pine-scented-lagoon-500: #328d8f;
  --color-pine-scented-lagoon-600: #007073;
  --color-pine-scented-lagoon-700: #00595b;
  --color-pine-scented-lagoon-800: #004648;
  --color-pine-scented-lagoon-900: #003638;
  --color-pine-scented-lagoon-950: #002223;
  --color-aster: #8e7bb4;
  --color-aster-50: #f6f3ff;
  --color-aster-100: #eee7ff;
  --color-aster-200: #ddcffd;
  --color-aster-300: #c8b7eb;
  --color-aster-400: #a997cf;
  --color-aster-500: #8e7bb4;
  --color-aster-600: #736197;
  --color-aster-700: #5c4b7c;
  --color-aster-800: #483964;
  --color-aster-900: #382b4f;
  --color-aster-950: #231933;
  --color-dream-vapour: #d599e9;
  --color-dream-vapour-50: #f9e7ff;
  --color-dream-vapour-100: #f4d5ff;
  --color-dream-vapour-200: #e8b7f8;
  --color-dream-vapour-300: #d599e9;
  --color-dream-vapour-400: #b67dc9;
  --color-dream-vapour-500: #9d63af;
  --color-dream-vapour-600: #824c94;
  --color-dream-vapour-700: #6b397b;
  --color-dream-vapour-800: #572b65;
  --color-dream-vapour-900: #462052;
  --color-dream-vapour-950: #2d1235;
  --color-pandora-s-box: #ffdcb5;
  --color-pandora-s-box-50: #ffead3;
  --color-pandora-s-box-100: #ffdcb5;
  --color-pandora-s-box-200: #e6cbae;
  --color-pandora-s-box-300: #d3b695;
  --color-pandora-s-box-400: #b79773;
  --color-pandora-s-box-500: #9d7d59;
  --color-pandora-s-box-600: #826441;
  --color-pandora-s-box-700: #6b4f2f;
  --color-pandora-s-box-800: #553d21;
  --color-pandora-s-box-900: #422e16;
  --color-pandora-s-box-950: #2a1c0a;
}