Berries N’ Cream to Midnight Masquerade color palette

F2BBC6Berries N’ Cream 64B2B4Thalassa 8F8660Wilderness 137D7AWizards Orb 474C77Noble Knight 282A40Midnight Masquerade

Open in generator Export PNG, PDF, ASE…

About this palette

Berries N’ Cream to Midnight Masquerade is a 6-color cool palette: #F2BBC6 (Berries N’ Cream), #64B2B4 (Thalassa), #8F8660 (Wilderness), #137D7A (Wizards Orb), #474C77 (Noble Knight), #282A40 (Midnight Masquerade). It mixes pink, turquoise, yellow, purple tones and feels cool overall. The strongest text pairing is #F2BBC6 on #282A40 with a contrast ratio of 8.49:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Berries N’ Cream	rgb(242, 187, 198)	hsl(348, 68%, 84%)
Thalassa	rgb(100, 178, 180)	hsl(182, 35%, 55%)
Wilderness	rgb(143, 134, 96)	hsl(49, 20%, 47%)
Wizards Orb	rgb(19, 125, 122)	hsl(178, 74%, 28%)
Noble Knight	rgb(71, 76, 119)	hsl(234, 25%, 37%)
Midnight Masquerade	rgb(40, 42, 64)	hsl(235, 23%, 20%)

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.

Aa8.49:1 Very good#F2BBC6 on #282A40
Aa8.49:1 Very good#282A40 on #F2BBC6
Aa5.73:1 Good#64B2B4 on #282A40
Aa5.73:1 Good#282A40 on #64B2B4
Aa4.94:1 Good#F2BBC6 on #474C77
Aa4.94:1 Good#474C77 on #F2BBC6
Aa3.84:1 Poor#8F8660 on #282A40
Aa3.84:1 Poor#282A40 on #8F8660

Color blindness preview

CSS variables

/* Berries N’ Cream to Midnight Masquerade — https://swatchly.xyz/palette/f2bbc6-64b2b4-8f8660-137d7a-474c77-282a40 */
:root {
  --berries-n-cream: #f2bbc6;
  --thalassa: #64b2b4;
  --wilderness: #8f8660;
  --wizards-orb: #137d7a;
  --noble-knight: #474c77;
  --midnight-masquerade: #282a40;
}

Tailwind CSS v4

/* Berries N’ Cream to Midnight Masquerade — https://swatchly.xyz/palette/f2bbc6-64b2b4-8f8660-137d7a-474c77-282a40 */
@theme {
  --color-berries-n-cream: #f2bbc6;
  --color-berries-n-cream-50: #fff9fa;
  --color-berries-n-cream-100: #ffeef1;
  --color-berries-n-cream-200: #fcd5dd;
  --color-berries-n-cream-300: #f2bbc6;
  --color-berries-n-cream-400: #cd9ba5;
  --color-berries-n-cream-500: #b07d88;
  --color-berries-n-cream-600: #91616b;
  --color-berries-n-cream-700: #764a54;
  --color-berries-n-cream-800: #5d3740;
  --color-berries-n-cream-900: #47282f;
  --color-berries-n-cream-950: #2e181d;
  --color-thalassa: #64b2b4;
  --color-thalassa-50: #d8feff;
  --color-thalassa-100: #c8f6f7;
  --color-thalassa-200: #ade5e6;
  --color-thalassa-300: #8fd0d1;
  --color-thalassa-400: #64b2b4;
  --color-thalassa-500: #479698;
  --color-thalassa-600: #2a7a7c;
  --color-thalassa-700: #126264;
  --color-thalassa-800: #004d4f;
  --color-thalassa-900: #003b3d;
  --color-thalassa-950: #002526;
  --color-wilderness: #8f8660;
  --color-wilderness-50: #fbf6df;
  --color-wilderness-100: #f1ebd2;
  --color-wilderness-200: #dfd8ba;
  --color-wilderness-300: #c9c19f;
  --color-wilderness-400: #aaa27c;
  --color-wilderness-500: #8f8660;
  --color-wilderness-600: #746c47;
  --color-wilderness-700: #5d5534;
  --color-wilderness-800: #494225;
  --color-wilderness-900: #39331a;
  --color-wilderness-950: #231f0d;
  --color-wizards-orb: #137d7a;
  --color-wizards-orb-50: #d5fffc;
  --color-wizards-orb-100: #c2f8f5;
  --color-wizards-orb-200: #a6e6e3;
  --color-wizards-orb-300: #87d2ce;
  --color-wizards-orb-400: #5db3b0;
  --color-wizards-orb-500: #3a9895;
  --color-wizards-orb-600: #137d7a;
  --color-wizards-orb-700: #006461;
  --color-wizards-orb-800: #004e4c;
  --color-wizards-orb-900: #003c3b;
  --color-wizards-orb-950: #002625;
  --color-noble-knight: #474c77;
  --color-noble-knight-50: #f2f4ff;
  --color-noble-knight-100: #e6eaff;
  --color-noble-knight-200: #ced4fa;
  --color-noble-knight-300: #b5bce7;
  --color-noble-knight-400: #949bca;
  --color-noble-knight-500: #787fad;
  --color-noble-knight-600: #5e648f;
  --color-noble-knight-700: #474c77;
  --color-noble-knight-800: #373b5d;
  --color-noble-knight-900: #2a2d49;
  --color-noble-knight-950: #191b2f;
  --color-midnight-masquerade: #282a40;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e7eafc;
  --color-midnight-masquerade-200: #d3d6eb;
  --color-midnight-masquerade-300: #bcbfd7;
  --color-midnight-masquerade-400: #9b9eb8;
  --color-midnight-masquerade-500: #7e819c;
  --color-midnight-masquerade-600: #63667f;
  --color-midnight-masquerade-700: #4c4f65;
  --color-midnight-masquerade-800: #393b4e;
  --color-midnight-masquerade-900: #282a40;
  --color-midnight-masquerade-950: #181924;
}