Chocolate Castle to Fresh Air color palette

452300Chocolate Castle 423D85Queen of the Night Shift AC7400Falafel 00B8E2Blue Bikini AAECFFFresh Air

Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Castle to Fresh Air is a 5-color cool palette: #452300 (Chocolate Castle), #423D85 (Queen of the Night Shift), #AC7400 (Falafel), #00B8E2 (Blue Bikini), #AAECFF (Fresh Air). It mixes brown, purple, yellow, blue tones and feels cool overall. The strongest text pairing is #452300 on #AAECFF with a contrast ratio of 10.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(69, 35, 0)	hsl(30, 100%, 14%)
Queen of the Night Shift	rgb(66, 61, 133)	hsl(244, 37%, 38%)
Falafel	rgb(172, 116, 0)	hsl(40, 100%, 34%)
Blue Bikini	rgb(0, 184, 226)	hsl(191, 100%, 44%)
Fresh Air	rgb(170, 236, 255)	hsl(193, 100%, 83%)

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.81:1 Very good#452300 on #AAECFF
Aa10.81:1 Very good#AAECFF on #452300
Aa7.22:1 Very good#423D85 on #AAECFF
Aa7.22:1 Very good#AAECFF on #423D85
Aa6.00:1 Good#452300 on #00B8E2
Aa6.00:1 Good#00B8E2 on #452300
Aa4.00:1 Poor#423D85 on #00B8E2
Aa4.00:1 Poor#00B8E2 on #423D85

Color blindness preview

CSS variables

/* Chocolate Castle to Fresh Air — https://swatchly.xyz/palette/452300-423d85-ac7400-00b8e2-aaecff */
:root {
  --chocolate-castle: #452300;
  --queen-of-the-night-shift: #423d85;
  --falafel: #ac7400;
  --blue-bikini: #00b8e2;
  --fresh-air: #aaecff;
}

Tailwind CSS v4

/* Chocolate Castle to Fresh Air — https://swatchly.xyz/palette/452300-423d85-ac7400-00b8e2-aaecff */
@theme {
  --color-chocolate-castle: #452300;
  --color-chocolate-castle-50: #fff3e9;
  --color-chocolate-castle-100: #ffe6d2;
  --color-chocolate-castle-200: #f1d0b6;
  --color-chocolate-castle-300: #deb99b;
  --color-chocolate-castle-400: #bf9776;
  --color-chocolate-castle-500: #a37a59;
  --color-chocolate-castle-600: #855f3f;
  --color-chocolate-castle-700: #6a482c;
  --color-chocolate-castle-800: #52361d;
  --color-chocolate-castle-900: #452300;
  --color-chocolate-castle-950: #271608;
  --color-queen-of-the-night-shift: #423d85;
  --color-queen-of-the-night-shift-50: #f3f4ff;
  --color-queen-of-the-night-shift-100: #e8e9ff;
  --color-queen-of-the-night-shift-200: #d1d3ff;
  --color-queen-of-the-night-shift-300: #b9bbff;
  --color-queen-of-the-night-shift-400: #9a9be8;
  --color-queen-of-the-night-shift-500: #8080ce;
  --color-queen-of-the-night-shift-600: #6866b1;
  --color-queen-of-the-night-shift-700: #535196;
  --color-queen-of-the-night-shift-800: #423d85;
  --color-queen-of-the-night-shift-900: #333065;
  --color-queen-of-the-night-shift-950: #1f1d44;
  --color-falafel: #ac7400;
  --color-falafel-50: #fff2e1;
  --color-falafel-100: #ffe5c2;
  --color-falafel-200: #facc8c;
  --color-falafel-300: #e6b368;
  --color-falafel-400: #c99138;
  --color-falafel-500: #ac7400;
  --color-falafel-600: #8b5d00;
  --color-falafel-700: #6f4900;
  --color-falafel-800: #583900;
  --color-falafel-900: #452c00;
  --color-falafel-950: #2c1a00;
  --color-blue-bikini: #00b8e2;
  --color-blue-bikini-50: #ebfaff;
  --color-blue-bikini-100: #d5f4ff;
  --color-blue-bikini-200: #a2e7ff;
  --color-blue-bikini-300: #67d5f9;
  --color-blue-bikini-400: #00b8e2;
  --color-blue-bikini-500: #0099bc;
  --color-blue-bikini-600: #007b98;
  --color-blue-bikini-700: #006179;
  --color-blue-bikini-800: #004c5f;
  --color-blue-bikini-900: #003a49;
  --color-blue-bikini-950: #00242e;
  --color-fresh-air: #aaecff;
  --color-fresh-air-50: #f4fcff;
  --color-fresh-air-100: #def7ff;
  --color-fresh-air-200: #aaecff;
  --color-fresh-air-300: #9dd2e1;
  --color-fresh-air-400: #75b2c3;
  --color-fresh-air-500: #5595a6;
  --color-fresh-air-600: #387889;
  --color-fresh-air-700: #235f6f;
  --color-fresh-air-800: #134a57;
  --color-fresh-air-900: #083944;
  --color-fresh-air-950: #02242c;
}