Royal Fig to Pork Belly color palette

755867Royal Fig 996F7BNever Forget ABD4C7Whirlpool 37514AHunter 9FB3ABAlpine Air F6DEE9Pork Belly

Open in generator Export PNG, PDF, ASE…

About this palette

Royal Fig to Pork Belly is a 6-color muted palette: #755867 (Royal Fig), #996F7B (Never Forget), #ABD4C7 (Whirlpool), #37514A (Hunter), #9FB3AB (Alpine Air), #F6DEE9 (Pork Belly). It mixes red, turquoise, gray tones and feels warm overall. The strongest text pairing is #37514A on #F6DEE9 with a contrast ratio of 6.78:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Fig	rgb(117, 88, 103)	hsl(329, 14%, 40%)
Never Forget	rgb(153, 111, 123)	hsl(343, 17%, 52%)
Whirlpool	rgb(171, 212, 199)	hsl(161, 32%, 75%)
Hunter	rgb(55, 81, 74)	hsl(164, 19%, 27%)
Alpine Air	rgb(159, 179, 171)	hsl(156, 12%, 66%)
Pork Belly	rgb(246, 222, 233)	hsl(332, 57%, 92%)

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.

Aa6.78:1 Good#37514A on #F6DEE9
Aa6.78:1 Good#F6DEE9 on #37514A
Aa5.32:1 Good#ABD4C7 on #37514A
Aa5.32:1 Good#37514A on #ABD4C7
Aa4.94:1 Good#755867 on #F6DEE9
Aa4.94:1 Good#F6DEE9 on #755867
Aa3.90:1 Poor#37514A on #9FB3AB
Aa3.90:1 Poor#9FB3AB on #37514A

Color blindness preview

CSS variables

/* Royal Fig to Pork Belly — https://swatchly.xyz/palette/755867-996f7b-abd4c7-37514a-9fb3ab-f6dee9 */
:root {
  --royal-fig: #755867;
  --never-forget: #996f7b;
  --whirlpool: #abd4c7;
  --hunter: #37514a;
  --alpine-air: #9fb3ab;
  --pork-belly: #f6dee9;
}

Tailwind CSS v4

/* Royal Fig to Pork Belly — https://swatchly.xyz/palette/755867-996f7b-abd4c7-37514a-9fb3ab-f6dee9 */
@theme {
  --color-royal-fig: #755867;
  --color-royal-fig-50: #fff0f8;
  --color-royal-fig-100: #f8e2ed;
  --color-royal-fig-200: #e5cbd8;
  --color-royal-fig-300: #cfb2c0;
  --color-royal-fig-400: #af90a0;
  --color-royal-fig-500: #927383;
  --color-royal-fig-600: #755867;
  --color-royal-fig-700: #5e4552;
  --color-royal-fig-800: #4a3540;
  --color-royal-fig-900: #3a2832;
  --color-royal-fig-950: #25181f;
  --color-never-forget: #996f7b;
  --color-never-forget-50: #ffeef3;
  --color-never-forget-100: #fddee6;
  --color-never-forget-200: #ebc7d1;
  --color-never-forget-300: #d6aeb9;
  --color-never-forget-400: #b68c98;
  --color-never-forget-500: #996f7b;
  --color-never-forget-600: #7e5763;
  --color-never-forget-700: #67444e;
  --color-never-forget-800: #52343d;
  --color-never-forget-900: #41272f;
  --color-never-forget-950: #2a181d;
  --color-whirlpool: #abd4c7;
  --color-whirlpool-50: #ebfff8;
  --color-whirlpool-100: #e0f7f0;
  --color-whirlpool-200: #cae6dd;
  --color-whirlpool-300: #abd4c7;
  --color-whirlpool-400: #8cb2a6;
  --color-whirlpool-500: #6e9589;
  --color-whirlpool-600: #53796d;
  --color-whirlpool-700: #3d6056;
  --color-whirlpool-800: #2c4b42;
  --color-whirlpool-900: #1f3931;
  --color-whirlpool-950: #11231e;
  --color-hunter: #37514a;
  --color-hunter-50: #e9f9f5;
  --color-hunter-100: #def0ea;
  --color-hunter-200: #c7ddd7;
  --color-hunter-300: #b0c9c2;
  --color-hunter-400: #91aca4;
  --color-hunter-500: #76928a;
  --color-hunter-600: #5e7971;
  --color-hunter-700: #4a635c;
  --color-hunter-800: #37514a;
  --color-hunter-900: #2b3e39;
  --color-hunter-950: #192824;
  --color-alpine-air: #9fb3ab;
  --color-alpine-air-50: #f2fcf8;
  --color-alpine-air-100: #e9f5f0;
  --color-alpine-air-200: #d6e4de;
  --color-alpine-air-300: #bfd0c9;
  --color-alpine-air-400: #9fb3ab;
  --color-alpine-air-500: #82958d;
  --color-alpine-air-600: #667871;
  --color-alpine-air-700: #4e5f58;
  --color-alpine-air-800: #3b4a44;
  --color-alpine-air-900: #2b3833;
  --color-alpine-air-950: #19221e;
  --color-pork-belly: #f6dee9;
  --color-pork-belly-50: #faecf2;
  --color-pork-belly-100: #f6dee9;
  --color-pork-belly-200: #dfcdd5;
  --color-pork-belly-300: #cbb7c0;
  --color-pork-belly-400: #ae98a2;
  --color-pork-belly-500: #937e88;
  --color-pork-belly-600: #79646e;
  --color-pork-belly-700: #624f58;
  --color-pork-belly-800: #4d3d45;
  --color-pork-belly-900: #3c2e35;
  --color-pork-belly-950: #261c21;
}