God of Rain to Foundation White color palette

5165C6God of Rain 6ABDE9Malibu 254176Napoleonic Blue 0094C1Swimmer ECEBFFFoundation White

About this palette

God of Rain to Foundation White is a 5-color cool palette: #5165C6 (God of Rain), #6ABDE9 (Malibu), #254176 (Napoleonic Blue), #0094C1 (Swimmer), #ECEBFF (Foundation White). It mixes blue, white tones and feels cool overall. The strongest text pairing is #254176 on #ECEBFF with a contrast ratio of 8.54:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
God of Rain	rgb(81, 101, 198)	hsl(230, 51%, 55%)
Malibu	rgb(106, 189, 233)	hsl(201, 74%, 66%)
Napoleonic Blue	rgb(37, 65, 118)	hsl(219, 52%, 30%)
Swimmer	rgb(0, 148, 193)	hsl(194, 100%, 38%)
Foundation White	rgb(236, 235, 255)	hsl(243, 100%, 96%)

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.

Aa8.54:1 Very good#254176 on #ECEBFF
Aa8.54:1 Very good#ECEBFF on #254176
Aa4.80:1 Good#6ABDE9 on #254176
Aa4.80:1 Good#254176 on #6ABDE9
Aa4.44:1 Poor#5165C6 on #ECEBFF
Aa4.44:1 Poor#ECEBFF on #5165C6

Color blindness preview

CSS variables

/* God of Rain to Foundation White — https://swatchly.xyz/palette/5165c6-6abde9-254176-0094c1-ecebff */
:root {
  --god-of-rain: #5165c6;
  --malibu: #6abde9;
  --napoleonic-blue: #254176;
  --swimmer: #0094c1;
  --foundation-white: #ecebff;
}

Tailwind CSS v4

/* God of Rain to Foundation White — https://swatchly.xyz/palette/5165c6-6abde9-254176-0094c1-ecebff */
@theme {
  --color-god-of-rain: #5165c6;
  --color-god-of-rain-50: #f2f5ff;
  --color-god-of-rain-100: #e5ebff;
  --color-god-of-rain-200: #cbd7ff;
  --color-god-of-rain-300: #adc0ff;
  --color-god-of-rain-400: #849cfe;
  --color-god-of-rain-500: #6980e4;
  --color-god-of-rain-600: #5165c6;
  --color-god-of-rain-700: #3d4ea6;
  --color-god-of-rain-800: #2e3b88;
  --color-god-of-rain-900: #212c6d;
  --color-god-of-rain-950: #131a49;
  --color-malibu: #6abde9;
  --color-malibu-50: #daf1ff;
  --color-malibu-100: #bfe8ff;
  --color-malibu-200: #93d4f9;
  --color-malibu-300: #6abde9;
  --color-malibu-400: #4ea0ca;
  --color-malibu-500: #3086b0;
  --color-malibu-600: #126e95;
  --color-malibu-700: #00587a;
  --color-malibu-800: #004663;
  --color-malibu-900: #00384f;
  --color-malibu-950: #002333;
  --color-napoleonic-blue: #254176;
  --color-napoleonic-blue-50: #f0f5ff;
  --color-napoleonic-blue-100: #e1ecff;
  --color-napoleonic-blue-200: #c3d8ff;
  --color-napoleonic-blue-300: #a4c2f7;
  --color-napoleonic-blue-400: #82a2dc;
  --color-napoleonic-blue-500: #6686c1;
  --color-napoleonic-blue-600: #4d6ca3;
  --color-napoleonic-blue-700: #3a5588;
  --color-napoleonic-blue-800: #254176;
  --color-napoleonic-blue-900: #1e3258;
  --color-napoleonic-blue-950: #101f3a;
  --color-swimmer: #0094c1;
  --color-swimmer-50: #eaf8ff;
  --color-swimmer-100: #d4f1ff;
  --color-swimmer-200: #a5e2ff;
  --color-swimmer-300: #73cff7;
  --color-swimmer-400: #41b0dc;
  --color-swimmer-500: #0094c1;
  --color-swimmer-600: #00779c;
  --color-swimmer-700: #005e7d;
  --color-swimmer-800: #004a62;
  --color-swimmer-900: #00394c;
  --color-swimmer-950: #002331;
  --color-foundation-white: #ecebff;
  --color-foundation-white-50: #f6f6ff;
  --color-foundation-white-100: #ecebff;
  --color-foundation-white-200: #d8d8e6;
  --color-foundation-white-300: #c1c0d1;
  --color-foundation-white-400: #a1a0b2;
  --color-foundation-white-500: #868597;
  --color-foundation-white-600: #6b6a7b;
  --color-foundation-white-700: #545363;
  --color-foundation-white-800: #41414e;
  --color-foundation-white-900: #32313d;
  --color-foundation-white-950: #1f1e26;
}