Fatback to Scampi Color Palette

About this palette

Fatback to Scampi is a 4-color palette: #FFF7ED (Fatback), #432B06 (Secret Passage), #74B5C8 (Glacier), #7563A6 (Scampi). It mixes white, brown, blue, purple tones and feels cool overall. The strongest text pairing is #FFF7ED on #432B06 with a contrast ratio of 12.46:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fatback	rgb(255, 247, 237)	hsl(33, 100%, 96%)
Secret Passage	rgb(67, 43, 6)	hsl(36, 84%, 14%)
Glacier	rgb(116, 181, 200)	hsl(194, 43%, 62%)
Scampi	rgb(117, 99, 166)	hsl(256, 27%, 52%)

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.46:1 Super#FFF7ED on #432B06
Aa12.46:1 Super#432B06 on #FFF7ED
Aa5.79:1 Good#432B06 on #74B5C8
Aa5.79:1 Good#74B5C8 on #432B06
Aa4.83:1 Good#FFF7ED on #7563A6
Aa4.83:1 Good#7563A6 on #FFF7ED

Color blindness preview

CSS variables

/* Fatback to Scampi — https://swatchly.xyz/palette/fff7ed-432b06-74b5c8-7563a6 */
:root {
  --fatback: #fff7ed;
  --secret-passage: #432b06;
  --glacier: #74b5c8;
  --scampi: #7563a6;
}

Tailwind CSS v4

/* Fatback to Scampi — https://swatchly.xyz/palette/fff7ed-432b06-74b5c8-7563a6 */
@theme {
  --color-fatback: #fff7ed;
  --color-fatback-50: #fff7ed;
  --color-fatback-100: #f2ede7;
  --color-fatback-200: #ded9d1;
  --color-fatback-300: #c8c1b9;
  --color-fatback-400: #a8a198;
  --color-fatback-500: #8d857c;
  --color-fatback-600: #716b62;
  --color-fatback-700: #5a544d;
  --color-fatback-800: #47413b;
  --color-fatback-900: #37322c;
  --color-fatback-950: #221f1b;
  --color-secret-passage: #432b06;
  --color-secret-passage-50: #fff3e5;
  --color-secret-passage-100: #fbe8d0;
  --color-secret-passage-200: #ead4b8;
  --color-secret-passage-300: #d6bc9d;
  --color-secret-passage-400: #b89c79;
  --color-secret-passage-500: #9c805c;
  --color-secret-passage-600: #806543;
  --color-secret-passage-700: #674f30;
  --color-secret-passage-800: #513c21;
  --color-secret-passage-900: #432b06;
  --color-secret-passage-950: #271b0a;
  --color-glacier: #74b5c8;
  --color-glacier-50: #edfbff;
  --color-glacier-100: #d7f6ff;
  --color-glacier-200: #b9e6f4;
  --color-glacier-300: #9dd2e2;
  --color-glacier-400: #74b5c8;
  --color-glacier-500: #5797aa;
  --color-glacier-600: #3a7b8d;
  --color-glacier-700: #246272;
  --color-glacier-800: #144c5b;
  --color-glacier-900: #083a46;
  --color-glacier-950: #02242c;
  --color-scampi: #7563a6;
  --color-scampi-50: #f6f3ff;
  --color-scampi-100: #ede8ff;
  --color-scampi-200: #dcd2ff;
  --color-scampi-300: #c7b9f7;
  --color-scampi-400: #a998dc;
  --color-scampi-500: #8f7dc2;
  --color-scampi-600: #7563a6;
  --color-scampi-700: #5d4c89;
  --color-scampi-800: #493a6f;
  --color-scampi-900: #382b58;
  --color-scampi-950: #23193a;
}