Pork Belly to Gun Powder color palette

F6E0EAPork Belly B3B2D4Pastel Lilac 858E6FPaid in Full 69775EDill 47485EGun Powder

About this palette

Pork Belly to Gun Powder is a 5-color muted, cool palette: #F6E0EA (Pork Belly), #B3B2D4 (Pastel Lilac), #858E6F (Paid in Full), #69775E (Dill), #47485E (Gun Powder). It mixes gray, purple, green tones and feels cool overall. The strongest text pairing is #F6E0EA on #47485E with a contrast ratio of 7.12:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pork Belly	rgb(246, 224, 234)	hsl(333, 55%, 92%)
Pastel Lilac	rgb(179, 178, 212)	hsl(242, 28%, 76%)
Paid in Full	rgb(133, 142, 111)	hsl(77, 12%, 50%)
Dill	rgb(105, 119, 94)	hsl(94, 12%, 42%)
Gun Powder	rgb(71, 72, 94)	hsl(237, 14%, 32%)

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.12:1 Very good#F6E0EA on #47485E
Aa7.12:1 Very good#47485E on #F6E0EA
Aa4.34:1 Poor#B3B2D4 on #47485E
Aa4.34:1 Poor#47485E on #B3B2D4
Aa3.81:1 Poor#F6E0EA on #69775E
Aa3.81:1 Poor#69775E on #F6E0EA

Color blindness preview

CSS variables

/* Pork Belly to Gun Powder — https://swatchly.xyz/palette/f6e0ea-b3b2d4-858e6f-69775e-47485e */
:root {
  --pork-belly: #f6e0ea;
  --pastel-lilac: #b3b2d4;
  --paid-in-full: #858e6f;
  --dill: #69775e;
  --gun-powder: #47485e;
}

Tailwind CSS v4

/* Pork Belly to Gun Powder — https://swatchly.xyz/palette/f6e0ea-b3b2d4-858e6f-69775e-47485e */
@theme {
  --color-pork-belly: #f6e0ea;
  --color-pork-belly-50: #faeef3;
  --color-pork-belly-100: #f6e0ea;
  --color-pork-belly-200: #dfcfd6;
  --color-pork-belly-300: #cbb8c1;
  --color-pork-belly-400: #ad99a2;
  --color-pork-belly-500: #927f88;
  --color-pork-belly-600: #78656e;
  --color-pork-belly-700: #615058;
  --color-pork-belly-800: #4c3e44;
  --color-pork-belly-900: #3b2f35;
  --color-pork-belly-950: #251c20;
  --color-pastel-lilac: #b3b2d4;
  --color-pastel-lilac-50: #eeedff;
  --color-pastel-lilac-100: #e1e1f9;
  --color-pastel-lilac-200: #cccbe7;
  --color-pastel-lilac-300: #b3b2d4;
  --color-pastel-lilac-400: #9695b5;
  --color-pastel-lilac-500: #7d7b9b;
  --color-pastel-lilac-600: #646381;
  --color-pastel-lilac-700: #504f6a;
  --color-pastel-lilac-800: #3f3e55;
  --color-pastel-lilac-900: #313044;
  --color-pastel-lilac-950: #1e1d2c;
  --color-paid-in-full: #858e6f;
  --color-paid-in-full-50: #f3f9e6;
  --color-paid-in-full-100: #e9f0db;
  --color-paid-in-full-200: #d6ddc5;
  --color-paid-in-full-300: #bfc7ac;
  --color-paid-in-full-400: #a0a98b;
  --color-paid-in-full-500: #858e6f;
  --color-paid-in-full-600: #6a7355;
  --color-paid-in-full-700: #545b40;
  --color-paid-in-full-800: #414730;
  --color-paid-in-full-900: #313723;
  --color-paid-in-full-950: #1e2213;
  --color-dill: #69775e;
  --color-dill-50: #f0f9e9;
  --color-dill-100: #e6f0df;
  --color-dill-200: #d3deca;
  --color-dill-300: #bcc9b2;
  --color-dill-400: #9dab92;
  --color-dill-500: #829177;
  --color-dill-600: #69775e;
  --color-dill-700: #525f48;
  --color-dill-800: #3f4a36;
  --color-dill-900: #303928;
  --color-dill-950: #1d2317;
  --color-gun-powder: #47485e;
  --color-gun-powder-50: #f3f4ff;
  --color-gun-powder-100: #e8eafa;
  --color-gun-powder-200: #d4d6ea;
  --color-gun-powder-300: #bfc0d7;
  --color-gun-powder-400: #a1a2ba;
  --color-gun-powder-500: #8788a1;
  --color-gun-powder-600: #6e6f87;
  --color-gun-powder-700: #595a70;
  --color-gun-powder-800: #47485e;
  --color-gun-powder-900: #373748;
  --color-gun-powder-950: #22232f;
}