Start generating

Frozen Civilization to Darth Vader color palette

E4F6E7Frozen CivilizationBAA2BCLily6C7F6FEcological496148Muddy Olive282329Darth Vader
Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Civilization to Darth Vader is a 5-color muted palette: #E4F6E7 (Frozen Civilization), #BAA2BC (Lily), #6C7F6F (Ecological), #496148 (Muddy Olive), #282329 (Darth Vader). It mixes white, pink, gray, green tones and feels cool overall. The strongest text pairing is #E4F6E7 on #282329 with a contrast ratio of 13.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frozen Civilizationrgb(228, 246, 231)hsl(130, 50%, 93%)
Lilyrgb(186, 162, 188)hsl(295, 16%, 69%)
Ecologicalrgb(108, 127, 111)hsl(129, 8%, 46%)
Muddy Olivergb(73, 97, 72)hsl(118, 15%, 33%)
Darth Vaderrgb(40, 35, 41)hsl(290, 8%, 15%)

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.

  • Aa13.68:1 Super#E4F6E7 on #282329
  • Aa13.68:1 Super#282329 on #E4F6E7
  • Aa6.59:1 Good#BAA2BC on #282329
  • Aa6.59:1 Good#282329 on #BAA2BC
  • Aa6.04:1 Good#E4F6E7 on #496148
  • Aa6.04:1 Good#496148 on #E4F6E7
  • Aa3.80:1 Poor#E4F6E7 on #6C7F6F
  • Aa3.80:1 Poor#6C7F6F on #E4F6E7

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frozen Civilization to Darth Vader — https://swatchly.xyz/palette/e4f6e7-baa2bc-6c7f6f-496148-282329 */
:root {
  --frozen-civilization: #e4f6e7;
  --lily: #baa2bc;
  --ecological: #6c7f6f;
  --muddy-olive: #496148;
  --darth-vader: #282329;
}

Tailwind CSS v4

/* Frozen Civilization to Darth Vader — https://swatchly.xyz/palette/e4f6e7-baa2bc-6c7f6f-496148-282329 */
@theme {
  --color-frozen-civilization: #e4f6e7;
  --color-frozen-civilization-50: #e4f6e7;
  --color-frozen-civilization-100: #dfebe1;
  --color-frozen-civilization-200: #cbd8cd;
  --color-frozen-civilization-300: #b4c3b7;
  --color-frozen-civilization-400: #95a598;
  --color-frozen-civilization-500: #7a8a7d;
  --color-frozen-civilization-600: #617064;
  --color-frozen-civilization-700: #4b594e;
  --color-frozen-civilization-800: #3a463c;
  --color-frozen-civilization-900: #2c362d;
  --color-frozen-civilization-950: #1a211b;
  --color-lily: #baa2bc;
  --color-lily-50: #fef5ff;
  --color-lily-100: #faebfb;
  --color-lily-200: #e9d8eb;
  --color-lily-300: #d6c2d7;
  --color-lily-400: #baa2bc;
  --color-lily-500: #9c859e;
  --color-lily-600: #7f6981;
  --color-lily-700: #665268;
  --color-lily-800: #503e51;
  --color-lily-900: #3d2e3e;
  --color-lily-950: #251b26;
  --color-ecological: #6c7f6f;
  --color-ecological-50: #eaf6ec;
  --color-ecological-100: #ddebdf;
  --color-ecological-200: #c5d5c8;
  --color-ecological-300: #abbdae;
  --color-ecological-400: #899c8c;
  --color-ecological-500: #6c7f6f;
  --color-ecological-600: #556758;
  --color-ecological-700: #425245;
  --color-ecological-800: #334135;
  --color-ecological-900: #273329;
  --color-ecological-950: #182019;
  --color-muddy-olive: #496148;
  --color-muddy-olive-50: #ebfaea;
  --color-muddy-olive-100: #e0f1df;
  --color-muddy-olive-200: #cbdfca;
  --color-muddy-olive-300: #b3cab2;
  --color-muddy-olive-400: #93ac92;
  --color-muddy-olive-500: #789177;
  --color-muddy-olive-600: #5f775e;
  --color-muddy-olive-700: #496148;
  --color-muddy-olive-800: #384c37;
  --color-muddy-olive-900: #2a3b29;
  --color-muddy-olive-950: #192518;
  --color-darth-vader: #282329;
  --color-darth-vader-50: #f7f4f8;
  --color-darth-vader-100: #eee9ee;
  --color-darth-vader-200: #dad5db;
  --color-darth-vader-300: #c4bfc5;
  --color-darth-vader-400: #a59fa6;
  --color-darth-vader-500: #8b858c;
  --color-darth-vader-600: #726c73;
  --color-darth-vader-700: #5c565d;
  --color-darth-vader-800: #49454a;
  --color-darth-vader-900: #3a363b;
  --color-darth-vader-950: #282329;
}

Similar palettes