Nightmare to Opera Color Palette

About this palette

Nightmare to Opera is a 5-color muted, warm, vintage palette: #0B2217 (Nightmare), #D7ABBF (Roseate Spoonbill), #5C3242 (Chocolate Truffle), #CEF4E8 (Minty Fresh), #88677B (Opera). It mixes green, pink, red, turquoise tones and feels warm overall. The strongest text pairing is #0B2217 on #CEF4E8 with a contrast ratio of 14.12:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(11, 34, 23)	hsl(151, 51%, 9%)
Roseate Spoonbill	rgb(215, 171, 191)	hsl(333, 35%, 76%)
Chocolate Truffle	rgb(92, 50, 66)	hsl(337, 30%, 28%)
Minty Fresh	rgb(206, 244, 232)	hsl(161, 63%, 88%)
Opera	rgb(136, 103, 123)	hsl(324, 14%, 47%)

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.

Aa14.12:1 Super#0B2217 on #CEF4E8
Aa14.12:1 Super#CEF4E8 on #0B2217
Aa8.91:1 Very good#5C3242 on #CEF4E8
Aa8.91:1 Very good#CEF4E8 on #5C3242
Aa8.34:1 Very good#0B2217 on #D7ABBF
Aa8.34:1 Very good#D7ABBF on #0B2217
Aa5.26:1 Good#D7ABBF on #5C3242
Aa5.26:1 Good#5C3242 on #D7ABBF

Color blindness preview

CSS variables

/* Nightmare to Opera — https://swatchly.xyz/palette/0b2217-d7abbf-5c3242-cef4e8-88677b */
:root {
  --nightmare: #0b2217;
  --roseate-spoonbill: #d7abbf;
  --chocolate-truffle: #5c3242;
  --minty-fresh: #cef4e8;
  --opera: #88677b;
}

Tailwind CSS v4

/* Nightmare to Opera — https://swatchly.xyz/palette/0b2217-d7abbf-5c3242-cef4e8-88677b */
@theme {
  --color-nightmare: #0b2217;
  --color-nightmare-50: #eafaf1;
  --color-nightmare-100: #dff0e6;
  --color-nightmare-200: #c9ddd2;
  --color-nightmare-300: #b0c8ba;
  --color-nightmare-400: #8fa99a;
  --color-nightmare-500: #738d7e;
  --color-nightmare-600: #597164;
  --color-nightmare-700: #445a4e;
  --color-nightmare-800: #32463b;
  --color-nightmare-900: #25352c;
  --color-nightmare-950: #0b2217;
  --color-roseate-spoonbill: #d7abbf;
  --color-roseate-spoonbill-50: #ffebf4;
  --color-roseate-spoonbill-100: #fbdcea;
  --color-roseate-spoonbill-200: #e9c6d6;
  --color-roseate-spoonbill-300: #d7abbf;
  --color-roseate-spoonbill-400: #b78ea1;
  --color-roseate-spoonbill-500: #9d7487;
  --color-roseate-spoonbill-600: #825b6d;
  --color-roseate-spoonbill-700: #6a4757;
  --color-roseate-spoonbill-800: #553745;
  --color-roseate-spoonbill-900: #432a36;
  --color-roseate-spoonbill-950: #2b1922;
  --color-chocolate-truffle: #5c3242;
  --color-chocolate-truffle-50: #fff1f5;
  --color-chocolate-truffle-100: #ffe2ec;
  --color-chocolate-truffle-200: #f3cbd8;
  --color-chocolate-truffle-300: #dfb3c1;
  --color-chocolate-truffle-400: #c191a2;
  --color-chocolate-truffle-500: #a67686;
  --color-chocolate-truffle-600: #895c6c;
  --color-chocolate-truffle-700: #6f4655;
  --color-chocolate-truffle-800: #5c3242;
  --color-chocolate-truffle-900: #452732;
  --color-chocolate-truffle-950: #2c171f;
  --color-minty-fresh: #cef4e8;
  --color-minty-fresh-50: #e5faf3;
  --color-minty-fresh-100: #cef4e8;
  --color-minty-fresh-200: #c2ded5;
  --color-minty-fresh-300: #a9c8be;
  --color-minty-fresh-400: #87aa9f;
  --color-minty-fresh-500: #6b8f84;
  --color-minty-fresh-600: #52746a;
  --color-minty-fresh-700: #3e5d54;
  --color-minty-fresh-800: #2e4941;
  --color-minty-fresh-900: #213832;
  --color-minty-fresh-950: #12231e;
  --color-opera: #88677b;
  --color-opera-50: #fff0f9;
  --color-opera-100: #fce5f2;
  --color-opera-200: #ecd1e1;
  --color-opera-300: #d9bacc;
  --color-opera-400: #bd9baf;
  --color-opera-500: #a28095;
  --color-opera-600: #88677b;
  --color-opera-700: #6e5062;
  --color-opera-800: #573d4d;
  --color-opera-900: #442e3b;
  --color-opera-950: #2b1b25;
}