Oh Boy! to Chocolate Castle Color Palette

About this palette

Oh Boy! to Chocolate Castle is a 5-color cool, earthy palette: #BCD6FF (Oh Boy!), #EB93D2 (Bubblegum Kisses), #1EA65F (Secret Garden), #006945 (Jewel), #452500 (Chocolate Castle). It mixes blue, pink, green, brown tones and feels cool overall. The strongest text pairing is #BCD6FF on #452500 with a contrast ratio of 9.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh Boy!	rgb(188, 214, 255)	hsl(217, 100%, 87%)
Bubblegum Kisses	rgb(235, 147, 210)	hsl(317, 69%, 75%)
Secret Garden	rgb(30, 166, 95)	hsl(149, 69%, 38%)
Jewel	rgb(0, 105, 69)	hsl(159, 100%, 21%)
Chocolate Castle	rgb(69, 37, 0)	hsl(32, 100%, 14%)

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.

Aa9.36:1 Very good#BCD6FF on #452500
Aa9.36:1 Very good#452500 on #BCD6FF
Aa6.35:1 Good#EB93D2 on #452500
Aa6.35:1 Good#452500 on #EB93D2
Aa4.57:1 Good#BCD6FF on #006945
Aa4.57:1 Good#006945 on #BCD6FF
Aa4.40:1 Poor#1EA65F on #452500
Aa4.40:1 Poor#452500 on #1EA65F

Color blindness preview

CSS variables

/* Oh Boy! to Chocolate Castle — https://swatchly.xyz/palette/bcd6ff-eb93d2-1ea65f-006945-452500 */
:root {
  --oh-boy: #bcd6ff;
  --bubblegum-kisses: #eb93d2;
  --secret-garden: #1ea65f;
  --jewel: #006945;
  --chocolate-castle: #452500;
}

Tailwind CSS v4

/* Oh Boy! to Chocolate Castle — https://swatchly.xyz/palette/bcd6ff-eb93d2-1ea65f-006945-452500 */
@theme {
  --color-oh-boy: #bcd6ff;
  --color-oh-boy-50: #ecf4ff;
  --color-oh-boy-100: #dceaff;
  --color-oh-boy-200: #bcd6ff;
  --color-oh-boy-300: #aac0e3;
  --color-oh-boy-400: #89a1c6;
  --color-oh-boy-500: #6e86ab;
  --color-oh-boy-600: #556c8f;
  --color-oh-boy-700: #415576;
  --color-oh-boy-800: #31435f;
  --color-oh-boy-900: #24334b;
  --color-oh-boy-950: #151f30;
  --color-bubblegum-kisses: #eb93d2;
  --color-bubblegum-kisses-50: #ffe7f7;
  --color-bubblegum-kisses-100: #ffd4f1;
  --color-bubblegum-kisses-200: #fbb3e5;
  --color-bubblegum-kisses-300: #eb93d2;
  --color-bubblegum-kisses-400: #ca77b3;
  --color-bubblegum-kisses-500: #b05d9a;
  --color-bubblegum-kisses-600: #944580;
  --color-bubblegum-kisses-700: #7a3368;
  --color-bubblegum-kisses-800: #642554;
  --color-bubblegum-kisses-900: #511a44;
  --color-bubblegum-kisses-950: #340d2b;
  --color-secret-garden: #1ea65f;
  --color-secret-garden-50: #e2ffea;
  --color-secret-garden-100: #c1ffd3;
  --color-secret-garden-200: #9ff1b9;
  --color-secret-garden-300: #7edd9f;
  --color-secret-garden-400: #4ec17c;
  --color-secret-garden-500: #1ea65f;
  --color-secret-garden-600: #008749;
  --color-secret-garden-700: #006b39;
  --color-secret-garden-800: #00542b;
  --color-secret-garden-900: #004020;
  --color-secret-garden-950: #002812;
  --color-jewel: #006945;
  --color-jewel-50: #dcffec;
  --color-jewel-100: #c7f9de;
  --color-jewel-200: #ace8c8;
  --color-jewel-300: #8ed4b0;
  --color-jewel-400: #67b68f;
  --color-jewel-500: #479b74;
  --color-jewel-600: #2a805b;
  --color-jewel-700: #006945;
  --color-jewel-800: #005235;
  --color-jewel-900: #004028;
  --color-jewel-950: #002818;
  --color-chocolate-castle: #452500;
  --color-chocolate-castle-50: #fff3e8;
  --color-chocolate-castle-100: #ffe6d0;
  --color-chocolate-castle-200: #f0d1b6;
  --color-chocolate-castle-300: #dcba9a;
  --color-chocolate-castle-400: #be9876;
  --color-chocolate-castle-500: #a17c59;
  --color-chocolate-castle-600: #84613f;
  --color-chocolate-castle-700: #6a4a2c;
  --color-chocolate-castle-800: #53371d;
  --color-chocolate-castle-900: #452500;
  --color-chocolate-castle-950: #271708;
}