Black Magic to Strawberry Cheesecake color palette

543C4BBlack Magic 3C685FJune Ivy 609990Martian Cerulean B99E98Coca Mocha D4C0B9Worn Silver FADEF0Strawberry Cheesecake

Open in generator Export PNG, PDF, ASE…

About this palette

Black Magic to Strawberry Cheesecake is a 6-color muted palette: #543C4B (Black Magic), #3C685F (June Ivy), #609990 (Martian Cerulean), #B99E98 (Coca Mocha), #D4C0B9 (Worn Silver), #FADEF0 (Strawberry Cheesecake). It mixes red, turquoise, gray, pink tones and feels balanced overall. The strongest text pairing is #543C4B on #FADEF0 with a contrast ratio of 7.89:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(84, 60, 75)	hsl(322, 17%, 28%)
June Ivy	rgb(60, 104, 95)	hsl(168, 27%, 32%)
Martian Cerulean	rgb(96, 153, 144)	hsl(171, 23%, 49%)
Coca Mocha	rgb(185, 158, 152)	hsl(11, 19%, 66%)
Worn Silver	rgb(212, 192, 185)	hsl(16, 24%, 78%)
Strawberry Cheesecake	rgb(250, 222, 240)	hsl(321, 74%, 93%)

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.

Aa7.89:1 Very good#543C4B on #FADEF0
Aa7.89:1 Very good#FADEF0 on #543C4B
Aa5.67:1 Good#543C4B on #D4C0B9
Aa5.67:1 Good#D4C0B9 on #543C4B
Aa5.03:1 Good#3C685F on #FADEF0
Aa5.03:1 Good#FADEF0 on #3C685F
Aa3.96:1 Poor#543C4B on #B99E98
Aa3.96:1 Poor#B99E98 on #543C4B

Color blindness preview

CSS variables

/* Black Magic to Strawberry Cheesecake — https://swatchly.xyz/palette/543c4b-3c685f-609990-b99e98-d4c0b9-fadef0 */
:root {
  --black-magic: #543c4b;
  --june-ivy: #3c685f;
  --martian-cerulean: #609990;
  --coca-mocha: #b99e98;
  --worn-silver: #d4c0b9;
  --strawberry-cheesecake: #fadef0;
}

Tailwind CSS v4

/* Black Magic to Strawberry Cheesecake — https://swatchly.xyz/palette/543c4b-3c685f-609990-b99e98-d4c0b9-fadef0 */
@theme {
  --color-black-magic: #543c4b;
  --color-black-magic-50: #fff0f9;
  --color-black-magic-100: #f8e5f0;
  --color-black-magic-200: #e6d0dd;
  --color-black-magic-300: #d2b9c8;
  --color-black-magic-400: #b499aa;
  --color-black-magic-500: #997e8f;
  --color-black-magic-600: #7e6474;
  --color-black-magic-700: #664f5d;
  --color-black-magic-800: #543c4b;
  --color-black-magic-900: #402e39;
  --color-black-magic-950: #291c24;
  --color-june-ivy: #3c685f;
  --color-june-ivy-50: #e2fcf6;
  --color-june-ivy-100: #d6f3ec;
  --color-june-ivy-200: #c0e2da;
  --color-june-ivy-300: #a7cec5;
  --color-june-ivy-400: #86b1a7;
  --color-june-ivy-500: #6a978d;
  --color-june-ivy-600: #527e74;
  --color-june-ivy-700: #3c685f;
  --color-june-ivy-800: #2c524a;
  --color-june-ivy-900: #1f3f39;
  --color-june-ivy-950: #102823;
  --color-martian-cerulean: #609990;
  --color-martian-cerulean-50: #dffef8;
  --color-martian-cerulean-100: #d3f6f0;
  --color-martian-cerulean-200: #bbe5de;
  --color-martian-cerulean-300: #a1d1c8;
  --color-martian-cerulean-400: #7db3aa;
  --color-martian-cerulean-500: #609990;
  --color-martian-cerulean-600: #457d74;
  --color-martian-cerulean-700: #2f645c;
  --color-martian-cerulean-800: #1f4e48;
  --color-martian-cerulean-900: #133c37;
  --color-martian-cerulean-950: #082622;
  --color-coca-mocha: #b99e98;
  --color-coca-mocha-50: #fff3f1;
  --color-coca-mocha-100: #fae9e5;
  --color-coca-mocha-200: #ead5d0;
  --color-coca-mocha-300: #d5beb9;
  --color-coca-mocha-400: #b99e98;
  --color-coca-mocha-500: #9c827c;
  --color-coca-mocha-600: #806762;
  --color-coca-mocha-700: #67514c;
  --color-coca-mocha-800: #513e3a;
  --color-coca-mocha-900: #3f2f2b;
  --color-coca-mocha-950: #281c1a;
  --color-worn-silver: #d4c0b9;
  --color-worn-silver-50: #fff5f1;
  --color-worn-silver-100: #f7ebe7;
  --color-worn-silver-200: #e6d7d2;
  --color-worn-silver-300: #d4c0b9;
  --color-worn-silver-400: #b3a09a;
  --color-worn-silver-500: #97847e;
  --color-worn-silver-600: #7b6963;
  --color-worn-silver-700: #62524d;
  --color-worn-silver-800: #4d3f3b;
  --color-worn-silver-900: #3b302c;
  --color-worn-silver-950: #251d1a;
  --color-strawberry-cheesecake: #fadef0;
  --color-strawberry-cheesecake-50: #fdedf7;
  --color-strawberry-cheesecake-100: #fadef0;
  --color-strawberry-cheesecake-200: #e2cddb;
  --color-strawberry-cheesecake-300: #ceb7c6;
  --color-strawberry-cheesecake-400: #b097a7;
  --color-strawberry-cheesecake-500: #957c8d;
  --color-strawberry-cheesecake-600: #7b6373;
  --color-strawberry-cheesecake-700: #634e5c;
  --color-strawberry-cheesecake-800: #4e3c48;
  --color-strawberry-cheesecake-900: #3d2d38;
  --color-strawberry-cheesecake-950: #261b23;
}