Cotton Boll to Death by Chocolate Color Palette

About this palette

Cotton Boll to Death by Chocolate is a 5-color cool, earthy palette: #E7F0FF (Cotton Boll), #8BC5FA (Clear Sky), #81AD7E (Verdant Haven), #5D7750 (Ghoul), #5F3F3F (Death by Chocolate). It mixes white, blue, green, brown tones and feels cool overall. The strongest text pairing is #E7F0FF on #5F3F3F with a contrast ratio of 8.07:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(231, 240, 255)	hsl(218, 100%, 95%)
Clear Sky	rgb(139, 197, 250)	hsl(209, 92%, 76%)
Verdant Haven	rgb(129, 173, 126)	hsl(116, 22%, 59%)
Ghoul	rgb(93, 119, 80)	hsl(100, 20%, 39%)
Death by Chocolate	rgb(95, 63, 63)	hsl(0, 20%, 31%)

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.

Aa8.07:1 Very good#E7F0FF on #5F3F3F
Aa8.07:1 Very good#5F3F3F on #E7F0FF
Aa5.05:1 Good#8BC5FA on #5F3F3F
Aa5.05:1 Good#5F3F3F on #8BC5FA
Aa4.34:1 Poor#E7F0FF on #5D7750
Aa4.34:1 Poor#5D7750 on #E7F0FF
Aa3.62:1 Poor#81AD7E on #5F3F3F
Aa3.62:1 Poor#5F3F3F on #81AD7E

Color blindness preview

CSS variables

/* Cotton Boll to Death by Chocolate — https://swatchly.xyz/palette/e7f0ff-8bc5fa-81ad7e-5d7750-5f3f3f */
:root {
  --cotton-boll: #e7f0ff;
  --clear-sky: #8bc5fa;
  --verdant-haven: #81ad7e;
  --ghoul: #5d7750;
  --death-by-chocolate: #5f3f3f;
}

Tailwind CSS v4

/* Cotton Boll to Death by Chocolate — https://swatchly.xyz/palette/e7f0ff-8bc5fa-81ad7e-5d7750-5f3f3f */
@theme {
  --color-cotton-boll: #e7f0ff;
  --color-cotton-boll-50: #f5f9ff;
  --color-cotton-boll-100: #e7f0ff;
  --color-cotton-boll-200: #d5dbe6;
  --color-cotton-boll-300: #bdc4d0;
  --color-cotton-boll-400: #9ca4b1;
  --color-cotton-boll-500: #808895;
  --color-cotton-boll-600: #656d7a;
  --color-cotton-boll-700: #4f5661;
  --color-cotton-boll-800: #3d434d;
  --color-cotton-boll-900: #2e333c;
  --color-cotton-boll-950: #1c1f25;
  --color-clear-sky: #8bc5fa;
  --color-clear-sky-50: #ebf5ff;
  --color-clear-sky-100: #d9ecff;
  --color-clear-sky-200: #b4dbff;
  --color-clear-sky-300: #8bc5fa;
  --color-clear-sky-400: #6fa5d7;
  --color-clear-sky-500: #528abc;
  --color-clear-sky-600: #386f9e;
  --color-clear-sky-700: #255883;
  --color-clear-sky-800: #17456a;
  --color-clear-sky-900: #0d3555;
  --color-clear-sky-950: #052138;
  --color-verdant-haven: #81ad7e;
  --color-verdant-haven-50: #e3fde1;
  --color-verdant-haven-100: #d7f4d4;
  --color-verdant-haven-200: #bfe1bc;
  --color-verdant-haven-300: #a5cba2;
  --color-verdant-haven-400: #81ad7e;
  --color-verdant-haven-500: #679164;
  --color-verdant-haven-600: #4e774b;
  --color-verdant-haven-700: #3a5f38;
  --color-verdant-haven-800: #2a4b29;
  --color-verdant-haven-900: #1e3a1d;
  --color-verdant-haven-950: #112510;
  --color-ghoul: #5d7750;
  --color-ghoul-50: #ebfbe3;
  --color-ghoul-100: #e0f2d7;
  --color-ghoul-200: #cbe0c0;
  --color-ghoul-300: #b3cba7;
  --color-ghoul-400: #92ad85;
  --color-ghoul-500: #779269;
  --color-ghoul-600: #5d7750;
  --color-ghoul-700: #485f3c;
  --color-ghoul-800: #364b2c;
  --color-ghoul-900: #283a1f;
  --color-ghoul-950: #182411;
  --color-death-by-chocolate: #5f3f3f;
  --color-death-by-chocolate-50: #fff1f1;
  --color-death-by-chocolate-100: #fee4e4;
  --color-death-by-chocolate-200: #edcfcf;
  --color-death-by-chocolate-300: #dab9b8;
  --color-death-by-chocolate-400: #be9a99;
  --color-death-by-chocolate-500: #a37f7f;
  --color-death-by-chocolate-600: #896666;
  --color-death-by-chocolate-700: #715151;
  --color-death-by-chocolate-800: #5f3f3f;
  --color-death-by-chocolate-900: #493131;
  --color-death-by-chocolate-950: #2f1e1e;
}