Call It a Night to Vive le Vent color palette

46384ECall It a Night 1A1C23Satin Deep Black 8A9BB2Moon Veil 6F7184Mamba B0CFEBVive le Vent

About this palette

Call It a Night to Vive le Vent is a 5-color muted, cool palette: #46384E (Call It a Night), #1A1C23 (Satin Deep Black), #8A9BB2 (Moon Veil), #6F7184 (Mamba), #B0CFEB (Vive le Vent). It mixes purple, gray, blue tones and feels cool overall. The strongest text pairing is #1A1C23 on #B0CFEB with a contrast ratio of 10.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Call It a Night	rgb(70, 56, 78)	hsl(278, 16%, 26%)
Satin Deep Black	rgb(26, 28, 35)	hsl(227, 15%, 12%)
Moon Veil	rgb(138, 155, 178)	hsl(214, 21%, 62%)
Mamba	rgb(111, 113, 132)	hsl(234, 9%, 48%)
Vive le Vent	rgb(176, 207, 235)	hsl(208, 60%, 81%)

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.51:1 Very good#1A1C23 on #B0CFEB
Aa10.51:1 Very good#B0CFEB on #1A1C23
Aa6.70:1 Good#46384E on #B0CFEB
Aa6.70:1 Good#B0CFEB on #46384E
Aa6.01:1 Good#1A1C23 on #8A9BB2
Aa6.01:1 Good#8A9BB2 on #1A1C23
Aa3.83:1 Poor#46384E on #8A9BB2
Aa3.83:1 Poor#8A9BB2 on #46384E

Color blindness preview

CSS variables

/* Call It a Night to Vive le Vent — https://swatchly.xyz/palette/46384e-1a1c23-8a9bb2-6f7184-b0cfeb */
:root {
  --call-it-a-night: #46384e;
  --satin-deep-black: #1a1c23;
  --moon-veil: #8a9bb2;
  --mamba: #6f7184;
  --vive-le-vent: #b0cfeb;
}

Tailwind CSS v4

/* Call It a Night to Vive le Vent — https://swatchly.xyz/palette/46384e-1a1c23-8a9bb2-6f7184-b0cfeb */
@theme {
  --color-call-it-a-night: #46384e;
  --color-call-it-a-night-50: #faf1ff;
  --color-call-it-a-night-100: #f1e7f8;
  --color-call-it-a-night-200: #dfd2e6;
  --color-call-it-a-night-300: #c8bad1;
  --color-call-it-a-night-400: #a999b2;
  --color-call-it-a-night-500: #8d7d96;
  --color-call-it-a-night-600: #71627a;
  --color-call-it-a-night-700: #594c61;
  --color-call-it-a-night-800: #46384e;
  --color-call-it-a-night-900: #352b3a;
  --color-call-it-a-night-950: #211a25;
  --color-satin-deep-black: #1a1c23;
  --color-satin-deep-black-50: #f3f5fa;
  --color-satin-deep-black-100: #e9ebf1;
  --color-satin-deep-black-200: #d5d7de;
  --color-satin-deep-black-300: #bec1c9;
  --color-satin-deep-black-400: #9ea1aa;
  --color-satin-deep-black-500: #82858e;
  --color-satin-deep-black-600: #686a73;
  --color-satin-deep-black-700: #51535b;
  --color-satin-deep-black-800: #3e4046;
  --color-satin-deep-black-900: #2e3035;
  --color-satin-deep-black-950: #1a1c23;
  --color-moon-veil: #8a9bb2;
  --color-moon-veil-50: #eaf3ff;
  --color-moon-veil-100: #dce8f8;
  --color-moon-veil-200: #c5d3e6;
  --color-moon-veil-300: #acbbd1;
  --color-moon-veil-400: #8a9bb2;
  --color-moon-veil-500: #718197;
  --color-moon-veil-600: #59687d;
  --color-moon-veil-700: #455366;
  --color-moon-veil-800: #354151;
  --color-moon-veil-900: #283240;
  --color-moon-veil-950: #18202a;
  --color-mamba: #6f7184;
  --color-mamba-50: #f3f4ff;
  --color-mamba-100: #eaebf9;
  --color-mamba-200: #d7d9e8;
  --color-mamba-300: #c1c3d5;
  --color-mamba-400: #a3a5b8;
  --color-mamba-500: #888a9e;
  --color-mamba-600: #6f7184;
  --color-mamba-700: #57596a;
  --color-mamba-800: #444554;
  --color-mamba-900: #333541;
  --color-mamba-950: #1f2029;
  --color-vive-le-vent: #b0cfeb;
  --color-vive-le-vent-50: #f6fbff;
  --color-vive-le-vent-100: #e8f4ff;
  --color-vive-le-vent-200: #cde3f7;
  --color-vive-le-vent-300: #b0cfeb;
  --color-vive-le-vent-400: #91adc7;
  --color-vive-le-vent-500: #7390aa;
  --color-vive-le-vent-600: #58748d;
  --color-vive-le-vent-700: #415b72;
  --color-vive-le-vent-800: #30465a;
  --color-vive-le-vent-900: #223545;
  --color-vive-le-vent-950: #13212c;
}