Girlie to Chocolate Castle Color Palette

About this palette

Girlie to Chocolate Castle is a 5-color warm, earthy palette: #FFD4CE (Girlie), #CE5139 (Fox), #765700 (Coffee Adept), #E19655 (Coffee Whip), #482600 (Chocolate Castle). It mixes pink, red, brown, orange tones and feels warm overall. The strongest text pairing is #FFD4CE on #482600 with a contrast ratio of 10.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Girlie	rgb(255, 212, 206)	hsl(7, 100%, 90%)
Fox	rgb(206, 81, 57)	hsl(10, 60%, 52%)
Coffee Adept	rgb(118, 87, 0)	hsl(44, 100%, 23%)
Coffee Whip	rgb(225, 150, 85)	hsl(28, 70%, 61%)
Chocolate Castle	rgb(72, 38, 0)	hsl(32, 100%, 14%)

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.02:1 Very good#FFD4CE on #482600
Aa10.02:1 Very good#482600 on #FFD4CE
Aa5.60:1 Good#E19655 on #482600
Aa5.60:1 Good#482600 on #E19655
Aa4.97:1 Good#FFD4CE on #765700
Aa4.97:1 Good#765700 on #FFD4CE
Aa3.20:1 Poor#FFD4CE on #CE5139
Aa3.20:1 Poor#CE5139 on #FFD4CE

Color blindness preview

CSS variables

/* Girlie to Chocolate Castle — https://swatchly.xyz/palette/ffd4ce-ce5139-765700-e19655-482600 */
:root {
  --girlie: #ffd4ce;
  --fox: #ce5139;
  --coffee-adept: #765700;
  --coffee-whip: #e19655;
  --chocolate-castle: #482600;
}

Tailwind CSS v4

/* Girlie to Chocolate Castle — https://swatchly.xyz/palette/ffd4ce-ce5139-765700-e19655-482600 */
@theme {
  --color-girlie: #ffd4ce;
  --color-girlie-50: #fff9f8;
  --color-girlie-100: #ffeeeb;
  --color-girlie-200: #ffd4ce;
  --color-girlie-300: #e1beb9;
  --color-girlie-400: #c29c97;
  --color-girlie-500: #a67f7a;
  --color-girlie-600: #88645f;
  --color-girlie-700: #6e4d48;
  --color-girlie-800: #563a36;
  --color-girlie-900: #442c29;
  --color-girlie-950: #2b1a18;
  --color-fox: #ce5139;
  --color-fox-50: #fff0ed;
  --color-fox-100: #ffe1da;
  --color-fox-200: #ffc3b6;
  --color-fox-300: #ff9e8a;
  --color-fox-400: #ed7158;
  --color-fox-500: #ce5139;
  --color-fox-600: #af3721;
  --color-fox-700: #91230e;
  --color-fox-800: #761402;
  --color-fox-900: #5e0c00;
  --color-fox-950: #3f0500;
  --color-coffee-adept: #765700;
  --color-coffee-adept-50: #fff4de;
  --color-coffee-adept-100: #fee9be;
  --color-coffee-adept-200: #efd6a3;
  --color-coffee-adept-300: #ddc086;
  --color-coffee-adept-400: #c1a15f;
  --color-coffee-adept-500: #a78640;
  --color-coffee-adept-600: #8c6d24;
  --color-coffee-adept-700: #765700;
  --color-coffee-adept-800: #5d4400;
  --color-coffee-adept-900: #483400;
  --color-coffee-adept-950: #2e2000;
  --color-coffee-whip: #e19655;
  --color-coffee-whip-50: #fff6ef;
  --color-coffee-whip-100: #ffebdc;
  --color-coffee-whip-200: #ffd3b1;
  --color-coffee-whip-300: #f8b884;
  --color-coffee-whip-400: #e19655;
  --color-coffee-whip-500: #c17937;
  --color-coffee-whip-600: #a25d14;
  --color-coffee-whip-700: #844700;
  --color-coffee-whip-800: #673700;
  --color-coffee-whip-900: #4f2900;
  --color-coffee-whip-950: #321700;
  --color-chocolate-castle: #482600;
  --color-chocolate-castle-50: #fff3e8;
  --color-chocolate-castle-100: #ffe6d1;
  --color-chocolate-castle-200: #f1d1b5;
  --color-chocolate-castle-300: #deb999;
  --color-chocolate-castle-400: #c09875;
  --color-chocolate-castle-500: #a47c58;
  --color-chocolate-castle-600: #87613f;
  --color-chocolate-castle-700: #6c4b2c;
  --color-chocolate-castle-800: #55381d;
  --color-chocolate-castle-900: #482600;
  --color-chocolate-castle-950: #291808;
}