Broad Daylight to Wild Thing Color Palette

About this palette

Broad Daylight to Wild Thing is a 5-color cool, earthy palette: #C3E0FF (Broad Daylight), #98C38C (Irish Spring), #6787B1 (Kimono), #5D7548 (Ghoul), #624143 (Wild Thing). It mixes blue, green, brown tones and feels cool overall. The strongest text pairing is #C3E0FF on #624143 with a contrast ratio of 6.55:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(195, 224, 255)	hsl(211, 100%, 88%)
Irish Spring	rgb(152, 195, 140)	hsl(107, 31%, 66%)
Kimono	rgb(103, 135, 177)	hsl(214, 32%, 55%)
Ghoul	rgb(93, 117, 72)	hsl(92, 24%, 37%)
Wild Thing	rgb(98, 65, 67)	hsl(356, 20%, 32%)

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.

Aa6.55:1 Good#C3E0FF on #624143
Aa6.55:1 Good#624143 on #C3E0FF
Aa4.46:1 Poor#98C38C on #624143
Aa4.46:1 Poor#624143 on #98C38C
Aa3.76:1 Poor#C3E0FF on #5D7548
Aa3.76:1 Poor#5D7548 on #C3E0FF

Color blindness preview

CSS variables

/* Broad Daylight to Wild Thing — https://swatchly.xyz/palette/c3e0ff-98c38c-6787b1-5d7548-624143 */
:root {
  --broad-daylight: #c3e0ff;
  --irish-spring: #98c38c;
  --kimono: #6787b1;
  --ghoul: #5d7548;
  --wild-thing: #624143;
}

Tailwind CSS v4

/* Broad Daylight to Wild Thing — https://swatchly.xyz/palette/c3e0ff-98c38c-6787b1-5d7548-624143 */
@theme {
  --color-broad-daylight: #c3e0ff;
  --color-broad-daylight-50: #f4f9ff;
  --color-broad-daylight-100: #e4f1ff;
  --color-broad-daylight-200: #c3e0ff;
  --color-broad-daylight-300: #b0c8e1;
  --color-broad-daylight-400: #8da8c4;
  --color-broad-daylight-500: #718ba8;
  --color-broad-daylight-600: #56708b;
  --color-broad-daylight-700: #415871;
  --color-broad-daylight-800: #304459;
  --color-broad-daylight-900: #233446;
  --color-broad-daylight-950: #14202d;
  --color-irish-spring: #98c38c;
  --color-irish-spring-50: #ddf8d6;
  --color-irish-spring-100: #cfedc7;
  --color-irish-spring-200: #b6d9ad;
  --color-irish-spring-300: #98c38c;
  --color-irish-spring-400: #7ca571;
  --color-irish-spring-500: #638c57;
  --color-irish-spring-600: #4c7241;
  --color-irish-spring-700: #395c2f;
  --color-irish-spring-800: #2b4a22;
  --color-irish-spring-900: #203b18;
  --color-irish-spring-950: #12250c;
  --color-kimono: #6787b1;
  --color-kimono-50: #eef6ff;
  --color-kimono-100: #deecff;
  --color-kimono-200: #bfd9fb;
  --color-kimono-300: #a5c2e9;
  --color-kimono-400: #83a3cd;
  --color-kimono-500: #6787b1;
  --color-kimono-600: #4e6d94;
  --color-kimono-700: #3a567a;
  --color-kimono-800: #2b4362;
  --color-kimono-900: #1f334e;
  --color-kimono-950: #112033;
  --color-ghoul: #5d7548;
  --color-ghoul-50: #ecfbe0;
  --color-ghoul-100: #e1f2d3;
  --color-ghoul-200: #cbe0bb;
  --color-ghoul-300: #b3caa0;
  --color-ghoul-400: #92ab7e;
  --color-ghoul-500: #779062;
  --color-ghoul-600: #5d7548;
  --color-ghoul-700: #485d35;
  --color-ghoul-800: #374926;
  --color-ghoul-900: #29391a;
  --color-ghoul-950: #18230e;
  --color-wild-thing: #624143;
  --color-wild-thing-50: #fff1f2;
  --color-wild-thing-100: #fee4e5;
  --color-wild-thing-200: #edcfd0;
  --color-wild-thing-300: #dbb9ba;
  --color-wild-thing-400: #bf9a9c;
  --color-wild-thing-500: #a58082;
  --color-wild-thing-600: #8b6869;
  --color-wild-thing-700: #745355;
  --color-wild-thing-800: #624143;
  --color-wild-thing-900: #4b3234;
  --color-wild-thing-950: #311f20;
}