Start generating

Murasaki to Frost color palette

4A2E51Murasaki665067Hibernation84737CChain MailA39891Earl GreyC2BEA7Forgotten TuskE3E5BCFrost
Open in generator Export PNG, PDF, ASE…

About this palette

Murasaki to Frost is a 6-color muted palette: #4A2E51 (Murasaki), #665067 (Hibernation), #84737C (Chain Mail), #A39891 (Earl Grey), #C2BEA7 (Forgotten Tusk), #E3E5BC (Frost). It mixes purple, pink, gray, yellow tones and feels cool overall. The strongest text pairing is #4A2E51 on #E3E5BC with a contrast ratio of 9.00:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Murasakirgb(74, 46, 81)hsl(288, 28%, 25%)
Hibernationrgb(102, 80, 103)hsl(297, 13%, 36%)
Chain Mailrgb(132, 115, 124)hsl(328, 7%, 48%)
Earl Greyrgb(163, 152, 145)hsl(23, 9%, 60%)
Forgotten Tuskrgb(194, 190, 167)hsl(51, 18%, 71%)
Frostrgb(227, 229, 188)hsl(63, 44%, 82%)

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.

  • Aa9.00:1 Very good#4A2E51 on #E3E5BC
  • Aa9.00:1 Very good#E3E5BC on #4A2E51
  • Aa6.23:1 Good#4A2E51 on #C2BEA7
  • Aa6.23:1 Good#C2BEA7 on #4A2E51
  • Aa5.57:1 Good#665067 on #E3E5BC
  • Aa5.57:1 Good#E3E5BC on #665067
  • Aa4.14:1 Poor#4A2E51 on #A39891
  • Aa4.14:1 Poor#A39891 on #4A2E51

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Murasaki to Frost — https://swatchly.xyz/palette/4a2e51-665067-84737c-a39891-c2bea7-e3e5bc */
:root {
  --murasaki: #4a2e51;
  --hibernation: #665067;
  --chain-mail: #84737c;
  --earl-grey: #a39891;
  --forgotten-tusk: #c2bea7;
  --frost: #e3e5bc;
}

Tailwind CSS v4

/* Murasaki to Frost — https://swatchly.xyz/palette/4a2e51-665067-84737c-a39891-c2bea7-e3e5bc */
@theme {
  --color-murasaki: #4a2e51;
  --color-murasaki-50: #fcf1ff;
  --color-murasaki-100: #f8e3fe;
  --color-murasaki-200: #e7cded;
  --color-murasaki-300: #d1b4d8;
  --color-murasaki-400: #b191b9;
  --color-murasaki-500: #94759c;
  --color-murasaki-600: #775a7e;
  --color-murasaki-700: #5d4364;
  --color-murasaki-800: #4a2e51;
  --color-murasaki-900: #37253c;
  --color-murasaki-950: #221525;
  --color-hibernation: #665067;
  --color-hibernation-50: #fef0ff;
  --color-hibernation-100: #f5e5f6;
  --color-hibernation-200: #e4d1e5;
  --color-hibernation-300: #d0bad0;
  --color-hibernation-400: #b29ab3;
  --color-hibernation-500: #977f98;
  --color-hibernation-600: #7d667e;
  --color-hibernation-700: #665067;
  --color-hibernation-800: #503e51;
  --color-hibernation-900: #3e2f3f;
  --color-hibernation-950: #271c28;
  --color-chain-mail: #84737c;
  --color-chain-mail-50: #fcf2f7;
  --color-chain-mail-100: #f6eaf0;
  --color-chain-mail-200: #e6d8df;
  --color-chain-mail-300: #d2c3cb;
  --color-chain-mail-400: #b6a5ae;
  --color-chain-mail-500: #9d8c95;
  --color-chain-mail-600: #84737c;
  --color-chain-mail-700: #6a5a63;
  --color-chain-mail-800: #53464d;
  --color-chain-mail-900: #40353b;
  --color-chain-mail-950: #282024;
  --color-earl-grey: #a39891;
  --color-earl-grey-50: #f8f1ed;
  --color-earl-grey-100: #ede6e1;
  --color-earl-grey-200: #d9d0cb;
  --color-earl-grey-300: #c3b9b2;
  --color-earl-grey-400: #a39891;
  --color-earl-grey-500: #897e77;
  --color-earl-grey-600: #6f655f;
  --color-earl-grey-700: #59504a;
  --color-earl-grey-800: #463f3a;
  --color-earl-grey-900: #37302c;
  --color-earl-grey-950: #231e1b;
  --color-forgotten-tusk: #c2bea7;
  --color-forgotten-tusk-50: #f6f4e6;
  --color-forgotten-tusk-100: #ece9da;
  --color-forgotten-tusk-200: #d8d5c3;
  --color-forgotten-tusk-300: #c2bea7;
  --color-forgotten-tusk-400: #a39f8a;
  --color-forgotten-tusk-500: #88856f;
  --color-forgotten-tusk-600: #6e6b56;
  --color-forgotten-tusk-700: #585542;
  --color-forgotten-tusk-800: #454232;
  --color-forgotten-tusk-900: #363325;
  --color-forgotten-tusk-950: #211f16;
  --color-frost: #e3e5bc;
  --color-frost-50: #fdfee9;
  --color-frost-100: #f4f6df;
  --color-frost-200: #e3e5bc;
  --color-frost-300: #caccab;
  --color-frost-400: #a9ab86;
  --color-frost-500: #8c8e68;
  --color-frost-600: #70724d;
  --color-frost-700: #585938;
  --color-frost-800: #444528;
  --color-frost-900: #34351c;
  --color-frost-950: #20210f;
}

Similar palettes