Sly Fox to Discreet Orange color palette

804844Sly Fox 642B08Count Chocula C87727Maine Coon Orange D7A725Sunny Disposition FFAA9CDiscreet Orange

Open in generator Export PNG, PDF, ASE…

About this palette

Sly Fox to Discreet Orange is a 5-color warm, earthy palette: #804844 (Sly Fox), #642B08 (Count Chocula), #C87727 (Maine Coon Orange), #D7A725 (Sunny Disposition), #FFAA9C (Discreet Orange). It mixes red, brown, orange, yellow, pink tones and feels warm overall. The strongest text pairing is #642B08 on #FFAA9C with a contrast ratio of 6.07:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sly Fox	rgb(128, 72, 68)	hsl(4, 31%, 38%)
Count Chocula	rgb(100, 43, 8)	hsl(23, 85%, 21%)
Maine Coon Orange	rgb(200, 119, 39)	hsl(30, 67%, 47%)
Sunny Disposition	rgb(215, 167, 37)	hsl(44, 71%, 49%)
Discreet Orange	rgb(255, 170, 156)	hsl(8, 100%, 81%)

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.07:1 Good#642B08 on #FFAA9C
Aa6.07:1 Good#FFAA9C on #642B08
Aa4.99:1 Good#642B08 on #D7A725
Aa4.99:1 Good#D7A725 on #642B08
Aa3.92:1 Poor#804844 on #FFAA9C
Aa3.92:1 Poor#FFAA9C on #804844
Aa3.24:1 Poor#642B08 on #C87727
Aa3.24:1 Poor#C87727 on #642B08

Color blindness preview

CSS variables

/* Sly Fox to Discreet Orange — https://swatchly.xyz/palette/804844-642b08-c87727-d7a725-ffaa9c */
:root {
  --sly-fox: #804844;
  --count-chocula: #642b08;
  --maine-coon-orange: #c87727;
  --sunny-disposition: #d7a725;
  --discreet-orange: #ffaa9c;
}

Tailwind CSS v4

/* Sly Fox to Discreet Orange — https://swatchly.xyz/palette/804844-642b08-c87727-d7a725-ffaa9c */
@theme {
  --color-sly-fox: #804844;
  --color-sly-fox-50: #fff2f0;
  --color-sly-fox-100: #ffe4e1;
  --color-sly-fox-200: #fccbc6;
  --color-sly-fox-300: #eab3ae;
  --color-sly-fox-400: #cf938d;
  --color-sly-fox-500: #b47772;
  --color-sly-fox-600: #985e59;
  --color-sly-fox-700: #804844;
  --color-sly-fox-800: #653734;
  --color-sly-fox-900: #502926;
  --color-sly-fox-950: #341816;
  --color-count-chocula: #642b08;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d9;
  --color-count-chocula-200: #ffcab1;
  --color-count-chocula-300: #ecb194;
  --color-count-chocula-400: #cf8e6f;
  --color-count-chocula-500: #b27252;
  --color-count-chocula-600: #935738;
  --color-count-chocula-700: #774125;
  --color-count-chocula-800: #642b08;
  --color-count-chocula-900: #4a230e;
  --color-count-chocula-950: #2f1406;
  --color-maine-coon-orange: #c87727;
  --color-maine-coon-orange-50: #fff4ec;
  --color-maine-coon-orange-100: #ffe9d9;
  --color-maine-coon-orange-200: #ffd1ad;
  --color-maine-coon-orange-300: #fcb579;
  --color-maine-coon-orange-400: #e2934e;
  --color-maine-coon-orange-500: #c87727;
  --color-maine-coon-orange-600: #a75c00;
  --color-maine-coon-orange-700: #854800;
  --color-maine-coon-orange-800: #683700;
  --color-maine-coon-orange-900: #512900;
  --color-maine-coon-orange-950: #341800;
  --color-sunny-disposition: #d7a725;
  --color-sunny-disposition-50: #fff9ed;
  --color-sunny-disposition-100: #fff1d2;
  --color-sunny-disposition-200: #fedd93;
  --color-sunny-disposition-300: #eec76f;
  --color-sunny-disposition-400: #d7a725;
  --color-sunny-disposition-500: #b58a00;
  --color-sunny-disposition-600: #916e00;
  --color-sunny-disposition-700: #735600;
  --color-sunny-disposition-800: #594200;
  --color-sunny-disposition-900: #443200;
  --color-sunny-disposition-950: #2a1d00;
  --color-discreet-orange: #ffaa9c;
  --color-discreet-orange-50: #fff3f1;
  --color-discreet-orange-100: #ffe6e2;
  --color-discreet-orange-200: #ffcbc2;
  --color-discreet-orange-300: #ffaa9c;
  --color-discreet-orange-400: #da8c7f;
  --color-discreet-orange-500: #be6f62;
  --color-discreet-orange-600: #9f5449;
  --color-discreet-orange-700: #833f35;
  --color-discreet-orange-800: #692e26;
  --color-discreet-orange-900: #53211a;
  --color-discreet-orange-950: #36120e;
}