Start generating

Angry Ghost to Punched Pink color palette

EEBBBBAngry GhostFFF6EFSeashellA3474BLumberjack492436Castro683719MeatloafBD899BPunched Pink
Open in generator Export PNG, PDF, ASE…

About this palette

Angry Ghost to Punched Pink is a 6-color warm, vintage palette: #EEBBBB (Angry Ghost), #FFF6EF (Seashell), #A3474B (Lumberjack), #492436 (Castro), #683719 (Meatloaf), #BD899B (Punched Pink). It mixes pink, white, red, brown tones and feels warm overall. The strongest text pairing is #FFF6EF on #492436 with a contrast ratio of 12.39:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Angry Ghostrgb(238, 187, 187)hsl(0, 60%, 83%)
Seashellrgb(255, 246, 239)hsl(26, 100%, 97%)
Lumberjackrgb(163, 71, 75)hsl(357, 39%, 46%)
Castrorgb(73, 36, 54)hsl(331, 34%, 21%)
Meatloafrgb(104, 55, 25)hsl(23, 61%, 25%)
Punched Pinkrgb(189, 137, 155)hsl(339, 28%, 64%)

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.

  • Aa12.39:1 Super#FFF6EF on #492436
  • Aa12.39:1 Super#492436 on #FFF6EF
  • Aa9.16:1 Very good#FFF6EF on #683719
  • Aa9.16:1 Very good#683719 on #FFF6EF
  • Aa7.84:1 Very good#EEBBBB on #492436
  • Aa7.84:1 Very good#492436 on #EEBBBB
  • Aa5.80:1 Good#EEBBBB on #683719
  • Aa5.80:1 Good#683719 on #EEBBBB

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Angry Ghost to Punched Pink — https://swatchly.xyz/palette/eebbbb-fff6ef-a3474b-492436-683719-bd899b */
:root {
  --angry-ghost: #eebbbb;
  --seashell: #fff6ef;
  --lumberjack: #a3474b;
  --castro: #492436;
  --meatloaf: #683719;
  --punched-pink: #bd899b;
}

Tailwind CSS v4

/* Angry Ghost to Punched Pink — https://swatchly.xyz/palette/eebbbb-fff6ef-a3474b-492436-683719-bd899b */
@theme {
  --color-angry-ghost: #eebbbb;
  --color-angry-ghost-50: #fff8f8;
  --color-angry-ghost-100: #ffecec;
  --color-angry-ghost-200: #f9d5d5;
  --color-angry-ghost-300: #eebbbb;
  --color-angry-ghost-400: #c99b9b;
  --color-angry-ghost-500: #ad7e7e;
  --color-angry-ghost-600: #8f6263;
  --color-angry-ghost-700: #744b4c;
  --color-angry-ghost-800: #5b3939;
  --color-angry-ghost-900: #472a2a;
  --color-angry-ghost-950: #2d1919;
  --color-seashell: #fff6ef;
  --color-seashell-50: #fff6ef;
  --color-seashell-100: #f2ece8;
  --color-seashell-200: #ded8d3;
  --color-seashell-300: #c8c1bb;
  --color-seashell-400: #a9a19a;
  --color-seashell-500: #8d857f;
  --color-seashell-600: #726a64;
  --color-seashell-700: #5b544e;
  --color-seashell-800: #47413c;
  --color-seashell-900: #37322e;
  --color-seashell-950: #221e1c;
  --color-lumberjack: #a3474b;
  --color-lumberjack-50: #fff1f1;
  --color-lumberjack-100: #ffe3e2;
  --color-lumberjack-200: #ffc6c5;
  --color-lumberjack-300: #fca3a3;
  --color-lumberjack-400: #df8081;
  --color-lumberjack-500: #c26265;
  --color-lumberjack-600: #a3474b;
  --color-lumberjack-700: #853439;
  --color-lumberjack-800: #6c252a;
  --color-lumberjack-900: #561a1e;
  --color-lumberjack-950: #380d10;
  --color-castro: #492436;
  --color-castro-50: #fff1f7;
  --color-castro-100: #ffe2ee;
  --color-castro-200: #f0ccdb;
  --color-castro-300: #dcb4c5;
  --color-castro-400: #bf93a6;
  --color-castro-500: #a3778b;
  --color-castro-600: #875d70;
  --color-castro-700: #6d4859;
  --color-castro-800: #573645;
  --color-castro-900: #492436;
  --color-castro-950: #2b1821;
  --color-meatloaf: #683719;
  --color-meatloaf-50: #fff2eb;
  --color-meatloaf-100: #ffe5d8;
  --color-meatloaf-200: #facdb5;
  --color-meatloaf-300: #e7b59a;
  --color-meatloaf-400: #cb9577;
  --color-meatloaf-500: #b0795b;
  --color-meatloaf-600: #946042;
  --color-meatloaf-700: #7a4b2f;
  --color-meatloaf-800: #683719;
  --color-meatloaf-900: #4f2b16;
  --color-meatloaf-950: #331a0a;
  --color-punched-pink: #bd899b;
  --color-punched-pink-50: #ffedf3;
  --color-punched-pink-100: #ffdde8;
  --color-punched-pink-200: #f0c5d3;
  --color-punched-pink-300: #dbabbb;
  --color-punched-pink-400: #bd899b;
  --color-punched-pink-500: #a26f81;
  --color-punched-pink-600: #865768;
  --color-punched-pink-700: #6d4353;
  --color-punched-pink-800: #583341;
  --color-punched-pink-900: #462732;
  --color-punched-pink-950: #2e1720;
}

Similar palettes