Azulado to Ghost White Color Palette

About this palette

Azulado to Ghost White is a 5-color cool, monochromatic, gradient palette: #1E1B44 (Azulado), #46428E (Blueberry), #7870B6 (Venus Violet), #BAB7EF (Purple Illusion), #F8F8FF (Ghost White). It mixes purple, white tones and feels cool overall. The strongest text pairing is #1E1B44 on #F8F8FF with a contrast ratio of 15.33:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Azulado	rgb(30, 27, 68)	hsl(244, 43%, 19%)
Blueberry	rgb(70, 66, 142)	hsl(243, 37%, 41%)
Venus Violet	rgb(120, 112, 182)	hsl(247, 32%, 58%)
Purple Illusion	rgb(186, 183, 239)	hsl(243, 64%, 83%)
Ghost White	rgb(248, 248, 255)	hsl(240, 100%, 99%)

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.

Aa15.33:1 Super#1E1B44 on #F8F8FF
Aa15.33:1 Super#F8F8FF on #1E1B44
Aa8.57:1 Very good#1E1B44 on #BAB7EF
Aa8.57:1 Very good#BAB7EF on #1E1B44
Aa8.17:1 Very good#46428E on #F8F8FF
Aa8.17:1 Very good#F8F8FF on #46428E
Aa4.57:1 Good#46428E on #BAB7EF
Aa4.57:1 Good#BAB7EF on #46428E

Color blindness preview

CSS variables

/* Azulado to Ghost White — https://swatchly.xyz/palette/1e1b44-46428e-7870b6-bab7ef-f8f8ff */
:root {
  --azulado: #1e1b44;
  --blueberry: #46428e;
  --venus-violet: #7870b6;
  --purple-illusion: #bab7ef;
  --ghost-white: #f8f8ff;
}

Tailwind CSS v4

/* Azulado to Ghost White — https://swatchly.xyz/palette/1e1b44-46428e-7870b6-bab7ef-f8f8ff */
@theme {
  --color-azulado: #1e1b44;
  --color-azulado-50: #f3f4ff;
  --color-azulado-100: #e8e9ff;
  --color-azulado-200: #d2d4fc;
  --color-azulado-300: #babcea;
  --color-azulado-400: #9b9cce;
  --color-azulado-500: #8081b3;
  --color-azulado-600: #676797;
  --color-azulado-700: #51527d;
  --color-azulado-800: #404065;
  --color-azulado-900: #313151;
  --color-azulado-950: #1e1b44;
  --color-blueberry: #46428e;
  --color-blueberry-50: #f3f4ff;
  --color-blueberry-100: #e8e9ff;
  --color-blueberry-200: #cfd2ff;
  --color-blueberry-300: #b4b6ff;
  --color-blueberry-400: #9294e5;
  --color-blueberry-500: #7776c8;
  --color-blueberry-600: #5c5ba7;
  --color-blueberry-700: #46428e;
  --color-blueberry-800: #36346e;
  --color-blueberry-900: #292758;
  --color-blueberry-950: #18173a;
  --color-venus-violet: #7870b6;
  --color-venus-violet-50: #f2f1ff;
  --color-venus-violet-100: #e5e4ff;
  --color-venus-violet-200: #cecbff;
  --color-venus-violet-300: #b5b0f2;
  --color-venus-violet-400: #948dd4;
  --color-venus-violet-500: #7870b6;
  --color-venus-violet-600: #605899;
  --color-venus-violet-700: #4c447f;
  --color-venus-violet-800: #3c3567;
  --color-venus-violet-900: #2e2853;
  --color-venus-violet-950: #1d1838;
  --color-purple-illusion: #bab7ef;
  --color-purple-illusion-50: #f2f2ff;
  --color-purple-illusion-100: #e7e6ff;
  --color-purple-illusion-200: #d2d0fb;
  --color-purple-illusion-300: #bab7ef;
  --color-purple-illusion-400: #9b98cd;
  --color-purple-illusion-500: #817db2;
  --color-purple-illusion-600: #676495;
  --color-purple-illusion-700: #524e7b;
  --color-purple-illusion-800: #403c63;
  --color-purple-illusion-900: #312e4f;
  --color-purple-illusion-950: #1e1c33;
  --color-ghost-white: #f8f8ff;
  --color-ghost-white-50: #f8f8ff;
  --color-ghost-white-100: #eeeef2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c2c2c8;
  --color-ghost-white-400: #a2a2a8;
  --color-ghost-white-500: #86868c;
  --color-ghost-white-600: #6b6b71;
  --color-ghost-white-700: #55555a;
  --color-ghost-white-800: #424246;
  --color-ghost-white-900: #323236;
  --color-ghost-white-950: #1f1f22;
}