Sea of Stars to Cotton Boll Color Palette

About this palette

Sea of Stars to Cotton Boll is a 4-color cool palette: #21334E (Sea of Stars), #8792CD (Easter Egg), #704295 (Perkin Mauve), #E7EFFF (Cotton Boll). It mixes blue, purple, white tones and feels cool overall. The strongest text pairing is #21334E on #E7EFFF with a contrast ratio of 11.04:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea of Stars	rgb(33, 51, 78)	hsl(216, 41%, 22%)
Easter Egg	rgb(135, 146, 205)	hsl(231, 41%, 67%)
Perkin Mauve	rgb(112, 66, 149)	hsl(273, 39%, 42%)
Cotton Boll	rgb(231, 239, 255)	hsl(220, 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.

Aa11.04:1 Very good#21334E on #E7EFFF
Aa11.04:1 Very good#E7EFFF on #21334E
Aa6.27:1 Good#704295 on #E7EFFF
Aa6.27:1 Good#E7EFFF on #704295
Aa4.26:1 Poor#21334E on #8792CD
Aa4.26:1 Poor#8792CD on #21334E

Color blindness preview

CSS variables

/* Sea of Stars to Cotton Boll — https://swatchly.xyz/palette/21334e-8792cd-704295-e7efff */
:root {
  --sea-of-stars: #21334e;
  --easter-egg: #8792cd;
  --perkin-mauve: #704295;
  --cotton-boll: #e7efff;
}

Tailwind CSS v4

/* Sea of Stars to Cotton Boll — https://swatchly.xyz/palette/21334e-8792cd-704295-e7efff */
@theme {
  --color-sea-of-stars: #21334e;
  --color-sea-of-stars-50: #eff6ff;
  --color-sea-of-stars-100: #e0ecff;
  --color-sea-of-stars-200: #c8d9f2;
  --color-sea-of-stars-300: #afc2df;
  --color-sea-of-stars-400: #8ea3c2;
  --color-sea-of-stars-500: #7287a7;
  --color-sea-of-stars-600: #596d8b;
  --color-sea-of-stars-700: #445671;
  --color-sea-of-stars-800: #33435a;
  --color-sea-of-stars-900: #21334e;
  --color-sea-of-stars-950: #161f2e;
  --color-easter-egg: #8792cd;
  --color-easter-egg-50: #edf0ff;
  --color-easter-egg-100: #dee4ff;
  --color-easter-egg-200: #c2cdfe;
  --color-easter-egg-300: #a9b4ea;
  --color-easter-egg-400: #8792cd;
  --color-easter-egg-500: #6e79b2;
  --color-easter-egg-600: #576096;
  --color-easter-egg-700: #444c7c;
  --color-easter-egg-800: #353b65;
  --color-easter-egg-900: #282e52;
  --color-easter-egg-950: #191d37;
  --color-perkin-mauve: #704295;
  --color-perkin-mauve-50: #f8f2ff;
  --color-perkin-mauve-100: #f2e5ff;
  --color-perkin-mauve-200: #e6ccff;
  --color-perkin-mauve-300: #d7affd;
  --color-perkin-mauve-400: #bb8ee3;
  --color-perkin-mauve-500: #a172c9;
  --color-perkin-mauve-600: #8659ad;
  --color-perkin-mauve-700: #704295;
  --color-perkin-mauve-800: #583277;
  --color-perkin-mauve-900: #45245f;
  --color-perkin-mauve-950: #2c143f;
  --color-cotton-boll: #e7efff;
  --color-cotton-boll-50: #f5f8ff;
  --color-cotton-boll-100: #e7efff;
  --color-cotton-boll-200: #d5dbe6;
  --color-cotton-boll-300: #bdc3d0;
  --color-cotton-boll-400: #9ca3b2;
  --color-cotton-boll-500: #808796;
  --color-cotton-boll-600: #666c7a;
  --color-cotton-boll-700: #4f5562;
  --color-cotton-boll-800: #3d424d;
  --color-cotton-boll-900: #2e333c;
  --color-cotton-boll-950: #1c1f26;
}