Opera to Great Void Color Palette

About this palette

Opera to Great Void is a 5-color muted, cool, vintage palette: #7E667C (Opera), #B994AD (Mauve Magic), #48919A (Blue Moon), #DEC59C (Fortune Cookie), #33585D (Great Void). It mixes pink, turquoise, yellow tones and feels cool overall. The strongest text pairing is #DEC59C on #33585D with a contrast ratio of 4.67:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opera	rgb(126, 102, 124)	hsl(305, 11%, 45%)
Mauve Magic	rgb(185, 148, 173)	hsl(319, 21%, 65%)
Blue Moon	rgb(72, 145, 154)	hsl(187, 36%, 44%)
Fortune Cookie	rgb(222, 197, 156)	hsl(37, 50%, 74%)
Great Void	rgb(51, 88, 93)	hsl(187, 29%, 28%)

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.

Aa4.67:1 Good#DEC59C on #33585D
Aa4.67:1 Good#33585D on #DEC59C
Aa3.08:1 Poor#7E667C on #DEC59C
Aa3.08:1 Poor#DEC59C on #7E667C

Color blindness preview

CSS variables

/* Opera to Great Void — https://swatchly.xyz/palette/7e667c-b994ad-48919a-dec59c-33585d */
:root {
  --opera: #7e667c;
  --mauve-magic: #b994ad;
  --blue-moon: #48919a;
  --fortune-cookie: #dec59c;
  --great-void: #33585d;
}

Tailwind CSS v4

/* Opera to Great Void — https://swatchly.xyz/palette/7e667c-b994ad-48919a-dec59c-33585d */
@theme {
  --color-opera: #7e667c;
  --color-opera-50: #fff0fd;
  --color-opera-100: #f7e6f5;
  --color-opera-200: #e5d1e4;
  --color-opera-300: #d1bacf;
  --color-opera-400: #b39bb1;
  --color-opera-500: #998096;
  --color-opera-600: #7e667c;
  --color-opera-700: #655063;
  --color-opera-800: #503d4e;
  --color-opera-900: #3e2e3d;
  --color-opera-950: #271c26;
  --color-mauve-magic: #b994ad;
  --color-mauve-magic-50: #fff0fa;
  --color-mauve-magic-100: #fbe3f3;
  --color-mauve-magic-200: #eacde1;
  --color-mauve-magic-300: #d6b5cb;
  --color-mauve-magic-400: #b994ad;
  --color-mauve-magic-500: #9d7991;
  --color-mauve-magic-600: #815f76;
  --color-mauve-magic-700: #684a5f;
  --color-mauve-magic-800: #53384b;
  --color-mauve-magic-900: #412a3a;
  --color-mauve-magic-950: #291924;
  --color-blue-moon: #48919a;
  --color-blue-moon-50: #defbff;
  --color-blue-moon-100: #c8f4fa;
  --color-blue-moon-200: #ace1e8;
  --color-blue-moon-300: #8eccd4;
  --color-blue-moon-400: #67adb6;
  --color-blue-moon-500: #48919a;
  --color-blue-moon-600: #2d767f;
  --color-blue-moon-700: #185f67;
  --color-blue-moon-800: #074b52;
  --color-blue-moon-900: #003a40;
  --color-blue-moon-950: #002429;
  --color-fortune-cookie: #dec59c;
  --color-fortune-cookie-50: #fff8ed;
  --color-fortune-cookie-100: #fdefd6;
  --color-fortune-cookie-200: #eddcbf;
  --color-fortune-cookie-300: #dec59c;
  --color-fortune-cookie-400: #bba47f;
  --color-fortune-cookie-500: #9f8760;
  --color-fortune-cookie-600: #826c46;
  --color-fortune-cookie-700: #685431;
  --color-fortune-cookie-800: #524022;
  --color-fortune-cookie-900: #3f3016;
  --color-fortune-cookie-950: #281d0b;
  --color-great-void: #33585d;
  --color-great-void-50: #e4fafd;
  --color-great-void-100: #d8f1f4;
  --color-great-void-200: #bfdde1;
  --color-great-void-300: #a4c7cb;
  --color-great-void-400: #81a7ac;
  --color-great-void-500: #658b90;
  --color-great-void-600: #4b6f74;
  --color-great-void-700: #33585d;
  --color-great-void-800: #284448;
  --color-great-void-900: #1c3538;
  --color-great-void-950: #0f2123;
}