Cotton Boll to Mythical Night color palette

E9EFFFCotton Boll A7B5FFWondrous Wisteria 727BB4Orbital 415496Twilight 223064Mythical Night

About this palette

Cotton Boll to Mythical Night is a 5-color cool, monochromatic, gradient palette: #E9EFFF (Cotton Boll), #A7B5FF (Wondrous Wisteria), #727BB4 (Orbital), #415496 (Twilight), #223064 (Mythical Night). It mixes white, purple, blue tones and feels cool overall. The strongest text pairing is #E9EFFF on #223064 with a contrast ratio of 10.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(233, 239, 255)	hsl(224, 100%, 96%)
Wondrous Wisteria	rgb(167, 181, 255)	hsl(230, 100%, 83%)
Orbital	rgb(114, 123, 180)	hsl(232, 31%, 58%)
Twilight	rgb(65, 84, 150)	hsl(227, 40%, 42%)
Mythical Night	rgb(34, 48, 100)	hsl(227, 49%, 26%)

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.

Aa10.90:1 Very good#E9EFFF on #223064
Aa10.90:1 Very good#223064 on #E9EFFF
Aa6.39:1 Good#A7B5FF on #223064
Aa6.39:1 Good#223064 on #A7B5FF
Aa6.22:1 Good#E9EFFF on #415496
Aa6.22:1 Good#415496 on #E9EFFF
Aa3.65:1 Poor#A7B5FF on #415496
Aa3.65:1 Poor#415496 on #A7B5FF

Color blindness preview

CSS variables

/* Cotton Boll to Mythical Night — https://swatchly.xyz/palette/e9efff-a7b5ff-727bb4-415496-223064 */
:root {
  --cotton-boll: #e9efff;
  --wondrous-wisteria: #a7b5ff;
  --orbital: #727bb4;
  --twilight: #415496;
  --mythical-night: #223064;
}

Tailwind CSS v4

/* Cotton Boll to Mythical Night — https://swatchly.xyz/palette/e9efff-a7b5ff-727bb4-415496-223064 */
@theme {
  --color-cotton-boll: #e9efff;
  --color-cotton-boll-50: #f6f8ff;
  --color-cotton-boll-100: #e9efff;
  --color-cotton-boll-200: #d6dbe6;
  --color-cotton-boll-300: #bec3d0;
  --color-cotton-boll-400: #9ea3b1;
  --color-cotton-boll-500: #828795;
  --color-cotton-boll-600: #676c7a;
  --color-cotton-boll-700: #505561;
  --color-cotton-boll-800: #3e424d;
  --color-cotton-boll-900: #2f333c;
  --color-cotton-boll-950: #1d1f26;
  --color-wondrous-wisteria: #a7b5ff;
  --color-wondrous-wisteria-50: #eef1ff;
  --color-wondrous-wisteria-100: #e0e5ff;
  --color-wondrous-wisteria-200: #c5cfff;
  --color-wondrous-wisteria-300: #a7b5ff;
  --color-wondrous-wisteria-400: #8a97dc;
  --color-wondrous-wisteria-500: #707cc2;
  --color-wondrous-wisteria-600: #5863a4;
  --color-wondrous-wisteria-700: #454d89;
  --color-wondrous-wisteria-800: #353c70;
  --color-wondrous-wisteria-900: #282e5a;
  --color-wondrous-wisteria-950: #181c3c;
  --color-orbital: #727bb4;
  --color-orbital-50: #f1f3ff;
  --color-orbital-100: #e3e7ff;
  --color-orbital-200: #c8d1ff;
  --color-orbital-300: #afb9ee;
  --color-orbital-400: #8e98d1;
  --color-orbital-500: #727bb4;
  --color-orbital-600: #5a6297;
  --color-orbital-700: #464d7d;
  --color-orbital-800: #363b65;
  --color-orbital-900: #292d51;
  --color-orbital-950: #191c35;
  --color-twilight: #415496;
  --color-twilight-50: #f1f5ff;
  --color-twilight-100: #e3ebff;
  --color-twilight-200: #c9d7ff;
  --color-twilight-300: #abc0ff;
  --color-twilight-400: #8aa0e6;
  --color-twilight-500: #6f85cb;
  --color-twilight-600: #566bae;
  --color-twilight-700: #415496;
  --color-twilight-800: #324177;
  --color-twilight-900: #24315f;
  --color-twilight-950: #151e3f;
  --color-mythical-night: #223064;
  --color-mythical-night-50: #f1f5ff;
  --color-mythical-night-100: #e3ebff;
  --color-mythical-night-200: #c8d7ff;
  --color-mythical-night-300: #acbff5;
  --color-mythical-night-400: #8ba0da;
  --color-mythical-night-500: #7084c0;
  --color-mythical-night-600: #576aa2;
  --color-mythical-night-700: #435487;
  --color-mythical-night-800: #33416e;
  --color-mythical-night-900: #223064;
  --color-mythical-night-950: #161f3b;
}