Chocolate Castle to Glazed Sugar color palette

492514Chocolate Castle 2E4385Pacific Navy 2B8386Turkish Jade 00B9C2Super Rare Jade FFDDCDGlazed Sugar

Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Castle to Glazed Sugar is a 5-color cool, vintage palette: #492514 (Chocolate Castle), #2E4385 (Pacific Navy), #2B8386 (Turkish Jade), #00B9C2 (Super Rare Jade), #FFDDCD (Glazed Sugar). It mixes brown, blue, turquoise, orange tones and feels cool overall. The strongest text pairing is #492514 on #FFDDCD with a contrast ratio of 10.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(73, 37, 20)	hsl(19, 57%, 18%)
Pacific Navy	rgb(46, 67, 133)	hsl(226, 49%, 35%)
Turkish Jade	rgb(43, 131, 134)	hsl(182, 51%, 35%)
Super Rare Jade	rgb(0, 185, 194)	hsl(183, 100%, 38%)
Glazed Sugar	rgb(255, 221, 205)	hsl(19, 100%, 90%)

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.58:1 Very good#492514 on #FFDDCD
Aa10.58:1 Very good#FFDDCD on #492514
Aa7.30:1 Very good#2E4385 on #FFDDCD
Aa7.30:1 Very good#FFDDCD on #2E4385
Aa5.60:1 Good#492514 on #00B9C2
Aa5.60:1 Good#00B9C2 on #492514
Aa3.86:1 Poor#2E4385 on #00B9C2
Aa3.86:1 Poor#00B9C2 on #2E4385

Color blindness preview

CSS variables

/* Chocolate Castle to Glazed Sugar — https://swatchly.xyz/palette/492514-2e4385-2b8386-00b9c2-ffddcd */
:root {
  --chocolate-castle: #492514;
  --pacific-navy: #2e4385;
  --turkish-jade: #2b8386;
  --super-rare-jade: #00b9c2;
  --glazed-sugar: #ffddcd;
}

Tailwind CSS v4

/* Chocolate Castle to Glazed Sugar — https://swatchly.xyz/palette/492514-2e4385-2b8386-00b9c2-ffddcd */
@theme {
  --color-chocolate-castle: #492514;
  --color-chocolate-castle-50: #fff2ec;
  --color-chocolate-castle-100: #ffe5da;
  --color-chocolate-castle-200: #f2cfbf;
  --color-chocolate-castle-300: #dfb7a6;
  --color-chocolate-castle-400: #c19683;
  --color-chocolate-castle-500: #a57a67;
  --color-chocolate-castle-600: #885f4d;
  --color-chocolate-castle-700: #6e4939;
  --color-chocolate-castle-800: #563729;
  --color-chocolate-castle-900: #492514;
  --color-chocolate-castle-950: #2a1810;
  --color-pacific-navy: #2e4385;
  --color-pacific-navy-50: #f1f5ff;
  --color-pacific-navy-100: #e3ebff;
  --color-pacific-navy-200: #c7d7ff;
  --color-pacific-navy-300: #a8c1ff;
  --color-pacific-navy-400: #86a1e8;
  --color-pacific-navy-500: #6c86ce;
  --color-pacific-navy-600: #546cb2;
  --color-pacific-navy-700: #405796;
  --color-pacific-navy-800: #2e4385;
  --color-pacific-navy-900: #243465;
  --color-pacific-navy-950: #152044;
  --color-turkish-jade: #2b8386;
  --color-turkish-jade-50: #d7feff;
  --color-turkish-jade-100: #c7f8f9;
  --color-turkish-jade-200: #ade7e9;
  --color-turkish-jade-300: #90d4d6;
  --color-turkish-jade-400: #69b7b9;
  --color-turkish-jade-500: #499da0;
  --color-turkish-jade-600: #2b8386;
  --color-turkish-jade-700: #0e696c;
  --color-turkish-jade-800: #005355;
  --color-turkish-jade-900: #003f41;
  --color-turkish-jade-950: #002829;
  --color-super-rare-jade: #00b9c2;
  --color-super-rare-jade-50: #dcfdff;
  --color-super-rare-jade-100: #b5fbff;
  --color-super-rare-jade-200: #8debf1;
  --color-super-rare-jade-300: #65d6dd;
  --color-super-rare-jade-400: #00b9c2;
  --color-super-rare-jade-500: #009aa2;
  --color-super-rare-jade-600: #007c82;
  --color-super-rare-jade-700: #006267;
  --color-super-rare-jade-800: #004d51;
  --color-super-rare-jade-900: #003b3e;
  --color-super-rare-jade-950: #002527;
  --color-glazed-sugar: #ffddcd;
  --color-glazed-sugar-50: #ffebe2;
  --color-glazed-sugar-100: #ffddcd;
  --color-glazed-sugar-200: #e6ccc0;
  --color-glazed-sugar-300: #d3b6a9;
  --color-glazed-sugar-400: #b69789;
  --color-glazed-sugar-500: #9b7d6e;
  --color-glazed-sugar-600: #806456;
  --color-glazed-sugar-700: #694f42;
  --color-glazed-sugar-800: #533d32;
  --color-glazed-sugar-900: #412e25;
  --color-glazed-sugar-950: #291c15;
}