Genie to Cotton Boll color palette

444061Genie 607952Ghoul 301F27Ink Black 8D9C74Guacamole DDB8D1Purple Poodle E5EBFFCotton Boll

About this palette

Genie to Cotton Boll is a 6-color muted palette: #444061 (Genie), #607952 (Ghoul), #301F27 (Ink Black), #8D9C74 (Guacamole), #DDB8D1 (Purple Poodle), #E5EBFF (Cotton Boll). It mixes purple, green, gray, pink, white tones and feels cool overall. The strongest text pairing is #301F27 on #E5EBFF with a contrast ratio of 13.07:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Genie	rgb(68, 64, 97)	hsl(247, 20%, 32%)
Ghoul	rgb(96, 121, 82)	hsl(98, 19%, 40%)
Ink Black	rgb(48, 31, 39)	hsl(332, 22%, 15%)
Guacamole	rgb(141, 156, 116)	hsl(82, 17%, 53%)
Purple Poodle	rgb(221, 184, 209)	hsl(319, 35%, 79%)
Cotton Boll	rgb(229, 235, 255)	hsl(226, 100%, 95%)

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.

Aa13.07:1 Super#301F27 on #E5EBFF
Aa13.07:1 Super#E5EBFF on #301F27
Aa8.77:1 Very good#301F27 on #DDB8D1
Aa8.77:1 Very good#DDB8D1 on #301F27
Aa8.21:1 Very good#444061 on #E5EBFF
Aa8.21:1 Very good#E5EBFF on #444061
Aa5.51:1 Good#444061 on #DDB8D1
Aa5.51:1 Good#DDB8D1 on #444061

Color blindness preview

CSS variables

/* Genie to Cotton Boll — https://swatchly.xyz/palette/444061-607952-301f27-8d9c74-ddb8d1-e5ebff */
:root {
  --genie: #444061;
  --ghoul: #607952;
  --ink-black: #301f27;
  --guacamole: #8d9c74;
  --purple-poodle: #ddb8d1;
  --cotton-boll: #e5ebff;
}

Tailwind CSS v4

/* Genie to Cotton Boll — https://swatchly.xyz/palette/444061-607952-301f27-8d9c74-ddb8d1-e5ebff */
@theme {
  --color-genie: #444061;
  --color-genie-50: #f4f4ff;
  --color-genie-100: #eae8ff;
  --color-genie-200: #d6d4f2;
  --color-genie-300: #c0bddf;
  --color-genie-400: #a19ec2;
  --color-genie-500: #8683a8;
  --color-genie-600: #6c698c;
  --color-genie-700: #565373;
  --color-genie-800: #444061;
  --color-genie-900: #343149;
  --color-genie-950: #201e30;
  --color-ghoul: #607952;
  --color-ghoul-50: #ebfbe3;
  --color-ghoul-100: #e1f3d8;
  --color-ghoul-200: #cce1c1;
  --color-ghoul-300: #b5cca8;
  --color-ghoul-400: #94ae87;
  --color-ghoul-500: #79936b;
  --color-ghoul-600: #607952;
  --color-ghoul-700: #4a613d;
  --color-ghoul-800: #384c2d;
  --color-ghoul-900: #2a3a20;
  --color-ghoul-950: #192512;
  --color-ink-black: #301f27;
  --color-ink-black-50: #fef1f7;
  --color-ink-black-100: #f5e6ed;
  --color-ink-black-200: #e3d2da;
  --color-ink-black-300: #cebbc3;
  --color-ink-black-400: #b09ba4;
  --color-ink-black-500: #96808a;
  --color-ink-black-600: #7c6771;
  --color-ink-black-700: #65525b;
  --color-ink-black-800: #524149;
  --color-ink-black-900: #41333a;
  --color-ink-black-950: #301f27;
  --color-guacamole: #8d9c74;
  --color-guacamole-50: #ebf5dc;
  --color-guacamole-100: #dfeacd;
  --color-guacamole-200: #c8d5b4;
  --color-guacamole-300: #afbd98;
  --color-guacamole-400: #8d9c74;
  --color-guacamole-500: #74835c;
  --color-guacamole-600: #5d6a45;
  --color-guacamole-700: #495534;
  --color-guacamole-800: #394326;
  --color-guacamole-900: #2c351c;
  --color-guacamole-950: #1c2210;
  --color-purple-poodle: #ddb8d1;
  --color-purple-poodle-50: #fff3fb;
  --color-purple-poodle-100: #fde6f5;
  --color-purple-poodle-200: #edd1e4;
  --color-purple-poodle-300: #ddb8d1;
  --color-purple-poodle-400: #bb99b0;
  --color-purple-poodle-500: #9f7c94;
  --color-purple-poodle-600: #826278;
  --color-purple-poodle-700: #694c60;
  --color-purple-poodle-800: #533a4b;
  --color-purple-poodle-900: #402b3a;
  --color-purple-poodle-950: #291a24;
  --color-cotton-boll: #e5ebff;
  --color-cotton-boll-50: #f2f5ff;
  --color-cotton-boll-100: #e5ebff;
  --color-cotton-boll-200: #d3d7e6;
  --color-cotton-boll-300: #bcc1d1;
  --color-cotton-boll-400: #9ca1b3;
  --color-cotton-boll-500: #808698;
  --color-cotton-boll-600: #666b7c;
  --color-cotton-boll-700: #505564;
  --color-cotton-boll-800: #3e424f;
  --color-cotton-boll-900: #2f323e;
  --color-cotton-boll-950: #1d1f27;
}