Punched Pink to Underworld color palette

B78A92Punched Pink E0C5CDMatt Lilac 485531Zen Garden Olive 607C9DQuiet Harbour 212619Underworld

About this palette

Punched Pink to Underworld is a 5-color muted palette: #B78A92 (Punched Pink), #E0C5CD (Matt Lilac), #485531 (Zen Garden Olive), #607C9D (Quiet Harbour), #212619 (Underworld). It mixes pink, gray, green, blue tones and feels cool overall. The strongest text pairing is #E0C5CD on #212619 with a contrast ratio of 9.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Punched Pink	rgb(183, 138, 146)	hsl(349, 24%, 63%)
Matt Lilac	rgb(224, 197, 205)	hsl(342, 30%, 83%)
Zen Garden Olive	rgb(72, 85, 49)	hsl(82, 27%, 26%)
Quiet Harbour	rgb(96, 124, 157)	hsl(212, 24%, 50%)
Underworld	rgb(33, 38, 25)	hsl(83, 21%, 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.

Aa9.62:1 Very good#E0C5CD on #212619
Aa9.62:1 Very good#212619 on #E0C5CD
Aa5.21:1 Good#B78A92 on #212619
Aa5.21:1 Good#212619 on #B78A92
Aa4.98:1 Good#E0C5CD on #485531
Aa4.98:1 Good#485531 on #E0C5CD
Aa3.59:1 Poor#607C9D on #212619
Aa3.59:1 Poor#212619 on #607C9D

Color blindness preview

CSS variables

/* Punched Pink to Underworld — https://swatchly.xyz/palette/b78a92-e0c5cd-485531-607c9d-212619 */
:root {
  --punched-pink: #b78a92;
  --matt-lilac: #e0c5cd;
  --zen-garden-olive: #485531;
  --quiet-harbour: #607c9d;
  --underworld: #212619;
}

Tailwind CSS v4

/* Punched Pink to Underworld — https://swatchly.xyz/palette/b78a92-e0c5cd-485531-607c9d-212619 */
@theme {
  --color-punched-pink: #b78a92;
  --color-punched-pink-50: #ffecef;
  --color-punched-pink-100: #fddde2;
  --color-punched-pink-200: #ebc6cc;
  --color-punched-pink-300: #d6acb3;
  --color-punched-pink-400: #b78a92;
  --color-punched-pink-500: #9c7179;
  --color-punched-pink-600: #815960;
  --color-punched-pink-700: #69454c;
  --color-punched-pink-800: #55353b;
  --color-punched-pink-900: #43292e;
  --color-punched-pink-950: #2c191d;
  --color-matt-lilac: #e0c5cd;
  --color-matt-lilac-50: #fae9ee;
  --color-matt-lilac-100: #f0dde2;
  --color-matt-lilac-200: #e0c5cd;
  --color-matt-lilac-300: #c9b1b8;
  --color-matt-lilac-400: #ac939b;
  --color-matt-lilac-500: #927a81;
  --color-matt-lilac-600: #796269;
  --color-matt-lilac-700: #624d54;
  --color-matt-lilac-800: #4f3d42;
  --color-matt-lilac-900: #3d2e33;
  --color-matt-lilac-950: #271c1f;
  --color-zen-garden-olive: #485531;
  --color-zen-garden-olive-50: #f0f9e2;
  --color-zen-garden-olive-100: #e5f0d6;
  --color-zen-garden-olive-200: #d0dcbd;
  --color-zen-garden-olive-300: #b7c5a2;
  --color-zen-garden-olive-400: #96a57f;
  --color-zen-garden-olive-500: #7a8862;
  --color-zen-garden-olive-600: #5f6d49;
  --color-zen-garden-olive-700: #485531;
  --color-zen-garden-olive-800: #384226;
  --color-zen-garden-olive-900: #2a331b;
  --color-zen-garden-olive-950: #191f0e;
  --color-quiet-harbour: #607c9d;
  --color-quiet-harbour-50: #ebf4ff;
  --color-quiet-harbour-100: #d6e9ff;
  --color-quiet-harbour-200: #bbd3ef;
  --color-quiet-harbour-300: #a0bbda;
  --color-quiet-harbour-400: #7d99bb;
  --color-quiet-harbour-500: #607c9d;
  --color-quiet-harbour-600: #4a6482;
  --color-quiet-harbour-700: #384f6b;
  --color-quiet-harbour-800: #2a3e56;
  --color-quiet-harbour-900: #1f3045;
  --color-quiet-harbour-950: #121e2d;
  --color-underworld: #212619;
  --color-underworld-50: #f3f7ed;
  --color-underworld-100: #e9ede2;
  --color-underworld-200: #d5dacd;
  --color-underworld-300: #bec3b5;
  --color-underworld-400: #9ea495;
  --color-underworld-500: #848a7a;
  --color-underworld-600: #6a7061;
  --color-underworld-700: #555a4d;
  --color-underworld-800: #43483c;
  --color-underworld-900: #35392e;
  --color-underworld-950: #212619;
}