Foundation White to Underworld color palette

F2ECFFFoundation White E5B784Cane Sugar 539690Martian Cerulean 644D38Black Power 13211DUnderworld

About this palette

Foundation White to Underworld is a 5-color muted, vintage palette: #F2ECFF (Foundation White), #E5B784 (Cane Sugar), #539690 (Martian Cerulean), #644D38 (Black Power), #13211D (Underworld). It mixes white, orange, turquoise, brown, gray tones and feels warm overall. The strongest text pairing is #F2ECFF on #13211D with a contrast ratio of 14.42:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(242, 236, 255)	hsl(259, 100%, 96%)
Cane Sugar	rgb(229, 183, 132)	hsl(32, 65%, 71%)
Martian Cerulean	rgb(83, 150, 144)	hsl(175, 29%, 46%)
Black Power	rgb(100, 77, 56)	hsl(29, 28%, 31%)
Underworld	rgb(19, 33, 29)	hsl(163, 27%, 10%)

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.42:1 Super#F2ECFF on #13211D
Aa14.42:1 Super#13211D on #F2ECFF
Aa9.06:1 Very good#E5B784 on #13211D
Aa9.06:1 Very good#13211D on #E5B784
Aa6.85:1 Good#F2ECFF on #644D38
Aa6.85:1 Good#644D38 on #F2ECFF
Aa4.86:1 Good#539690 on #13211D
Aa4.86:1 Good#13211D on #539690

Color blindness preview

CSS variables

/* Foundation White to Underworld — https://swatchly.xyz/palette/f2ecff-e5b784-539690-644d38-13211d */
:root {
  --foundation-white: #f2ecff;
  --cane-sugar: #e5b784;
  --martian-cerulean: #539690;
  --black-power: #644d38;
  --underworld: #13211d;
}

Tailwind CSS v4

/* Foundation White to Underworld — https://swatchly.xyz/palette/f2ecff-e5b784-539690-644d38-13211d */
@theme {
  --color-foundation-white: #f2ecff;
  --color-foundation-white-50: #faf7ff;
  --color-foundation-white-100: #f2ecff;
  --color-foundation-white-200: #ddd9e6;
  --color-foundation-white-300: #c6c1d0;
  --color-foundation-white-400: #a6a0b1;
  --color-foundation-white-500: #8a8495;
  --color-foundation-white-600: #6f6979;
  --color-foundation-white-700: #575261;
  --color-foundation-white-800: #44404d;
  --color-foundation-white-900: #34313b;
  --color-foundation-white-950: #201e25;
  --color-cane-sugar: #e5b784;
  --color-cane-sugar-50: #fff3e6;
  --color-cane-sugar-100: #ffe6cc;
  --color-cane-sugar-200: #f3d0ab;
  --color-cane-sugar-300: #e5b784;
  --color-cane-sugar-400: #c39868;
  --color-cane-sugar-500: #a77c4b;
  --color-cane-sugar-600: #8b6232;
  --color-cane-sugar-700: #714c1e;
  --color-cane-sugar-800: #5b3a11;
  --color-cane-sugar-900: #472c07;
  --color-cane-sugar-950: #2e1a02;
  --color-martian-cerulean: #539690;
  --color-martian-cerulean-50: #dafefa;
  --color-martian-cerulean-100: #cdf6f1;
  --color-martian-cerulean-200: #b3e4df;
  --color-martian-cerulean-300: #97cfc9;
  --color-martian-cerulean-400: #71b1ab;
  --color-martian-cerulean-500: #539690;
  --color-martian-cerulean-600: #387a75;
  --color-martian-cerulean-700: #23625d;
  --color-martian-cerulean-800: #134d49;
  --color-martian-cerulean-900: #083c38;
  --color-martian-cerulean-950: #022523;
  --color-black-power: #644d38;
  --color-black-power-50: #fff3e8;
  --color-black-power-100: #f9e8d9;
  --color-black-power-200: #e7d3c1;
  --color-black-power-300: #d2bba7;
  --color-black-power-400: #b49b84;
  --color-black-power-500: #987f68;
  --color-black-power-600: #7c644f;
  --color-black-power-700: #644d38;
  --color-black-power-800: #4e3c2b;
  --color-black-power-900: #3d2d1f;
  --color-black-power-950: #261b11;
  --color-underworld: #13211d;
  --color-underworld-50: #eef8f4;
  --color-underworld-100: #e3eeea;
  --color-underworld-200: #cedbd7;
  --color-underworld-300: #b6c5c0;
  --color-underworld-400: #95a6a1;
  --color-underworld-500: #798a85;
  --color-underworld-600: #5f6f6a;
  --color-underworld-700: #4a5854;
  --color-underworld-800: #384441;
  --color-underworld-900: #2a3431;
  --color-underworld-950: #13211d;
}