Cloudless to Twinkle Night Color Palette

About this palette

Cloudless to Twinkle Night is a 5-color cool palette: #E2E6FF (Cloudless), #3B4264 (Genie), #A4ADEF (Wondrous Wisteria), #1F1E32 (Eclipse Elixir), #7070AD (Twinkle Night). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #E2E6FF on #1F1E32 with a contrast ratio of 13.18:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(226, 230, 255)	hsl(232, 100%, 94%)
Genie	rgb(59, 66, 100)	hsl(230, 26%, 31%)
Wondrous Wisteria	rgb(164, 173, 239)	hsl(233, 70%, 79%)
Eclipse Elixir	rgb(31, 30, 50)	hsl(243, 25%, 16%)
Twinkle Night	rgb(112, 112, 173)	hsl(240, 27%, 56%)

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.18:1 Super#E2E6FF on #1F1E32
Aa13.18:1 Super#1F1E32 on #E2E6FF
Aa7.91:1 Very good#E2E6FF on #3B4264
Aa7.91:1 Very good#3B4264 on #E2E6FF
Aa7.60:1 Very good#A4ADEF on #1F1E32
Aa7.60:1 Very good#1F1E32 on #A4ADEF
Aa4.56:1 Good#3B4264 on #A4ADEF
Aa4.56:1 Good#A4ADEF on #3B4264

Color blindness preview

CSS variables

/* Cloudless to Twinkle Night — https://swatchly.xyz/palette/e2e6ff-3b4264-a4adef-1f1e32-7070ad */
:root {
  --cloudless: #e2e6ff;
  --genie: #3b4264;
  --wondrous-wisteria: #a4adef;
  --eclipse-elixir: #1f1e32;
  --twinkle-night: #7070ad;
}

Tailwind CSS v4

/* Cloudless to Twinkle Night — https://swatchly.xyz/palette/e2e6ff-3b4264-a4adef-1f1e32-7070ad */
@theme {
  --color-cloudless: #e2e6ff;
  --color-cloudless-50: #eff1ff;
  --color-cloudless-100: #e2e6ff;
  --color-cloudless-200: #d0d3e6;
  --color-cloudless-300: #babdd2;
  --color-cloudless-400: #9b9eb5;
  --color-cloudless-500: #80839a;
  --color-cloudless-600: #676a7f;
  --color-cloudless-700: #515467;
  --color-cloudless-800: #3f4152;
  --color-cloudless-900: #303240;
  --color-cloudless-950: #1d1e29;
  --color-genie: #3b4264;
  --color-genie-50: #f2f5ff;
  --color-genie-100: #e5eaff;
  --color-genie-200: #ced6f5;
  --color-genie-300: #b7c0e2;
  --color-genie-400: #97a0c6;
  --color-genie-500: #7c85ab;
  --color-genie-600: #636b8f;
  --color-genie-700: #4e5576;
  --color-genie-800: #3b4264;
  --color-genie-900: #2e334b;
  --color-genie-950: #1c1f31;
  --color-wondrous-wisteria: #a4adef;
  --color-wondrous-wisteria-50: #e9ecff;
  --color-wondrous-wisteria-100: #dadfff;
  --color-wondrous-wisteria-200: #bfc7fe;
  --color-wondrous-wisteria-300: #a4adef;
  --color-wondrous-wisteria-400: #8890cf;
  --color-wondrous-wisteria-500: #7077b5;
  --color-wondrous-wisteria-600: #595f9a;
  --color-wondrous-wisteria-700: #464b80;
  --color-wondrous-wisteria-800: #373b69;
  --color-wondrous-wisteria-900: #2b2e56;
  --color-wondrous-wisteria-950: #1a1c38;
  --color-eclipse-elixir: #1f1e32;
  --color-eclipse-elixir-50: #f4f4ff;
  --color-eclipse-elixir-100: #e9e9fb;
  --color-eclipse-elixir-200: #d5d5ea;
  --color-eclipse-elixir-300: #bebed5;
  --color-eclipse-elixir-400: #9f9fb8;
  --color-eclipse-elixir-500: #84849d;
  --color-eclipse-elixir-600: #6a6a81;
  --color-eclipse-elixir-700: #545469;
  --color-eclipse-elixir-800: #424154;
  --color-eclipse-elixir-900: #333242;
  --color-eclipse-elixir-950: #1f1e32;
  --color-twinkle-night: #7070ad;
  --color-twinkle-night-50: #f3f4ff;
  --color-twinkle-night-100: #eaecff;
  --color-twinkle-night-200: #d6d8ff;
  --color-twinkle-night-300: #c0c2f9;
  --color-twinkle-night-400: #a2a3e0;
  --color-twinkle-night-500: #8889c7;
  --color-twinkle-night-600: #7070ad;
  --color-twinkle-night-700: #58578f;
  --color-twinkle-night-800: #444374;
  --color-twinkle-night-900: #33325c;
  --color-twinkle-night-950: #1f1e3c;
}