Chocolate Castle to Brownie Color Palette

About this palette

Chocolate Castle to Brownie is a 5-color warm, earthy, vintage, monochromatic palette: #49260B (Chocolate Castle), #FFE0D1 (Glazed Sugar), #CC5A00 (Tomato Bisque), #FEB18B (Peach Velour), #974708 (Brownie). It mixes brown, orange tones and feels warm overall. The strongest text pairing is #49260B on #FFE0D1 with a contrast ratio of 10.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(73, 38, 11)	hsl(26, 74%, 16%)
Glazed Sugar	rgb(255, 224, 209)	hsl(20, 100%, 91%)
Tomato Bisque	rgb(204, 90, 0)	hsl(26, 100%, 40%)
Peach Velour	rgb(254, 177, 139)	hsl(20, 98%, 77%)
Brownie	rgb(151, 71, 8)	hsl(26, 90%, 31%)

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.75:1 Very good#49260B on #FFE0D1
Aa10.75:1 Very good#FFE0D1 on #49260B
Aa7.59:1 Very good#49260B on #FEB18B
Aa7.59:1 Very good#FEB18B on #49260B
Aa5.23:1 Good#FFE0D1 on #974708
Aa5.23:1 Good#974708 on #FFE0D1
Aa3.69:1 Poor#FEB18B on #974708
Aa3.69:1 Poor#974708 on #FEB18B

Color blindness preview

CSS variables

/* Chocolate Castle to Brownie — https://swatchly.xyz/palette/49260b-ffe0d1-cc5a00-feb18b-974708 */
:root {
  --chocolate-castle: #49260b;
  --glazed-sugar: #ffe0d1;
  --tomato-bisque: #cc5a00;
  --peach-velour: #feb18b;
  --brownie: #974708;
}

Tailwind CSS v4

/* Chocolate Castle to Brownie — https://swatchly.xyz/palette/49260b-ffe0d1-cc5a00-feb18b-974708 */
@theme {
  --color-chocolate-castle: #49260b;
  --color-chocolate-castle-50: #fff2ea;
  --color-chocolate-castle-100: #ffe6d5;
  --color-chocolate-castle-200: #f2d0ba;
  --color-chocolate-castle-300: #deb89f;
  --color-chocolate-castle-400: #c0977c;
  --color-chocolate-castle-500: #a47b60;
  --color-chocolate-castle-600: #886046;
  --color-chocolate-castle-700: #6d4a33;
  --color-chocolate-castle-800: #563824;
  --color-chocolate-castle-900: #49260b;
  --color-chocolate-castle-950: #2a180c;
  --color-glazed-sugar: #ffe0d1;
  --color-glazed-sugar-50: #ffeee6;
  --color-glazed-sugar-100: #ffe0d1;
  --color-glazed-sugar-200: #e6cfc4;
  --color-glazed-sugar-300: #d2b8ac;
  --color-glazed-sugar-400: #b5998b;
  --color-glazed-sugar-500: #9a7e71;
  --color-glazed-sugar-600: #7f6558;
  --color-glazed-sugar-700: #674f44;
  --color-glazed-sugar-800: #523d33;
  --color-glazed-sugar-900: #402e26;
  --color-glazed-sugar-950: #281c16;
  --color-tomato-bisque: #cc5a00;
  --color-tomato-bisque-50: #fff1ea;
  --color-tomato-bisque-100: #ffe3d5;
  --color-tomato-bisque-200: #ffc6aa;
  --color-tomato-bisque-300: #ffa374;
  --color-tomato-bisque-400: #ea7938;
  --color-tomato-bisque-500: #cc5a00;
  --color-tomato-bisque-600: #a54800;
  --color-tomato-bisque-700: #853800;
  --color-tomato-bisque-800: #692b00;
  --color-tomato-bisque-900: #532000;
  --color-tomato-bisque-950: #361200;
  --color-peach-velour: #feb18b;
  --color-peach-velour-50: #fff5f1;
  --color-peach-velour-100: #ffeadf;
  --color-peach-velour-200: #ffd0b9;
  --color-peach-velour-300: #feb18b;
  --color-peach-velour-400: #d9926f;
  --color-peach-velour-500: #bc7550;
  --color-peach-velour-600: #9e5a36;
  --color-peach-velour-700: #814422;
  --color-peach-velour-800: #683214;
  --color-peach-velour-900: #51240a;
  --color-peach-velour-950: #351503;
  --color-brownie: #974708;
  --color-brownie-50: #fff2eb;
  --color-brownie-100: #ffe3d3;
  --color-brownie-200: #ffc5a5;
  --color-brownie-300: #f4a679;
  --color-brownie-400: #d58250;
  --color-brownie-500: #b7642f;
  --color-brownie-600: #974708;
  --color-brownie-700: #7a3600;
  --color-brownie-800: #612a00;
  --color-brownie-900: #4c1f00;
  --color-brownie-950: #321200;
}