Nightmare to Champagne Color Palette

About this palette

Nightmare to Champagne is a 5-color muted, vintage palette: #181F0E (Nightmare), #30355D (Midnight Escapade), #816046 (Man Cave), #9B9FDA (Azureno), #EBD1AF (Champagne). It mixes gray, purple, brown, orange tones and feels balanced overall. The strongest text pairing is #181F0E on #EBD1AF with a contrast ratio of 11.50:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(24, 31, 14)	hsl(85, 38%, 9%)
Midnight Escapade	rgb(48, 53, 93)	hsl(233, 32%, 28%)
Man Cave	rgb(129, 96, 70)	hsl(26, 30%, 39%)
Azureno	rgb(155, 159, 218)	hsl(236, 46%, 73%)
Champagne	rgb(235, 209, 175)	hsl(34, 60%, 80%)

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.

Aa11.50:1 Very good#181F0E on #EBD1AF
Aa11.50:1 Very good#EBD1AF on #181F0E
Aa7.96:1 Very good#30355D on #EBD1AF
Aa7.96:1 Very good#EBD1AF on #30355D
Aa6.74:1 Good#181F0E on #9B9FDA
Aa6.74:1 Good#9B9FDA on #181F0E
Aa4.67:1 Good#30355D on #9B9FDA
Aa4.67:1 Good#9B9FDA on #30355D

Color blindness preview

CSS variables

/* Nightmare to Champagne — https://swatchly.xyz/palette/181f0e-30355d-816046-9b9fda-ebd1af */
:root {
  --nightmare: #181f0e;
  --midnight-escapade: #30355d;
  --man-cave: #816046;
  --azureno: #9b9fda;
  --champagne: #ebd1af;
}

Tailwind CSS v4

/* Nightmare to Champagne — https://swatchly.xyz/palette/181f0e-30355d-816046-9b9fda-ebd1af */
@theme {
  --color-nightmare: #181f0e;
  --color-nightmare-50: #f2f8eb;
  --color-nightmare-100: #e7eee0;
  --color-nightmare-200: #d3dbca;
  --color-nightmare-300: #bcc5b2;
  --color-nightmare-400: #9ca591;
  --color-nightmare-500: #808975;
  --color-nightmare-600: #656e5b;
  --color-nightmare-700: #4f5745;
  --color-nightmare-800: #3c4334;
  --color-nightmare-900: #2d3226;
  --color-nightmare-950: #181f0e;
  --color-midnight-escapade: #30355d;
  --color-midnight-escapade-50: #f2f4ff;
  --color-midnight-escapade-100: #e6eaff;
  --color-midnight-escapade-200: #ced5fa;
  --color-midnight-escapade-300: #b6bee8;
  --color-midnight-escapade-400: #97a0cd;
  --color-midnight-escapade-500: #7d85b3;
  --color-midnight-escapade-600: #656c98;
  --color-midnight-escapade-700: #50567f;
  --color-midnight-escapade-800: #3f4569;
  --color-midnight-escapade-900: #30355d;
  --color-midnight-escapade-950: #1f2239;
  --color-man-cave: #816046;
  --color-man-cave-50: #fff3e9;
  --color-man-cave-100: #fde5d3;
  --color-man-cave-200: #ecd0ba;
  --color-man-cave-300: #d8b89f;
  --color-man-cave-400: #b9977c;
  --color-man-cave-500: #9d7b60;
  --color-man-cave-600: #816046;
  --color-man-cave-700: #684b34;
  --color-man-cave-800: #533a26;
  --color-man-cave-900: #412c1b;
  --color-man-cave-950: #2a1a0e;
  --color-azureno: #9b9fda;
  --color-azureno-50: #f4f6ff;
  --color-azureno-100: #e9ebff;
  --color-azureno-200: #d3d6ff;
  --color-azureno-300: #bbbff2;
  --color-azureno-400: #9b9fda;
  --color-azureno-500: #8083bc;
  --color-azureno-600: #65689e;
  --color-azureno-700: #4f5182;
  --color-azureno-800: #3d3e69;
  --color-azureno-900: #2e2f53;
  --color-azureno-950: #1b1c36;
  --color-champagne: #ebd1af;
  --color-champagne-50: #fff2e0;
  --color-champagne-100: #f7e7d1;
  --color-champagne-200: #ebd1af;
  --color-champagne-300: #d1bc9f;
  --color-champagne-400: #b49c7d;
  --color-champagne-500: #998161;
  --color-champagne-600: #7e6749;
  --color-champagne-700: #665135;
  --color-champagne-800: #513f26;
  --color-champagne-900: #3f301b;
  --color-champagne-950: #281d0e;
}