Frozen Civilization to Black Cherry color palette

DEF5E1Frozen Civilization D2B4CBPurple Poodle B182ACRomanov Mauve 5A7A5BEmerald City 364F3CMountain View 291526Black Cherry

Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Civilization to Black Cherry is a 6-color muted, vintage palette: #DEF5E1 (Frozen Civilization), #D2B4CB (Purple Poodle), #B182AC (Romanov Mauve), #5A7A5B (Emerald City), #364F3C (Mountain View), #291526 (Black Cherry). It mixes white, pink, green, purple tones and feels balanced overall. The strongest text pairing is #DEF5E1 on #291526 with a contrast ratio of 14.85:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frozen Civilization	rgb(222, 245, 225)	hsl(128, 53%, 92%)
Purple Poodle	rgb(210, 180, 203)	hsl(314, 25%, 76%)
Romanov Mauve	rgb(177, 130, 172)	hsl(306, 23%, 60%)
Emerald City	rgb(90, 122, 91)	hsl(122, 15%, 42%)
Mountain View	rgb(54, 79, 60)	hsl(134, 19%, 26%)
Black Cherry	rgb(41, 21, 38)	hsl(309, 32%, 12%)

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.85:1 Super#DEF5E1 on #291526
Aa14.85:1 Super#291526 on #DEF5E1
Aa9.05:1 Very good#D2B4CB on #291526
Aa9.05:1 Very good#291526 on #D2B4CB
Aa7.80:1 Very good#DEF5E1 on #364F3C
Aa7.80:1 Very good#364F3C on #DEF5E1
Aa5.42:1 Good#B182AC on #291526
Aa5.42:1 Good#291526 on #B182AC

Color blindness preview

CSS variables

/* Frozen Civilization to Black Cherry — https://swatchly.xyz/palette/def5e1-d2b4cb-b182ac-5a7a5b-364f3c-291526 */
:root {
  --frozen-civilization: #def5e1;
  --purple-poodle: #d2b4cb;
  --romanov-mauve: #b182ac;
  --emerald-city: #5a7a5b;
  --mountain-view: #364f3c;
  --black-cherry: #291526;
}

Tailwind CSS v4

/* Frozen Civilization to Black Cherry — https://swatchly.xyz/palette/def5e1-d2b4cb-b182ac-5a7a5b-364f3c-291526 */
@theme {
  --color-frozen-civilization: #def5e1;
  --color-frozen-civilization-50: #effbf0;
  --color-frozen-civilization-100: #def5e1;
  --color-frozen-civilization-200: #cedfd0;
  --color-frozen-civilization-300: #b6c8b8;
  --color-frozen-civilization-400: #94a997;
  --color-frozen-civilization-500: #788d7b;
  --color-frozen-civilization-600: #5e7261;
  --color-frozen-civilization-700: #495b4b;
  --color-frozen-civilization-800: #37473a;
  --color-frozen-civilization-900: #29372b;
  --color-frozen-civilization-950: #19221a;
  --color-purple-poodle: #d2b4cb;
  --color-purple-poodle-50: #ffeefb;
  --color-purple-poodle-100: #f6e3f2;
  --color-purple-poodle-200: #e5cddf;
  --color-purple-poodle-300: #d2b4cb;
  --color-purple-poodle-400: #b296ab;
  --color-purple-poodle-500: #977b90;
  --color-purple-poodle-600: #7c6176;
  --color-purple-poodle-700: #644c5e;
  --color-purple-poodle-800: #4f3a4b;
  --color-purple-poodle-900: #3e2c3a;
  --color-purple-poodle-950: #271b24;
  --color-romanov-mauve: #b182ac;
  --color-romanov-mauve-50: #ffe8fc;
  --color-romanov-mauve-100: #fad8f5;
  --color-romanov-mauve-200: #e7bfe2;
  --color-romanov-mauve-300: #d1a5cc;
  --color-romanov-mauve-400: #b182ac;
  --color-romanov-mauve-500: #976a92;
  --color-romanov-mauve-600: #7d5379;
  --color-romanov-mauve-700: #664062;
  --color-romanov-mauve-800: #52314f;
  --color-romanov-mauve-900: #42253f;
  --color-romanov-mauve-950: #2b172a;
  --color-emerald-city: #5a7a5b;
  --color-emerald-city-50: #e8fce8;
  --color-emerald-city-100: #ddf3de;
  --color-emerald-city-200: #c8e1c8;
  --color-emerald-city-300: #b0cdb0;
  --color-emerald-city-400: #8faf8f;
  --color-emerald-city-500: #739474;
  --color-emerald-city-600: #5a7a5b;
  --color-emerald-city-700: #456246;
  --color-emerald-city-800: #334d34;
  --color-emerald-city-900: #253b26;
  --color-emerald-city-950: #152516;
  --color-mountain-view: #364f3c;
  --color-mountain-view-50: #eafaed;
  --color-mountain-view-100: #dff1e2;
  --color-mountain-view-200: #c9decd;
  --color-mountain-view-300: #b1c9b6;
  --color-mountain-view-400: #91ac97;
  --color-mountain-view-500: #76917c;
  --color-mountain-view-600: #5d7763;
  --color-mountain-view-700: #49614f;
  --color-mountain-view-800: #364f3c;
  --color-mountain-view-900: #2a3d2e;
  --color-mountain-view-950: #19261c;
  --color-black-cherry: #291526;
  --color-black-cherry-50: #fff0fc;
  --color-black-cherry-100: #f7e5f3;
  --color-black-cherry-200: #e5d0e1;
  --color-black-cherry-300: #d0b9cc;
  --color-black-cherry-400: #b298ad;
  --color-black-cherry-500: #967c91;
  --color-black-cherry-600: #7a6276;
  --color-black-cherry-700: #624c5e;
  --color-black-cherry-800: #4d3a49;
  --color-black-cherry-900: #3b2b38;
  --color-black-cherry-950: #291526;
}