Start generating

Bethlehem Superstar to Underworld color palette

EAEFDDBethlehem SuperstarB4B9A5Meadow Morn7C8C62Crispy Crunch5A5F45Tree of Life3C402EMadras1E2017Underworld
Open in generator Export PNG, PDF, ASE…

About this palette

Bethlehem Superstar to Underworld is a 6-color muted, gradient palette: #EAEFDD (Bethlehem Superstar), #B4B9A5 (Meadow Morn), #7C8C62 (Crispy Crunch), #5A5F45 (Tree of Life), #3C402E (Madras), #1E2017 (Underworld). It mixes white, gray, green tones and feels cool overall. The strongest text pairing is #EAEFDD on #1E2017 with a contrast ratio of 14.04:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Bethlehem Superstarrgb(234, 239, 221)hsl(77, 36%, 90%)
Meadow Mornrgb(180, 185, 165)hsl(75, 12%, 69%)
Crispy Crunchrgb(124, 140, 98)hsl(83, 18%, 47%)
Tree of Lifergb(90, 95, 69)hsl(72, 16%, 32%)
Madrasrgb(60, 64, 46)hsl(73, 16%, 22%)
Underworldrgb(30, 32, 23)hsl(73, 16%, 11%)

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.

  • Aa14.04:1 Super#EAEFDD on #1E2017
  • Aa14.04:1 Super#1E2017 on #EAEFDD
  • Aa9.10:1 Very good#EAEFDD on #3C402E
  • Aa9.10:1 Very good#3C402E on #EAEFDD
  • Aa8.18:1 Very good#B4B9A5 on #1E2017
  • Aa8.18:1 Very good#1E2017 on #B4B9A5
  • Aa5.67:1 Good#EAEFDD on #5A5F45
  • Aa5.67:1 Good#5A5F45 on #EAEFDD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Bethlehem Superstar to Underworld — https://swatchly.xyz/palette/eaefdd-b4b9a5-7c8c62-5a5f45-3c402e-1e2017 */
:root {
  --bethlehem-superstar: #eaefdd;
  --meadow-morn: #b4b9a5;
  --crispy-crunch: #7c8c62;
  --tree-of-life: #5a5f45;
  --madras: #3c402e;
  --underworld: #1e2017;
}

Tailwind CSS v4

/* Bethlehem Superstar to Underworld — https://swatchly.xyz/palette/eaefdd-b4b9a5-7c8c62-5a5f45-3c402e-1e2017 */
@theme {
  --color-bethlehem-superstar: #eaefdd;
  --color-bethlehem-superstar-50: #f5f8ee;
  --color-bethlehem-superstar-100: #eaefdd;
  --color-bethlehem-superstar-200: #d7dacd;
  --color-bethlehem-superstar-300: #c0c4b5;
  --color-bethlehem-superstar-400: #a0a494;
  --color-bethlehem-superstar-500: #848979;
  --color-bethlehem-superstar-600: #6a6e5f;
  --color-bethlehem-superstar-700: #545749;
  --color-bethlehem-superstar-800: #414438;
  --color-bethlehem-superstar-900: #32342a;
  --color-bethlehem-superstar-950: #1e2019;
  --color-meadow-morn: #b4b9a5;
  --color-meadow-morn-50: #eef1e5;
  --color-meadow-morn-100: #e2e6d8;
  --color-meadow-morn-200: #cdd1c0;
  --color-meadow-morn-300: #b4b9a5;
  --color-meadow-morn-400: #979c89;
  --color-meadow-morn-500: #7d826f;
  --color-meadow-morn-600: #656958;
  --color-meadow-morn-700: #515444;
  --color-meadow-morn-800: #3f4335;
  --color-meadow-morn-900: #323428;
  --color-meadow-morn-950: #1e2018;
  --color-crispy-crunch: #7c8c62;
  --color-crispy-crunch-50: #effae0;
  --color-crispy-crunch-100: #e4f0d4;
  --color-crispy-crunch-200: #cfddbb;
  --color-crispy-crunch-300: #b8c7a1;
  --color-crispy-crunch-400: #98a87e;
  --color-crispy-crunch-500: #7c8c62;
  --color-crispy-crunch-600: #627149;
  --color-crispy-crunch-700: #4d5a36;
  --color-crispy-crunch-800: #3b4727;
  --color-crispy-crunch-900: #2d371c;
  --color-crispy-crunch-950: #1b220e;
  --color-tree-of-life: #5a5f45;
  --color-tree-of-life-50: #f4f7e7;
  --color-tree-of-life-100: #eaeedb;
  --color-tree-of-life-200: #d7dcc6;
  --color-tree-of-life-300: #c1c7ae;
  --color-tree-of-life-400: #a3a98e;
  --color-tree-of-life-500: #898e73;
  --color-tree-of-life-600: #70755a;
  --color-tree-of-life-700: #5a5f45;
  --color-tree-of-life-800: #464a35;
  --color-tree-of-life-900: #363927;
  --color-tree-of-life-950: #212416;
  --color-madras: #3c402e;
  --color-madras-50: #f4f7eb;
  --color-madras-100: #eaeddf;
  --color-madras-200: #d6dac9;
  --color-madras-300: #bec3b0;
  --color-madras-400: #9ea28e;
  --color-madras-500: #818672;
  --color-madras-600: #676b58;
  --color-madras-700: #505342;
  --color-madras-800: #3c402e;
  --color-madras-900: #2e3124;
  --color-madras-950: #1c1e15;
  --color-underworld: #1e2017;
  --color-underworld-50: #f4f6ef;
  --color-underworld-100: #eaece4;
  --color-underworld-200: #d6d9d0;
  --color-underworld-300: #c0c2b8;
  --color-underworld-400: #a0a398;
  --color-underworld-500: #85887c;
  --color-underworld-600: #6b6d62;
  --color-underworld-700: #54564d;
  --color-underworld-800: #41433b;
  --color-underworld-900: #32332c;
  --color-underworld-950: #1e2017;
}

Similar palettes