Pink Swirl to Fox Color Palette

About this palette

Pink Swirl to Fox is a 4-color warm, monochromatic palette: #FFE8E3 (Pink Swirl), #6F321E (Freshly Roasted Coffee), #FF9C75 (Flash in the Pan), #C65139 (Fox). It mixes white, brown, orange, red tones and feels warm overall. The strongest text pairing is #FFE8E3 on #6F321E with a contrast ratio of 8.32:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Swirl	rgb(255, 232, 227)	hsl(11, 100%, 95%)
Freshly Roasted Coffee	rgb(111, 50, 30)	hsl(15, 57%, 28%)
Flash in the Pan	rgb(255, 156, 117)	hsl(17, 100%, 73%)
Fox	rgb(198, 81, 57)	hsl(10, 55%, 50%)

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.

Aa8.32:1 Very good#FFE8E3 on #6F321E
Aa8.32:1 Very good#6F321E on #FFE8E3
Aa4.77:1 Good#6F321E on #FF9C75
Aa4.77:1 Good#FF9C75 on #6F321E
Aa3.86:1 Poor#FFE8E3 on #C65139
Aa3.86:1 Poor#C65139 on #FFE8E3

Color blindness preview

CSS variables

/* Pink Swirl to Fox — https://swatchly.xyz/palette/ffe8e3-6f321e-ff9c75-c65139 */
:root {
  --pink-swirl: #ffe8e3;
  --freshly-roasted-coffee: #6f321e;
  --flash-in-the-pan: #ff9c75;
  --fox: #c65139;
}

Tailwind CSS v4

/* Pink Swirl to Fox — https://swatchly.xyz/palette/ffe8e3-6f321e-ff9c75-c65139 */
@theme {
  --color-pink-swirl: #ffe8e3;
  --color-pink-swirl-50: #fff5f3;
  --color-pink-swirl-100: #ffe8e3;
  --color-pink-swirl-200: #e6d5d2;
  --color-pink-swirl-300: #d1beba;
  --color-pink-swirl-400: #b29d99;
  --color-pink-swirl-500: #96827d;
  --color-pink-swirl-600: #7a6763;
  --color-pink-swirl-700: #62514d;
  --color-pink-swirl-800: #4d3e3b;
  --color-pink-swirl-900: #3c2f2d;
  --color-pink-swirl-950: #261d1b;
  --color-freshly-roasted-coffee: #6f321e;
  --color-freshly-roasted-coffee-50: #fff2ee;
  --color-freshly-roasted-coffee-100: #ffe5dc;
  --color-freshly-roasted-coffee-200: #ffc9b8;
  --color-freshly-roasted-coffee-300: #efb19d;
  --color-freshly-roasted-coffee-400: #d3907a;
  --color-freshly-roasted-coffee-500: #b8755f;
  --color-freshly-roasted-coffee-600: #9c5b46;
  --color-freshly-roasted-coffee-700: #824633;
  --color-freshly-roasted-coffee-800: #6f321e;
  --color-freshly-roasted-coffee-900: #542819;
  --color-freshly-roasted-coffee-950: #37170d;
  --color-flash-in-the-pan: #ff9c75;
  --color-flash-in-the-pan-50: #ffede6;
  --color-flash-in-the-pan-100: #ffded1;
  --color-flash-in-the-pan-200: #ffc1a8;
  --color-flash-in-the-pan-300: #ff9c75;
  --color-flash-in-the-pan-400: #dc7f5a;
  --color-flash-in-the-pan-500: #c1643e;
  --color-flash-in-the-pan-600: #a34b25;
  --color-flash-in-the-pan-700: #873713;
  --color-flash-in-the-pan-800: #6e2805;
  --color-flash-in-the-pan-900: #591d00;
  --color-flash-in-the-pan-950: #3a0f00;
  --color-fox: #c65139;
  --color-fox-50: #ffefeb;
  --color-fox-100: #ffdfd7;
  --color-fox-200: #ffc0b2;
  --color-fox-300: #ff9a84;
  --color-fox-400: #e67057;
  --color-fox-500: #c65139;
  --color-fox-600: #a73922;
  --color-fox-700: #8b2611;
  --color-fox-800: #711805;
  --color-fox-900: #5b0f01;
  --color-fox-950: #3d0600;
}