Fatty Sashimi to The Count’s Black color palette

E9C5AFFatty Sashimi B399B1Pastel Purple 866E85Vintage 374638Deep Forest 0F202BThe Count’s Black

About this palette

Fatty Sashimi to The Count’s Black is a 5-color muted, gradient palette: #E9C5AF (Fatty Sashimi), #B399B1 (Pastel Purple), #866E85 (Vintage), #374638 (Deep Forest), #0F202B (The Count’s Black). It mixes orange, pink, gray tones and feels cool overall. The strongest text pairing is #E9C5AF on #0F202B with a contrast ratio of 10.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fatty Sashimi	rgb(233, 197, 175)	hsl(23, 57%, 80%)
Pastel Purple	rgb(179, 153, 177)	hsl(305, 15%, 65%)
Vintage	rgb(134, 110, 133)	hsl(302, 10%, 48%)
Deep Forest	rgb(55, 70, 56)	hsl(124, 12%, 25%)
The Count’s Black	rgb(15, 32, 43)	hsl(204, 48%, 11%)

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.

Aa10.36:1 Very good#E9C5AF on #0F202B
Aa10.36:1 Very good#0F202B on #E9C5AF
Aa6.43:1 Good#B399B1 on #0F202B
Aa6.43:1 Good#0F202B on #B399B1
Aa6.24:1 Good#E9C5AF on #374638
Aa6.24:1 Good#374638 on #E9C5AF
Aa3.87:1 Poor#B399B1 on #374638
Aa3.87:1 Poor#374638 on #B399B1

Color blindness preview

CSS variables

/* Fatty Sashimi to The Count’s Black — https://swatchly.xyz/palette/e9c5af-b399b1-866e85-374638-0f202b */
:root {
  --fatty-sashimi: #e9c5af;
  --pastel-purple: #b399b1;
  --vintage: #866e85;
  --deep-forest: #374638;
  --the-count-s-black: #0f202b;
}

Tailwind CSS v4

/* Fatty Sashimi to The Count’s Black — https://swatchly.xyz/palette/e9c5af-b399b1-866e85-374638-0f202b */
@theme {
  --color-fatty-sashimi: #e9c5af;
  --color-fatty-sashimi-50: #ffe9dc;
  --color-fatty-sashimi-100: #f6ddce;
  --color-fatty-sashimi-200: #e9c5af;
  --color-fatty-sashimi-300: #d1b19e;
  --color-fatty-sashimi-400: #b4937f;
  --color-fatty-sashimi-500: #9a7a65;
  --color-fatty-sashimi-600: #80614e;
  --color-fatty-sashimi-700: #694d3b;
  --color-fatty-sashimi-800: #553c2d;
  --color-fatty-sashimi-900: #422e20;
  --color-fatty-sashimi-950: #2a1b12;
  --color-pastel-purple: #b399b1;
  --color-pastel-purple-50: #fff0fe;
  --color-pastel-purple-100: #f7e6f5;
  --color-pastel-purple-200: #e5d1e3;
  --color-pastel-purple-300: #d0bacf;
  --color-pastel-purple-400: #b399b1;
  --color-pastel-purple-500: #977e95;
  --color-pastel-purple-600: #7b647a;
  --color-pastel-purple-700: #634e62;
  --color-pastel-purple-800: #4e3c4d;
  --color-pastel-purple-900: #3d2d3c;
  --color-pastel-purple-950: #261b25;
  --color-vintage: #866e85;
  --color-vintage-50: #fff0fe;
  --color-vintage-100: #f8e7f7;
  --color-vintage-200: #e8d5e7;
  --color-vintage-300: #d5bfd4;
  --color-vintage-400: #b9a1b8;
  --color-vintage-500: #9f879e;
  --color-vintage-600: #866e85;
  --color-vintage-700: #6c566b;
  --color-vintage-800: #554254;
  --color-vintage-900: #423141;
  --color-vintage-950: #2a1e29;
  --color-deep-forest: #374638;
  --color-deep-forest-50: #eef8ef;
  --color-deep-forest-100: #e3efe4;
  --color-deep-forest-200: #cedccf;
  --color-deep-forest-300: #b6c6b7;
  --color-deep-forest-400: #96a697;
  --color-deep-forest-500: #7a8b7b;
  --color-deep-forest-600: #607061;
  --color-deep-forest-700: #4b594b;
  --color-deep-forest-800: #374638;
  --color-deep-forest-900: #2b352b;
  --color-deep-forest-950: #19211a;
  --color-the-count-s-black: #0f202b;
  --color-the-count-s-black-50: #ecf7ff;
  --color-the-count-s-black-100: #e0edf7;
  --color-the-count-s-black-200: #cadae5;
  --color-the-count-s-black-300: #b2c4d0;
  --color-the-count-s-black-400: #91a5b2;
  --color-the-count-s-black-500: #758997;
  --color-the-count-s-black-600: #5b6e7b;
  --color-the-count-s-black-700: #465763;
  --color-the-count-s-black-800: #35444e;
  --color-the-count-s-black-900: #27333c;
  --color-the-count-s-black-950: #0f202b;
}