Opera to Machinery color palette

80637DOpera 58506EMajestic Magic 2F262ESmoky Charcoal EDC6D3Tussie-Mussie 9F9AAEMachinery

About this palette

Opera to Machinery is a 5-color muted palette: #80637D (Opera), #58506E (Majestic Magic), #2F262E (Smoky Charcoal), #EDC6D3 (Tussie-Mussie), #9F9AAE (Machinery). It mixes pink, purple, gray tones and feels cool overall. The strongest text pairing is #2F262E on #EDC6D3 with a contrast ratio of 9.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opera	rgb(128, 99, 125)	hsl(306, 13%, 45%)
Majestic Magic	rgb(88, 80, 110)	hsl(256, 16%, 37%)
Smoky Charcoal	rgb(47, 38, 46)	hsl(307, 11%, 17%)
Tussie-Mussie	rgb(237, 198, 211)	hsl(340, 52%, 85%)
Machinery	rgb(159, 154, 174)	hsl(255, 11%, 64%)

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.

Aa9.47:1 Very good#2F262E on #EDC6D3
Aa9.47:1 Very good#EDC6D3 on #2F262E
Aa5.36:1 Good#2F262E on #9F9AAE
Aa5.36:1 Good#9F9AAE on #2F262E
Aa4.89:1 Good#58506E on #EDC6D3
Aa4.89:1 Good#EDC6D3 on #58506E
Aa3.41:1 Poor#80637D on #EDC6D3
Aa3.41:1 Poor#EDC6D3 on #80637D

Color blindness preview

CSS variables

/* Opera to Machinery — https://swatchly.xyz/palette/80637d-58506e-2f262e-edc6d3-9f9aae */
:root {
  --opera: #80637d;
  --majestic-magic: #58506e;
  --smoky-charcoal: #2f262e;
  --tussie-mussie: #edc6d3;
  --machinery: #9f9aae;
}

Tailwind CSS v4

/* Opera to Machinery — https://swatchly.xyz/palette/80637d-58506e-2f262e-edc6d3-9f9aae */
@theme {
  --color-opera: #80637d;
  --color-opera-50: #fff0fd;
  --color-opera-100: #f9e4f6;
  --color-opera-200: #e8d0e5;
  --color-opera-300: #d4b8d0;
  --color-opera-400: #b698b3;
  --color-opera-500: #9b7d98;
  --color-opera-600: #80637d;
  --color-opera-700: #674d64;
  --color-opera-800: #523b4f;
  --color-opera-900: #3f2c3e;
  --color-opera-950: #281a27;
  --color-majestic-magic: #58506e;
  --color-majestic-magic-50: #f6f3ff;
  --color-majestic-magic-100: #ede7fe;
  --color-majestic-magic-200: #d9d3ed;
  --color-majestic-magic-300: #c3bcda;
  --color-majestic-magic-400: #a49cbc;
  --color-majestic-magic-500: #8981a1;
  --color-majestic-magic-600: #6e6685;
  --color-majestic-magic-700: #58506e;
  --color-majestic-magic-800: #453e56;
  --color-majestic-magic-900: #352f44;
  --color-majestic-magic-950: #211d2b;
  --color-smoky-charcoal: #2f262e;
  --color-smoky-charcoal-50: #f9f3f9;
  --color-smoky-charcoal-100: #f0e8ef;
  --color-smoky-charcoal-200: #ddd4dc;
  --color-smoky-charcoal-300: #c7bdc6;
  --color-smoky-charcoal-400: #a79ca5;
  --color-smoky-charcoal-500: #897e88;
  --color-smoky-charcoal-600: #6d636c;
  --color-smoky-charcoal-700: #544b53;
  --color-smoky-charcoal-800: #3f373e;
  --color-smoky-charcoal-900: #2f262e;
  --color-smoky-charcoal-950: #1b161a;
  --color-tussie-mussie: #edc6d3;
  --color-tussie-mussie-50: #ffecf2;
  --color-tussie-mussie-100: #f9dfe7;
  --color-tussie-mussie-200: #edc6d3;
  --color-tussie-mussie-300: #d4b2bd;
  --color-tussie-mussie-400: #b6939f;
  --color-tussie-mussie-500: #9c7884;
  --color-tussie-mussie-600: #815f6b;
  --color-tussie-mussie-700: #694b55;
  --color-tussie-mussie-800: #543a43;
  --color-tussie-mussie-900: #422b33;
  --color-tussie-mussie-950: #2a1a20;
  --color-machinery: #9f9aae;
  --color-machinery-50: #f4f2fe;
  --color-machinery-100: #eae7f4;
  --color-machinery-200: #d6d2e2;
  --color-machinery-300: #bfbacc;
  --color-machinery-400: #9f9aae;
  --color-machinery-500: #848093;
  --color-machinery-600: #6b6678;
  --color-machinery-700: #555161;
  --color-machinery-800: #423f4d;
  --color-machinery-900: #33303c;
  --color-machinery-950: #201e26;
}