Cotton Boll to Glimpse of Void color palette

E2EFFFCotton Boll 95BFFFPastel Blue 58789FMontreux Blue 1B2A47Eternal Darkness 37548CGlimpse of Void

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Glimpse of Void is a 5-color cool, monochromatic palette: #E2EFFF (Cotton Boll), #95BFFF (Pastel Blue), #58789F (Montreux Blue), #1B2A47 (Eternal Darkness), #37548C (Glimpse of Void). It mixes white, blue tones and feels cool overall. The strongest text pairing is #E2EFFF on #1B2A47 with a contrast ratio of 12.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(226, 239, 255)	hsl(213, 100%, 94%)
Pastel Blue	rgb(149, 191, 255)	hsl(216, 100%, 79%)
Montreux Blue	rgb(88, 120, 159)	hsl(213, 29%, 48%)
Eternal Darkness	rgb(27, 42, 71)	hsl(220, 45%, 19%)
Glimpse of Void	rgb(55, 84, 140)	hsl(220, 44%, 38%)

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.27:1 Super#E2EFFF on #1B2A47
Aa12.27:1 Super#1B2A47 on #E2EFFF
Aa7.61:1 Very good#95BFFF on #1B2A47
Aa7.61:1 Very good#1B2A47 on #95BFFF
Aa6.42:1 Good#E2EFFF on #37548C
Aa6.42:1 Good#37548C on #E2EFFF
Aa3.98:1 Poor#95BFFF on #37548C
Aa3.98:1 Poor#37548C on #95BFFF

Color blindness preview

CSS variables

/* Cotton Boll to Glimpse of Void — https://swatchly.xyz/palette/e2efff-95bfff-58789f-1b2a47-37548c */
:root {
  --cotton-boll: #e2efff;
  --pastel-blue: #95bfff;
  --montreux-blue: #58789f;
  --eternal-darkness: #1b2a47;
  --glimpse-of-void: #37548c;
}

Tailwind CSS v4

/* Cotton Boll to Glimpse of Void — https://swatchly.xyz/palette/e2efff-95bfff-58789f-1b2a47-37548c */
@theme {
  --color-cotton-boll: #e2efff;
  --color-cotton-boll-50: #f2f8ff;
  --color-cotton-boll-100: #e2efff;
  --color-cotton-boll-200: #d1dae6;
  --color-cotton-boll-300: #b9c4d1;
  --color-cotton-boll-400: #98a4b2;
  --color-cotton-boll-500: #7c8896;
  --color-cotton-boll-600: #626d7b;
  --color-cotton-boll-700: #4c5663;
  --color-cotton-boll-800: #3a434e;
  --color-cotton-boll-900: #2c343d;
  --color-cotton-boll-950: #1a2026;
  --color-pastel-blue: #95bfff;
  --color-pastel-blue-50: #ecf4ff;
  --color-pastel-blue-100: #dceaff;
  --color-pastel-blue-200: #bbd6ff;
  --color-pastel-blue-300: #95bfff;
  --color-pastel-blue-400: #79a0dc;
  --color-pastel-blue-500: #5d85c1;
  --color-pastel-blue-600: #456aa3;
  --color-pastel-blue-700: #325488;
  --color-pastel-blue-800: #24416f;
  --color-pastel-blue-900: #193259;
  --color-pastel-blue-950: #0d1f3a;
  --color-montreux-blue: #58789f;
  --color-montreux-blue-50: #eff6ff;
  --color-montreux-blue-100: #e1efff;
  --color-montreux-blue-200: #c4defd;
  --color-montreux-blue-300: #acc9ed;
  --color-montreux-blue-400: #8cabd2;
  --color-montreux-blue-500: #7191b9;
  --color-montreux-blue-600: #58789f;
  --color-montreux-blue-700: #425f83;
  --color-montreux-blue-800: #304a69;
  --color-montreux-blue-900: #223853;
  --color-montreux-blue-950: #132336;
  --color-eternal-darkness: #1b2a47;
  --color-eternal-darkness-50: #f0f5ff;
  --color-eternal-darkness-100: #e1ecff;
  --color-eternal-darkness-200: #c9d8f4;
  --color-eternal-darkness-300: #b0c2e1;
  --color-eternal-darkness-400: #8ea0c3;
  --color-eternal-darkness-500: #7183a6;
  --color-eternal-darkness-600: #566788;
  --color-eternal-darkness-700: #404f6c;
  --color-eternal-darkness-800: #2e3b53;
  --color-eternal-darkness-900: #1b2a47;
  --color-eternal-darkness-950: #121926;
  --color-glimpse-of-void: #37548c;
  --color-glimpse-of-void-50: #f0f5ff;
  --color-glimpse-of-void-100: #e1ecff;
  --color-glimpse-of-void-200: #c3d8ff;
  --color-glimpse-of-void-300: #a4c2f8;
  --color-glimpse-of-void-400: #82a2dd;
  --color-glimpse-of-void-500: #6686c2;
  --color-glimpse-of-void-600: #4d6ba4;
  --color-glimpse-of-void-700: #37548c;
  --color-glimpse-of-void-800: #2a416f;
  --color-glimpse-of-void-900: #1e3258;
  --color-glimpse-of-void-950: #101e3a;
}