Start generating

Bone-Chilling to Noir Mystique color palette

E2F1EDBone-ChillingABB7D6Over the Moon98838FFemme Fatale4E776CTurquoise Tortoise3C424EMadonna1E1A12Noir Mystique
Open in generator Export PNG, PDF, ASE…

About this palette

Bone-Chilling to Noir Mystique is a 6-color muted, gradient palette: #E2F1ED (Bone-Chilling), #ABB7D6 (Over the Moon), #98838F (Femme Fatale), #4E776C (Turquoise Tortoise), #3C424E (Madonna), #1E1A12 (Noir Mystique). It mixes white, blue, gray, turquoise, black tones and feels cool overall. The strongest text pairing is #E2F1ED on #1E1A12 with a contrast ratio of 14.89:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Bone-Chillingrgb(226, 241, 237)hsl(164, 35%, 92%)
Over the Moonrgb(171, 183, 214)hsl(223, 34%, 75%)
Femme Fatalergb(152, 131, 143)hsl(326, 9%, 55%)
Turquoise Tortoisergb(78, 119, 108)hsl(164, 21%, 39%)
Madonnargb(60, 66, 78)hsl(220, 13%, 27%)
Noir Mystiquergb(30, 26, 18)hsl(40, 25%, 9%)

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.89:1 Super#E2F1ED on #1E1A12
  • Aa14.89:1 Super#1E1A12 on #E2F1ED
  • Aa8.67:1 Very good#E2F1ED on #3C424E
  • Aa8.67:1 Very good#3C424E on #E2F1ED
  • Aa8.65:1 Very good#ABB7D6 on #1E1A12
  • Aa8.65:1 Very good#1E1A12 on #ABB7D6
  • Aa5.03:1 Good#ABB7D6 on #3C424E
  • Aa5.03:1 Good#3C424E on #ABB7D6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Bone-Chilling to Noir Mystique — https://swatchly.xyz/palette/e2f1ed-abb7d6-98838f-4e776c-3c424e-1e1a12 */
:root {
  --bone-chilling: #e2f1ed;
  --over-the-moon: #abb7d6;
  --femme-fatale: #98838f;
  --turquoise-tortoise: #4e776c;
  --madonna: #3c424e;
  --noir-mystique: #1e1a12;
}

Tailwind CSS v4

/* Bone-Chilling to Noir Mystique — https://swatchly.xyz/palette/e2f1ed-abb7d6-98838f-4e776c-3c424e-1e1a12 */
@theme {
  --color-bone-chilling: #e2f1ed;
  --color-bone-chilling-50: #f1f9f7;
  --color-bone-chilling-100: #e2f1ed;
  --color-bone-chilling-200: #d1dcd9;
  --color-bone-chilling-300: #b9c5c2;
  --color-bone-chilling-400: #98a6a2;
  --color-bone-chilling-500: #7d8a87;
  --color-bone-chilling-600: #626f6c;
  --color-bone-chilling-700: #4d5855;
  --color-bone-chilling-800: #3b4542;
  --color-bone-chilling-900: #2c3533;
  --color-bone-chilling-950: #1b211f;
  --color-over-the-moon: #abb7d6;
  --color-over-the-moon-50: #eaf0ff;
  --color-over-the-moon-100: #dce4fa;
  --color-over-the-moon-200: #c5cfe8;
  --color-over-the-moon-300: #abb7d6;
  --color-over-the-moon-400: #8e99b7;
  --color-over-the-moon-500: #75809d;
  --color-over-the-moon-600: #5d6782;
  --color-over-the-moon-700: #49526a;
  --color-over-the-moon-800: #384056;
  --color-over-the-moon-900: #2b3245;
  --color-over-the-moon-950: #1a1f2c;
  --color-femme-fatale: #98838f;
  --color-femme-fatale-50: #fef2f9;
  --color-femme-fatale-100: #f6e8f0;
  --color-femme-fatale-200: #e5d4dd;
  --color-femme-fatale-300: #d0bdc8;
  --color-femme-fatale-400: #b39eaa;
  --color-femme-fatale-500: #98838f;
  --color-femme-fatale-600: #7c6874;
  --color-femme-fatale-700: #64525c;
  --color-femme-fatale-800: #4e3f48;
  --color-femme-fatale-900: #3d2f37;
  --color-femme-fatale-950: #261c22;
  --color-turquoise-tortoise: #4e776c;
  --color-turquoise-tortoise-50: #e3fbf4;
  --color-turquoise-tortoise-100: #d8f3ea;
  --color-turquoise-tortoise-200: #c0e0d7;
  --color-turquoise-tortoise-300: #a6cbc0;
  --color-turquoise-tortoise-400: #84ada1;
  --color-turquoise-tortoise-500: #689286;
  --color-turquoise-tortoise-600: #4e776c;
  --color-turquoise-tortoise-700: #3a5f55;
  --color-turquoise-tortoise-800: #2a4b42;
  --color-turquoise-tortoise-900: #1e3a33;
  --color-turquoise-tortoise-950: #10241f;
  --color-madonna: #3c424e;
  --color-madonna-50: #f1f5fe;
  --color-madonna-100: #e7ebf5;
  --color-madonna-200: #d2d8e3;
  --color-madonna-300: #bbc1cd;
  --color-madonna-400: #9ba1af;
  --color-madonna-500: #7f8694;
  --color-madonna-600: #656c78;
  --color-madonna-700: #4f5561;
  --color-madonna-800: #3c424e;
  --color-madonna-900: #2e333b;
  --color-madonna-950: #1c1f25;
  --color-noir-mystique: #1e1a12;
  --color-noir-mystique-50: #f8f5ef;
  --color-noir-mystique-100: #eeebe4;
  --color-noir-mystique-200: #dbd7cf;
  --color-noir-mystique-300: #c5c0b7;
  --color-noir-mystique-400: #a6a197;
  --color-noir-mystique-500: #8a857a;
  --color-noir-mystique-600: #6e6960;
  --color-noir-mystique-700: #565249;
  --color-noir-mystique-800: #423e37;
  --color-noir-mystique-900: #312e28;
  --color-noir-mystique-950: #1e1a12;
}

Similar palettes