Easter Egg to Broad Daylight color palette

8893C1Easter Egg 415539Zen Garden Olive 231311Italian Roast 964E4FLumberjack C1D9FFBroad Daylight

About this palette

Easter Egg to Broad Daylight is a 5-color cool palette: #8893C1 (Easter Egg), #415539 (Zen Garden Olive), #231311 (Italian Roast), #964E4F (Lumberjack), #C1D9FF (Broad Daylight). It mixes blue, green, black, red tones and feels cool overall. The strongest text pairing is #231311 on #C1D9FF with a contrast ratio of 12.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Easter Egg	rgb(136, 147, 193)	hsl(228, 31%, 65%)
Zen Garden Olive	rgb(65, 85, 57)	hsl(103, 20%, 28%)
Italian Roast	rgb(35, 19, 17)	hsl(7, 35%, 10%)
Lumberjack	rgb(150, 78, 79)	hsl(359, 32%, 45%)
Broad Daylight	rgb(193, 217, 255)	hsl(217, 100%, 88%)

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.

Aa12.48:1 Super#231311 on #C1D9FF
Aa12.48:1 Super#C1D9FF on #231311
Aa5.96:1 Good#8893C1 on #231311
Aa5.96:1 Good#231311 on #8893C1
Aa5.67:1 Good#415539 on #C1D9FF
Aa5.67:1 Good#C1D9FF on #415539
Aa4.18:1 Poor#964E4F on #C1D9FF
Aa4.18:1 Poor#C1D9FF on #964E4F

Color blindness preview

CSS variables

/* Easter Egg to Broad Daylight — https://swatchly.xyz/palette/8893c1-415539-231311-964e4f-c1d9ff */
:root {
  --easter-egg: #8893c1;
  --zen-garden-olive: #415539;
  --italian-roast: #231311;
  --lumberjack: #964e4f;
  --broad-daylight: #c1d9ff;
}

Tailwind CSS v4

/* Easter Egg to Broad Daylight — https://swatchly.xyz/palette/8893c1-415539-231311-964e4f-c1d9ff */
@theme {
  --color-easter-egg: #8893c1;
  --color-easter-egg-50: #ecf0ff;
  --color-easter-egg-100: #dce4ff;
  --color-easter-egg-200: #c4cdf4;
  --color-easter-egg-300: #aab4df;
  --color-easter-egg-400: #8893c1;
  --color-easter-egg-500: #6f7aa6;
  --color-easter-egg-600: #58628b;
  --color-easter-egg-700: #454d73;
  --color-easter-egg-800: #363d5d;
  --color-easter-egg-900: #292f4b;
  --color-easter-egg-950: #191e32;
  --color-zen-garden-olive: #415539;
  --color-zen-garden-olive-50: #edfae8;
  --color-zen-garden-olive-100: #e2f1dc;
  --color-zen-garden-olive-200: #cbdcc4;
  --color-zen-garden-olive-300: #b1c5a9;
  --color-zen-garden-olive-400: #8fa587;
  --color-zen-garden-olive-500: #73896a;
  --color-zen-garden-olive-600: #586d50;
  --color-zen-garden-olive-700: #415539;
  --color-zen-garden-olive-800: #33422c;
  --color-zen-garden-olive-900: #263321;
  --color-zen-garden-olive-950: #161f12;
  --color-italian-roast: #231311;
  --color-italian-roast-50: #fff2f0;
  --color-italian-roast-100: #f6e7e5;
  --color-italian-roast-200: #e5d3d0;
  --color-italian-roast-300: #d0bcb9;
  --color-italian-roast-400: #b19c99;
  --color-italian-roast-500: #947f7c;
  --color-italian-roast-600: #776360;
  --color-italian-roast-700: #5e4c49;
  --color-italian-roast-800: #483937;
  --color-italian-roast-900: #352927;
  --color-italian-roast-950: #231311;
  --color-lumberjack: #964e4f;
  --color-lumberjack-50: #fff1f1;
  --color-lumberjack-100: #ffe2e1;
  --color-lumberjack-200: #ffc5c3;
  --color-lumberjack-300: #efa9a8;
  --color-lumberjack-400: #d28685;
  --color-lumberjack-500: #b46969;
  --color-lumberjack-600: #964e4f;
  --color-lumberjack-700: #7a3b3c;
  --color-lumberjack-800: #622c2d;
  --color-lumberjack-900: #4e2021;
  --color-lumberjack-950: #331213;
  --color-broad-daylight: #c1d9ff;
  --color-broad-daylight-50: #f0f6ff;
  --color-broad-daylight-100: #e0ecff;
  --color-broad-daylight-200: #c1d9ff;
  --color-broad-daylight-300: #aec2e2;
  --color-broad-daylight-400: #8da3c5;
  --color-broad-daylight-500: #7187aa;
  --color-broad-daylight-600: #586d8e;
  --color-broad-daylight-700: #435674;
  --color-broad-daylight-800: #33435d;
  --color-broad-daylight-900: #253349;
  --color-broad-daylight-950: #161f2f;
}