Start generating

Pork Belly to Ink Black color palette

F8E2E6Pork Belly729E92Emerald OasisABD1CDWave2B3E3DTempest in a Teapot7D5362Royal Fig311E21Ink Black
Open in generator Export PNG, PDF, ASE…

About this palette

Pork Belly to Ink Black is a 6-color muted palette: #F8E2E6 (Pork Belly), #729E92 (Emerald Oasis), #ABD1CD (Wave), #2B3E3D (Tempest in a Teapot), #7D5362 (Royal Fig), #311E21 (Ink Black). It mixes white, turquoise, gray, red tones and feels cool overall. The strongest text pairing is #F8E2E6 on #311E21 with a contrast ratio of 12.71:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pork Bellyrgb(248, 226, 230)hsl(349, 61%, 93%)
Emerald Oasisrgb(114, 158, 146)hsl(164, 18%, 53%)
Wavergb(171, 209, 205)hsl(174, 29%, 75%)
Tempest in a Teapotrgb(43, 62, 61)hsl(177, 18%, 21%)
Royal Figrgb(125, 83, 98)hsl(339, 20%, 41%)
Ink Blackrgb(49, 30, 33)hsl(351, 24%, 15%)

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.71:1 Super#F8E2E6 on #311E21
  • Aa12.71:1 Super#311E21 on #F8E2E6
  • Aa9.51:1 Very good#ABD1CD on #311E21
  • Aa9.51:1 Very good#311E21 on #ABD1CD
  • Aa9.15:1 Very good#F8E2E6 on #2B3E3D
  • Aa9.15:1 Very good#2B3E3D on #F8E2E6
  • Aa6.85:1 Good#ABD1CD on #2B3E3D
  • Aa6.85:1 Good#2B3E3D on #ABD1CD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pork Belly to Ink Black — https://swatchly.xyz/palette/f8e2e6-729e92-abd1cd-2b3e3d-7d5362-311e21 */
:root {
  --pork-belly: #f8e2e6;
  --emerald-oasis: #729e92;
  --wave: #abd1cd;
  --tempest-in-a-teapot: #2b3e3d;
  --royal-fig: #7d5362;
  --ink-black: #311e21;
}

Tailwind CSS v4

/* Pork Belly to Ink Black — https://swatchly.xyz/palette/f8e2e6-729e92-abd1cd-2b3e3d-7d5362-311e21 */
@theme {
  --color-pork-belly: #f8e2e6;
  --color-pork-belly-50: #fceff1;
  --color-pork-belly-100: #f8e2e6;
  --color-pork-belly-200: #e1d0d3;
  --color-pork-belly-300: #ccbabd;
  --color-pork-belly-400: #ae9a9e;
  --color-pork-belly-500: #937f83;
  --color-pork-belly-600: #786669;
  --color-pork-belly-700: #615053;
  --color-pork-belly-800: #4c3e41;
  --color-pork-belly-900: #3b2f31;
  --color-pork-belly-950: #251d1e;
  --color-emerald-oasis: #729e92;
  --color-emerald-oasis-50: #e6fef7;
  --color-emerald-oasis-100: #dcf7ef;
  --color-emerald-oasis-200: #c7e7de;
  --color-emerald-oasis-300: #afd4c9;
  --color-emerald-oasis-400: #8eb7ac;
  --color-emerald-oasis-500: #729e92;
  --color-emerald-oasis-600: #568075;
  --color-emerald-oasis-700: #3e675c;
  --color-emerald-oasis-800: #2c5047;
  --color-emerald-oasis-900: #1f3d36;
  --color-emerald-oasis-950: #102620;
  --color-wave: #abd1cd;
  --color-wave-50: #eafefb;
  --color-wave-100: #dff6f3;
  --color-wave-200: #c9e4e1;
  --color-wave-300: #abd1cd;
  --color-wave-400: #8cafac;
  --color-wave-500: #6f938f;
  --color-wave-600: #547773;
  --color-wave-700: #3e5e5b;
  --color-wave-800: #2d4947;
  --color-wave-900: #203836;
  --color-wave-950: #122321;
  --color-tempest-in-a-teapot: #2b3e3d;
  --color-tempest-in-a-teapot-50: #ecf8f7;
  --color-tempest-in-a-teapot-100: #e0efee;
  --color-tempest-in-a-teapot-200: #cbdbda;
  --color-tempest-in-a-teapot-300: #b2c5c4;
  --color-tempest-in-a-teapot-400: #93a8a7;
  --color-tempest-in-a-teapot-500: #798e8d;
  --color-tempest-in-a-teapot-600: #607473;
  --color-tempest-in-a-teapot-700: #4c5f5e;
  --color-tempest-in-a-teapot-800: #3b4c4b;
  --color-tempest-in-a-teapot-900: #2b3e3d;
  --color-tempest-in-a-teapot-950: #1c2727;
  --color-royal-fig: #7d5362;
  --color-royal-fig-50: #fff1f5;
  --color-royal-fig-100: #ffdfea;
  --color-royal-fig-200: #edc8d4;
  --color-royal-fig-300: #d8aebc;
  --color-royal-fig-400: #b88b9b;
  --color-royal-fig-500: #9b6e7e;
  --color-royal-fig-600: #7d5362;
  --color-royal-fig-700: #64414d;
  --color-royal-fig-800: #50313c;
  --color-royal-fig-900: #3f252f;
  --color-royal-fig-950: #29161d;
  --color-ink-black: #311e21;
  --color-ink-black-50: #fff1f3;
  --color-ink-black-100: #f7e6e8;
  --color-ink-black-200: #e6d2d4;
  --color-ink-black-300: #d1babd;
  --color-ink-black-400: #b39a9e;
  --color-ink-black-500: #988083;
  --color-ink-black-600: #7e676a;
  --color-ink-black-700: #675255;
  --color-ink-black-800: #534043;
  --color-ink-black-900: #423235;
  --color-ink-black-950: #311e21;
}

Similar palettes