Chocolate Castle to Cotton Ball Color Palette

About this palette

Chocolate Castle to Cotton Ball is a 5-color warm, earthy palette: #441F00 (Chocolate Castle), #00581C (Jungle Jam), #BD56AE (Magenta Memoir), #FFA962 (Rajah), #F1F9FF (Cotton Ball). It mixes brown, green, pink, orange, white tones and feels warm overall. The strongest text pairing is #441F00 on #F1F9FF with a contrast ratio of 13.69:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(68, 31, 0)	hsl(27, 100%, 13%)
Jungle Jam	rgb(0, 88, 28)	hsl(139, 100%, 17%)
Magenta Memoir	rgb(189, 86, 174)	hsl(309, 44%, 54%)
Rajah	rgb(255, 169, 98)	hsl(27, 100%, 69%)
Cotton Ball	rgb(241, 249, 255)	hsl(206, 100%, 97%)

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.

Aa13.69:1 Super#441F00 on #F1F9FF
Aa13.69:1 Super#F1F9FF on #441F00
Aa8.18:1 Very good#00581C on #F1F9FF
Aa8.18:1 Very good#F1F9FF on #00581C
Aa7.70:1 Very good#441F00 on #FFA962
Aa7.70:1 Very good#FFA962 on #441F00
Aa4.60:1 Good#00581C on #FFA962
Aa4.60:1 Good#FFA962 on #00581C

Color blindness preview

CSS variables

/* Chocolate Castle to Cotton Ball — https://swatchly.xyz/palette/441f00-00581c-bd56ae-ffa962-f1f9ff */
:root {
  --chocolate-castle: #441f00;
  --jungle-jam: #00581c;
  --magenta-memoir: #bd56ae;
  --rajah: #ffa962;
  --cotton-ball: #f1f9ff;
}

Tailwind CSS v4

/* Chocolate Castle to Cotton Ball — https://swatchly.xyz/palette/441f00-00581c-bd56ae-ffa962-f1f9ff */
@theme {
  --color-chocolate-castle: #441f00;
  --color-chocolate-castle-50: #fff2ea;
  --color-chocolate-castle-100: #ffe6d5;
  --color-chocolate-castle-200: #f4cfb7;
  --color-chocolate-castle-300: #e0b79c;
  --color-chocolate-castle-400: #c19577;
  --color-chocolate-castle-500: #a47859;
  --color-chocolate-castle-600: #865c40;
  --color-chocolate-castle-700: #6a452c;
  --color-chocolate-castle-800: #51331d;
  --color-chocolate-castle-900: #441f00;
  --color-chocolate-castle-950: #251408;
  --color-jungle-jam: #00581c;
  --color-jungle-jam-50: #e0ffe2;
  --color-jungle-jam-100: #ccf9cf;
  --color-jungle-jam-200: #b1e8b6;
  --color-jungle-jam-300: #96d49c;
  --color-jungle-jam-400: #71b779;
  --color-jungle-jam-500: #549c5e;
  --color-jungle-jam-600: #398245;
  --color-jungle-jam-700: #256a32;
  --color-jungle-jam-800: #00581c;
  --color-jungle-jam-900: #0a4318;
  --color-jungle-jam-950: #022b0b;
  --color-magenta-memoir: #bd56ae;
  --color-magenta-memoir-50: #ffeffb;
  --color-magenta-memoir-100: #ffdff8;
  --color-magenta-memoir-200: #ffbef2;
  --color-magenta-memoir-300: #f79ae7;
  --color-magenta-memoir-400: #da74ca;
  --color-magenta-memoir-500: #bd56ae;
  --color-magenta-memoir-600: #9f3c91;
  --color-magenta-memoir-700: #832777;
  --color-magenta-memoir-800: #6a1860;
  --color-magenta-memoir-900: #540e4c;
  --color-magenta-memoir-950: #370532;
  --color-rajah: #ffa962;
  --color-rajah-50: #fff2e8;
  --color-rajah-100: #ffe5d1;
  --color-rajah-200: #ffcaa2;
  --color-rajah-300: #ffa962;
  --color-rajah-400: #db8b46;
  --color-rajah-500: #bf6e21;
  --color-rajah-600: #9f5600;
  --color-rajah-700: #7f4300;
  --color-rajah-800: #643400;
  --color-rajah-900: #4f2700;
  --color-rajah-950: #331700;
  --color-cotton-ball: #f1f9ff;
  --color-cotton-ball-50: #f1f9ff;
  --color-cotton-ball-100: #e9eef2;
  --color-cotton-ball-200: #d4dade;
  --color-cotton-ball-300: #bdc3c8;
  --color-cotton-ball-400: #9ca3a9;
  --color-cotton-ball-500: #80888d;
  --color-cotton-ball-600: #666d72;
  --color-cotton-ball-700: #50565b;
  --color-cotton-ball-800: #3e4347;
  --color-cotton-ball-900: #2f3437;
  --color-cotton-ball-950: #1c2022;
}