Broad Daylight to Medium Roast color palette

C4DDFFBroad Daylight 9ACA27Bergamot 8B9E00Noxious 885700Grizzly 701697Orb of Discord 382000Medium Roast

Open in generator Export PNG, PDF, ASE…

About this palette

Broad Daylight to Medium Roast is a 6-color cool palette: #C4DDFF (Broad Daylight), #9ACA27 (Bergamot), #8B9E00 (Noxious), #885700 (Grizzly), #701697 (Orb of Discord), #382000 (Medium Roast). It mixes blue, green, brown, purple tones and feels cool overall. The strongest text pairing is #C4DDFF on #382000 with a contrast ratio of 11.01:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(196, 221, 255)	hsl(215, 100%, 88%)
Bergamot	rgb(154, 202, 39)	hsl(78, 68%, 47%)
Noxious	rgb(139, 158, 0)	hsl(67, 100%, 31%)
Grizzly	rgb(136, 87, 0)	hsl(38, 100%, 27%)
Orb of Discord	rgb(112, 22, 151)	hsl(282, 75%, 34%)
Medium Roast	rgb(56, 32, 0)	hsl(34, 100%, 11%)

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.

Aa11.01:1 Very good#C4DDFF on #382000
Aa11.01:1 Very good#382000 on #C4DDFF
Aa7.89:1 Very good#9ACA27 on #382000
Aa7.89:1 Very good#382000 on #9ACA27
Aa6.72:1 Good#C4DDFF on #701697
Aa6.72:1 Good#701697 on #C4DDFF
Aa5.08:1 Good#8B9E00 on #382000
Aa5.08:1 Good#382000 on #8B9E00

Color blindness preview

CSS variables

/* Broad Daylight to Medium Roast — https://swatchly.xyz/palette/c4ddff-9aca27-8b9e00-885700-701697-382000 */
:root {
  --broad-daylight: #c4ddff;
  --bergamot: #9aca27;
  --noxious: #8b9e00;
  --grizzly: #885700;
  --orb-of-discord: #701697;
  --medium-roast: #382000;
}

Tailwind CSS v4

/* Broad Daylight to Medium Roast — https://swatchly.xyz/palette/c4ddff-9aca27-8b9e00-885700-701697-382000 */
@theme {
  --color-broad-daylight: #c4ddff;
  --color-broad-daylight-50: #f3f8ff;
  --color-broad-daylight-100: #e3efff;
  --color-broad-daylight-200: #c4ddff;
  --color-broad-daylight-300: #b1c5e2;
  --color-broad-daylight-400: #8fa5c4;
  --color-broad-daylight-500: #7389a8;
  --color-broad-daylight-600: #596e8c;
  --color-broad-daylight-700: #435772;
  --color-broad-daylight-800: #32435b;
  --color-broad-daylight-900: #253447;
  --color-broad-daylight-950: #15202e;
  --color-bergamot: #9aca27;
  --color-bergamot-50: #defdac;
  --color-bergamot-100: #d0f397;
  --color-bergamot-200: #b8df70;
  --color-bergamot-300: #9aca27;
  --color-bergamot-400: #7faa00;
  --color-bergamot-500: #6a8e00;
  --color-bergamot-600: #557300;
  --color-bergamot-700: #435c00;
  --color-bergamot-800: #354900;
  --color-bergamot-900: #293a00;
  --color-bergamot-950: #182400;
  --color-noxious: #8b9e00;
  --color-noxious-50: #f2ffc6;
  --color-noxious-100: #eaf9b3;
  --color-noxious-200: #d8e895;
  --color-noxious-300: #c2d573;
  --color-noxious-400: #a4b842;
  --color-noxious-500: #8b9e00;
  --color-noxious-600: #707f00;
  --color-noxious-700: #586400;
  --color-noxious-800: #444e00;
  --color-noxious-900: #333b00;
  --color-noxious-950: #1f2400;
  --color-grizzly: #885700;
  --color-grizzly-50: #fff3e5;
  --color-grizzly-100: #ffe5c6;
  --color-grizzly-200: #f6cc99;
  --color-grizzly-300: #e2b278;
  --color-grizzly-400: #c3904e;
  --color-grizzly-500: #a6732c;
  --color-grizzly-600: #885700;
  --color-grizzly-700: #6c4400;
  --color-grizzly-800: #563500;
  --color-grizzly-900: #432800;
  --color-grizzly-950: #2b1800;
  --color-orb-of-discord: #701697;
  --color-orb-of-discord-50: #faf2ff;
  --color-orb-of-discord-100: #f4e4ff;
  --color-orb-of-discord-200: #e9c6ff;
  --color-orb-of-discord-300: #dca2ff;
  --color-orb-of-discord-400: #c475f0;
  --color-orb-of-discord-500: #a755d2;
  --color-orb-of-discord-600: #8839b0;
  --color-orb-of-discord-700: #701697;
  --color-orb-of-discord-800: #571475;
  --color-orb-of-discord-900: #440b5e;
  --color-orb-of-discord-950: #2c043e;
  --color-medium-roast: #382000;
  --color-medium-roast-50: #fff3e6;
  --color-medium-roast-100: #fce8d2;
  --color-medium-roast-200: #ebd3b9;
  --color-medium-roast-300: #d6bc9f;
  --color-medium-roast-400: #b99c7c;
  --color-medium-roast-500: #9f8261;
  --color-medium-roast-600: #856949;
  --color-medium-roast-700: #6d5437;
  --color-medium-roast-800: #594328;
  --color-medium-roast-900: #48351e;
  --color-medium-roast-950: #382000;
}