Cotton Boll to Dark Knight color palette

E8F0FFCotton Boll 96B2F8Wondrous Wisteria 7E93C9King Neptune 526BAABellflower 35456BForlorn Cruise 141A34Dark Knight

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Dark Knight is a 6-color cool, monochromatic, gradient palette: #E8F0FF (Cotton Boll), #96B2F8 (Wondrous Wisteria), #7E93C9 (King Neptune), #526BAA (Bellflower), #35456B (Forlorn Cruise), #141A34 (Dark Knight). It mixes white, blue tones and feels cool overall. The strongest text pairing is #E8F0FF on #141A34 with a contrast ratio of 14.95:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(232, 240, 255)	hsl(219, 100%, 95%)
Wondrous Wisteria	rgb(150, 178, 248)	hsl(223, 87%, 78%)
King Neptune	rgb(126, 147, 201)	hsl(223, 41%, 64%)
Bellflower	rgb(82, 107, 170)	hsl(223, 35%, 49%)
Forlorn Cruise	rgb(53, 69, 107)	hsl(222, 34%, 31%)
Dark Knight	rgb(20, 26, 52)	hsl(229, 44%, 14%)

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.

Aa14.95:1 Super#E8F0FF on #141A34
Aa14.95:1 Super#141A34 on #E8F0FF
Aa8.28:1 Very good#E8F0FF on #35456B
Aa8.28:1 Very good#35456B on #E8F0FF
Aa8.17:1 Very good#96B2F8 on #141A34
Aa8.17:1 Very good#141A34 on #96B2F8
Aa5.63:1 Good#7E93C9 on #141A34
Aa5.63:1 Good#141A34 on #7E93C9

Color blindness preview

CSS variables

/* Cotton Boll to Dark Knight — https://swatchly.xyz/palette/e8f0ff-96b2f8-7e93c9-526baa-35456b-141a34 */
:root {
  --cotton-boll: #e8f0ff;
  --wondrous-wisteria: #96b2f8;
  --king-neptune: #7e93c9;
  --bellflower: #526baa;
  --forlorn-cruise: #35456b;
  --dark-knight: #141a34;
}

Tailwind CSS v4

/* Cotton Boll to Dark Knight — https://swatchly.xyz/palette/e8f0ff-96b2f8-7e93c9-526baa-35456b-141a34 */
@theme {
  --color-cotton-boll: #e8f0ff;
  --color-cotton-boll-50: #f6f9ff;
  --color-cotton-boll-100: #e8f0ff;
  --color-cotton-boll-200: #d6dbe6;
  --color-cotton-boll-300: #bec4d0;
  --color-cotton-boll-400: #9da4b1;
  --color-cotton-boll-500: #818895;
  --color-cotton-boll-600: #666d79;
  --color-cotton-boll-700: #4f5561;
  --color-cotton-boll-800: #3d434c;
  --color-cotton-boll-900: #2e333b;
  --color-cotton-boll-950: #1c1f25;
  --color-wondrous-wisteria: #96b2f8;
  --color-wondrous-wisteria-50: #e7eeff;
  --color-wondrous-wisteria-100: #d6e2ff;
  --color-wondrous-wisteria-200: #b6ccff;
  --color-wondrous-wisteria-300: #96b2f8;
  --color-wondrous-wisteria-400: #7b95d7;
  --color-wondrous-wisteria-500: #627bbd;
  --color-wondrous-wisteria-600: #4c63a1;
  --color-wondrous-wisteria-700: #3a4e86;
  --color-wondrous-wisteria-800: #2c3e6f;
  --color-wondrous-wisteria-900: #21305a;
  --color-wondrous-wisteria-950: #121d3c;
  --color-king-neptune: #7e93c9;
  --color-king-neptune-50: #eaf0ff;
  --color-king-neptune-100: #d9e4ff;
  --color-king-neptune-200: #bbcefb;
  --color-king-neptune-300: #a1b5e7;
  --color-king-neptune-400: #7e93c9;
  --color-king-neptune-500: #667aae;
  --color-king-neptune-600: #4f6293;
  --color-king-neptune-700: #3d4d79;
  --color-king-neptune-800: #2f3d63;
  --color-king-neptune-900: #232f50;
  --color-king-neptune-950: #151e36;
  --color-bellflower: #526baa;
  --color-bellflower-50: #f1f5ff;
  --color-bellflower-100: #e3ecff;
  --color-bellflower-200: #c7d8ff;
  --color-bellflower-300: #a8c1fc;
  --color-bellflower-400: #86a1e2;
  --color-bellflower-500: #6b86c7;
  --color-bellflower-600: #526baa;
  --color-bellflower-700: #3e548d;
  --color-bellflower-800: #2e4172;
  --color-bellflower-900: #21315b;
  --color-bellflower-950: #131e3c;
  --color-forlorn-cruise: #35456b;
  --color-forlorn-cruise-50: #f1f5ff;
  --color-forlorn-cruise-100: #e2ebff;
  --color-forlorn-cruise-200: #c8d8fa;
  --color-forlorn-cruise-300: #b0c2e8;
  --color-forlorn-cruise-400: #90a3cd;
  --color-forlorn-cruise-500: #7588b2;
  --color-forlorn-cruise-600: #5c6e96;
  --color-forlorn-cruise-700: #48587d;
  --color-forlorn-cruise-800: #35456b;
  --color-forlorn-cruise-900: #293551;
  --color-forlorn-cruise-950: #182135;
  --color-dark-knight: #141a34;
  --color-dark-knight-50: #f2f5ff;
  --color-dark-knight-100: #e4ebff;
  --color-dark-knight-200: #ced7f1;
  --color-dark-knight-300: #b7c0de;
  --color-dark-knight-400: #96a0c1;
  --color-dark-knight-500: #7a84a5;
  --color-dark-knight-600: #606988;
  --color-dark-knight-700: #4a526e;
  --color-dark-knight-800: #383f57;
  --color-dark-knight-900: #292f43;
  --color-dark-knight-950: #141a34;
}