Strawberry Risotto to Midnight Masquerade color palette

EBC9BCStrawberry Risotto C9A397Cashmere Clay 87A698Envy 507466Green Sleeves 4C516FIntergalactic 282941Midnight Masquerade

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Risotto to Midnight Masquerade is a 6-color muted, cool palette: #EBC9BC (Strawberry Risotto), #C9A397 (Cashmere Clay), #87A698 (Envy), #507466 (Green Sleeves), #4C516F (Intergalactic), #282941 (Midnight Masquerade). It mixes orange, red, turquoise, purple tones and feels cool overall. The strongest text pairing is #EBC9BC on #282941 with a contrast ratio of 9.18:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Risotto	rgb(235, 201, 188)	hsl(17, 54%, 83%)
Cashmere Clay	rgb(201, 163, 151)	hsl(14, 32%, 69%)
Envy	rgb(135, 166, 152)	hsl(153, 15%, 59%)
Green Sleeves	rgb(80, 116, 102)	hsl(157, 18%, 38%)
Intergalactic	rgb(76, 81, 111)	hsl(231, 19%, 37%)
Midnight Masquerade	rgb(40, 41, 65)	hsl(238, 24%, 21%)

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.18:1 Very good#EBC9BC on #282941
Aa9.18:1 Very good#282941 on #EBC9BC
Aa6.18:1 Good#C9A397 on #282941
Aa6.18:1 Good#282941 on #C9A397
Aa5.35:1 Good#87A698 on #282941
Aa5.35:1 Good#282941 on #87A698
Aa5.02:1 Good#EBC9BC on #4C516F
Aa5.02:1 Good#4C516F on #EBC9BC

Color blindness preview

CSS variables

/* Strawberry Risotto to Midnight Masquerade — https://swatchly.xyz/palette/ebc9bc-c9a397-87a698-507466-4c516f-282941 */
:root {
  --strawberry-risotto: #ebc9bc;
  --cashmere-clay: #c9a397;
  --envy: #87a698;
  --green-sleeves: #507466;
  --intergalactic: #4c516f;
  --midnight-masquerade: #282941;
}

Tailwind CSS v4

/* Strawberry Risotto to Midnight Masquerade — https://swatchly.xyz/palette/ebc9bc-c9a397-87a698-507466-4c516f-282941 */
@theme {
  --color-strawberry-risotto: #ebc9bc;
  --color-strawberry-risotto-50: #ffede6;
  --color-strawberry-risotto-100: #f7e1d8;
  --color-strawberry-risotto-200: #ebc9bc;
  --color-strawberry-risotto-300: #d2b5aa;
  --color-strawberry-risotto-400: #b5968a;
  --color-strawberry-risotto-500: #9a7b70;
  --color-strawberry-risotto-600: #806257;
  --color-strawberry-risotto-700: #684d43;
  --color-strawberry-risotto-800: #533c33;
  --color-strawberry-risotto-900: #412e26;
  --color-strawberry-risotto-950: #291b16;
  --color-cashmere-clay: #c9a397;
  --color-cashmere-clay-50: #fff7f5;
  --color-cashmere-clay-100: #ffede7;
  --color-cashmere-clay-200: #f4d8d0;
  --color-cashmere-clay-300: #e3c3b9;
  --color-cashmere-clay-400: #c9a397;
  --color-cashmere-clay-500: #aa867a;
  --color-cashmere-clay-600: #8c695e;
  --color-cashmere-clay-700: #715248;
  --color-cashmere-clay-800: #593e35;
  --color-cashmere-clay-900: #452e27;
  --color-cashmere-clay-950: #2b1b16;
  --color-envy: #87a698;
  --color-envy-50: #e7f9f0;
  --color-envy-100: #daefe5;
  --color-envy-200: #c3dcd0;
  --color-envy-300: #aac5b8;
  --color-envy-400: #87a698;
  --color-envy-500: #6d8b7e;
  --color-envy-600: #547164;
  --color-envy-700: #405a4f;
  --color-envy-800: #30473d;
  --color-envy-900: #24372f;
  --color-envy-950: #15231d;
  --color-green-sleeves: #507466;
  --color-green-sleeves-50: #e6fbf2;
  --color-green-sleeves-100: #d9f2e7;
  --color-green-sleeves-200: #c2dfd3;
  --color-green-sleeves-300: #a8c9bc;
  --color-green-sleeves-400: #86aa9c;
  --color-green-sleeves-500: #6a8f80;
  --color-green-sleeves-600: #507466;
  --color-green-sleeves-700: #3c5d50;
  --color-green-sleeves-800: #2c493e;
  --color-green-sleeves-900: #20382f;
  --color-green-sleeves-950: #12231d;
  --color-intergalactic: #4c516f;
  --color-intergalactic-50: #f2f4ff;
  --color-intergalactic-100: #e6eaff;
  --color-intergalactic-200: #d0d6f0;
  --color-intergalactic-300: #b9bedc;
  --color-intergalactic-400: #989ebf;
  --color-intergalactic-500: #7d83a3;
  --color-intergalactic-600: #636887;
  --color-intergalactic-700: #4c516f;
  --color-intergalactic-800: #3b3f57;
  --color-intergalactic-900: #2d3044;
  --color-intergalactic-950: #1b1d2c;
  --color-midnight-masquerade: #282941;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e8e9fd;
  --color-midnight-masquerade-200: #d3d5ed;
  --color-midnight-masquerade-300: #bcbfd9;
  --color-midnight-masquerade-400: #9b9dba;
  --color-midnight-masquerade-500: #7e819d;
  --color-midnight-masquerade-600: #636580;
  --color-midnight-masquerade-700: #4c4e66;
  --color-midnight-masquerade-800: #393a4e;
  --color-midnight-masquerade-900: #282941;
  --color-midnight-masquerade-950: #181924;
}