Chocolate Castle to Baby Blue Color Palette

About this palette

Chocolate Castle to Baby Blue is a 4-color vintage palette: #402611 (Chocolate Castle), #745833 (Cold Brew Coffee), #73A1C3 (Wandering River), #A5D5FB (Baby Blue). It mixes brown, blue tones and feels balanced overall. The strongest text pairing is #402611 on #A5D5FB with a contrast ratio of 8.99:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(64, 38, 17)	hsl(27, 58%, 16%)
Cold Brew Coffee	rgb(116, 88, 51)	hsl(34, 39%, 33%)
Wandering River	rgb(115, 161, 195)	hsl(206, 40%, 61%)
Baby Blue	rgb(165, 213, 251)	hsl(207, 91%, 82%)

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.

Aa8.99:1 Very good#402611 on #A5D5FB
Aa8.99:1 Very good#A5D5FB on #402611
Aa5.07:1 Good#402611 on #73A1C3
Aa5.07:1 Good#73A1C3 on #402611
Aa4.24:1 Poor#745833 on #A5D5FB
Aa4.24:1 Poor#A5D5FB on #745833

Color blindness preview

CSS variables

/* Chocolate Castle to Baby Blue — https://swatchly.xyz/palette/402611-745833-73a1c3-a5d5fb */
:root {
  --chocolate-castle: #402611;
  --cold-brew-coffee: #745833;
  --wandering-river: #73a1c3;
  --baby-blue: #a5d5fb;
}

Tailwind CSS v4

/* Chocolate Castle to Baby Blue — https://swatchly.xyz/palette/402611-745833-73a1c3-a5d5fb */
@theme {
  --color-chocolate-castle: #402611;
  --color-chocolate-castle-50: #fff2ea;
  --color-chocolate-castle-100: #fce7d7;
  --color-chocolate-castle-200: #ecd2c0;
  --color-chocolate-castle-300: #d7bba6;
  --color-chocolate-castle-400: #b99982;
  --color-chocolate-castle-500: #9c7d66;
  --color-chocolate-castle-600: #7f624c;
  --color-chocolate-castle-700: #654b37;
  --color-chocolate-castle-800: #4e3827;
  --color-chocolate-castle-900: #402611;
  --color-chocolate-castle-950: #24180e;
  --color-cold-brew-coffee: #745833;
  --color-cold-brew-coffee-50: #fff3e5;
  --color-cold-brew-coffee-100: #fce8cf;
  --color-cold-brew-coffee-200: #edd5b8;
  --color-cold-brew-coffee-300: #dabf9e;
  --color-cold-brew-coffee-400: #bea17c;
  --color-cold-brew-coffee-500: #a48761;
  --color-cold-brew-coffee-600: #8a6d48;
  --color-cold-brew-coffee-700: #745833;
  --color-cold-brew-coffee-800: #5c4425;
  --color-cold-brew-coffee-900: #483419;
  --color-cold-brew-coffee-950: #2e200c;
  --color-wandering-river: #73a1c3;
  --color-wandering-river-50: #e8f5ff;
  --color-wandering-river-100: #d2ecff;
  --color-wandering-river-200: #b4d8f4;
  --color-wandering-river-300: #98c1e0;
  --color-wandering-river-400: #73a1c3;
  --color-wandering-river-500: #5987a7;
  --color-wandering-river-600: #426d8c;
  --color-wandering-river-700: #2f5773;
  --color-wandering-river-800: #21445d;
  --color-wandering-river-900: #17354a;
  --color-wandering-river-950: #0b2131;
  --color-baby-blue: #a5d5fb;
  --color-baby-blue-50: #e1f2ff;
  --color-baby-blue-100: #cbe8ff;
  --color-baby-blue-200: #a5d5fb;
  --color-baby-blue-300: #96bfe0;
  --color-baby-blue-400: #75a2c5;
  --color-baby-blue-500: #5a87ab;
  --color-baby-blue-600: #426e8f;
  --color-baby-blue-700: #305876;
  --color-baby-blue-800: #224660;
  --color-baby-blue-900: #17364c;
  --color-baby-blue-950: #0b2131;
}