Broad Daylight to Garden of Eden color palette

C1DBFFBroad Daylight 5573D0Serenity’s Reign 510E05Burned 005D1DDeep Green 80A46AGarden of Eden

About this palette

Broad Daylight to Garden of Eden is a 5-color cool, earthy palette: #C1DBFF (Broad Daylight), #5573D0 (Serenity’s Reign), #510E05 (Burned), #005D1D (Deep Green), #80A46A (Garden of Eden). It mixes blue, brown, green tones and feels cool overall. The strongest text pairing is #C1DBFF on #510E05 with a contrast ratio of 10.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(193, 219, 255)	hsl(215, 100%, 88%)
Serenity’s Reign	rgb(85, 115, 208)	hsl(225, 57%, 57%)
Burned	rgb(81, 14, 5)	hsl(7, 88%, 17%)
Deep Green	rgb(0, 93, 29)	hsl(139, 100%, 18%)
Garden of Eden	rgb(128, 164, 106)	hsl(97, 24%, 53%)

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.

Aa10.49:1 Very good#C1DBFF on #510E05
Aa10.49:1 Very good#510E05 on #C1DBFF
Aa5.75:1 Good#C1DBFF on #005D1D
Aa5.75:1 Good#005D1D on #C1DBFF
Aa5.26:1 Good#510E05 on #80A46A
Aa5.26:1 Good#80A46A on #510E05
Aa3.36:1 Poor#5573D0 on #510E05
Aa3.36:1 Poor#510E05 on #5573D0

Color blindness preview

CSS variables

/* Broad Daylight to Garden of Eden — https://swatchly.xyz/palette/c1dbff-5573d0-510e05-005d1d-80a46a */
:root {
  --broad-daylight: #c1dbff;
  --serenity-s-reign: #5573d0;
  --burned: #510e05;
  --deep-green: #005d1d;
  --garden-of-eden: #80a46a;
}

Tailwind CSS v4

/* Broad Daylight to Garden of Eden — https://swatchly.xyz/palette/c1dbff-5573d0-510e05-005d1d-80a46a */
@theme {
  --color-broad-daylight: #c1dbff;
  --color-broad-daylight-50: #f0f7ff;
  --color-broad-daylight-100: #e1edff;
  --color-broad-daylight-200: #c1dbff;
  --color-broad-daylight-300: #aec4e2;
  --color-broad-daylight-400: #8da4c5;
  --color-broad-daylight-500: #7188a9;
  --color-broad-daylight-600: #576e8d;
  --color-broad-daylight-700: #425773;
  --color-broad-daylight-800: #32435c;
  --color-broad-daylight-900: #253448;
  --color-broad-daylight-950: #15202f;
  --color-serenity-s-reign: #5573d0;
  --color-serenity-s-reign-50: #eef3ff;
  --color-serenity-s-reign-100: #dce6ff;
  --color-serenity-s-reign-200: #bdd0ff;
  --color-serenity-s-reign-300: #9ab6ff;
  --color-serenity-s-reign-400: #7191ef;
  --color-serenity-s-reign-500: #5573d0;
  --color-serenity-s-reign-600: #405ab1;
  --color-serenity-s-reign-700: #2f4695;
  --color-serenity-s-reign-800: #23367a;
  --color-serenity-s-reign-900: #192963;
  --color-serenity-s-reign-950: #0e1943;
  --color-burned: #510e05;
  --color-burned-50: #fff2ef;
  --color-burned-100: #ffe4df;
  --color-burned-200: #ffc9be;
  --color-burned-300: #f3ad9f;
  --color-burned-400: #d5897a;
  --color-burned-500: #b76b5d;
  --color-burned-600: #975043;
  --color-burned-700: #793a2f;
  --color-burned-800: #5e2920;
  --color-burned-900: #510e05;
  --color-burned-950: #2c0e09;
  --color-deep-green: #005d1d;
  --color-deep-green-50: #e0ffe2;
  --color-deep-green-100: #caface;
  --color-deep-green-200: #ade7b2;
  --color-deep-green-300: #8ed194;
  --color-deep-green-400: #66b06f;
  --color-deep-green-500: #469351;
  --color-deep-green-600: #2a7638;
  --color-deep-green-700: #005d1d;
  --color-deep-green-800: #084818;
  --color-deep-green-900: #02380f;
  --color-deep-green-950: #002306;
  --color-garden-of-eden: #80a46a;
  --color-garden-of-eden-50: #e3fad7;
  --color-garden-of-eden-100: #d6efc7;
  --color-garden-of-eden-200: #bddbac;
  --color-garden-of-eden-300: #a3c48f;
  --color-garden-of-eden-400: #80a46a;
  --color-garden-of-eden-500: #678a51;
  --color-garden-of-eden-600: #50713b;
  --color-garden-of-eden-700: #3d5b29;
  --color-garden-of-eden-800: #2e481d;
  --color-garden-of-eden-900: #233913;
  --color-garden-of-eden-950: #142409;
}