Dark Knight to Mystery Mint color palette

161929Dark Knight 693111Meatloaf A25732Cinnamon Sparkle 3D9C65Bulma Hair AEABEDWondrous Wisteria B9EDD6Mystery Mint

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Knight to Mystery Mint is a 6-color palette: #161929 (Dark Knight), #693111 (Meatloaf), #A25732 (Cinnamon Sparkle), #3D9C65 (Bulma Hair), #AEABED (Wondrous Wisteria), #B9EDD6 (Mystery Mint). It mixes black, brown, green, purple, turquoise tones and feels cool overall. The strongest text pairing is #161929 on #B9EDD6 with a contrast ratio of 13.40:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Knight	rgb(22, 25, 41)	hsl(231, 30%, 12%)
Meatloaf	rgb(105, 49, 17)	hsl(22, 72%, 24%)
Cinnamon Sparkle	rgb(162, 87, 50)	hsl(20, 53%, 42%)
Bulma Hair	rgb(61, 156, 101)	hsl(145, 44%, 43%)
Wondrous Wisteria	rgb(174, 171, 237)	hsl(243, 65%, 80%)
Mystery Mint	rgb(185, 237, 214)	hsl(153, 59%, 83%)

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.

Aa13.40:1 Super#161929 on #B9EDD6
Aa13.40:1 Super#B9EDD6 on #161929
Aa8.17:1 Very good#161929 on #AEABED
Aa8.17:1 Very good#AEABED on #161929
Aa7.88:1 Very good#693111 on #B9EDD6
Aa7.88:1 Very good#B9EDD6 on #693111
Aa5.10:1 Good#161929 on #3D9C65
Aa5.10:1 Good#3D9C65 on #161929

Color blindness preview

CSS variables

/* Dark Knight to Mystery Mint — https://swatchly.xyz/palette/161929-693111-a25732-3d9c65-aeabed-b9edd6 */
:root {
  --dark-knight: #161929;
  --meatloaf: #693111;
  --cinnamon-sparkle: #a25732;
  --bulma-hair: #3d9c65;
  --wondrous-wisteria: #aeabed;
  --mystery-mint: #b9edd6;
}

Tailwind CSS v4

/* Dark Knight to Mystery Mint — https://swatchly.xyz/palette/161929-693111-a25732-3d9c65-aeabed-b9edd6 */
@theme {
  --color-dark-knight: #161929;
  --color-dark-knight-50: #f2f5ff;
  --color-dark-knight-100: #e7eaf9;
  --color-dark-knight-200: #d3d7e7;
  --color-dark-knight-300: #bbc0d3;
  --color-dark-knight-400: #9ca0b5;
  --color-dark-knight-500: #7f8499;
  --color-dark-knight-600: #64697c;
  --color-dark-knight-700: #4d5163;
  --color-dark-knight-800: #3a3e4d;
  --color-dark-knight-900: #2b2e3a;
  --color-dark-knight-950: #161929;
  --color-meatloaf: #693111;
  --color-meatloaf-50: #fff2ec;
  --color-meatloaf-100: #ffe5d9;
  --color-meatloaf-200: #fecbb2;
  --color-meatloaf-300: #ecb296;
  --color-meatloaf-400: #cf9172;
  --color-meatloaf-500: #b47556;
  --color-meatloaf-600: #975b3d;
  --color-meatloaf-700: #7c462a;
  --color-meatloaf-800: #693111;
  --color-meatloaf-900: #4f2712;
  --color-meatloaf-950: #331707;
  --color-cinnamon-sparkle: #a25732;
  --color-cinnamon-sparkle-50: #fff2ec;
  --color-cinnamon-sparkle-100: #ffe6da;
  --color-cinnamon-sparkle-200: #ffcbb4;
  --color-cinnamon-sparkle-300: #f6af8f;
  --color-cinnamon-sparkle-400: #da8e6a;
  --color-cinnamon-sparkle-500: #bf714c;
  --color-cinnamon-sparkle-600: #a25732;
  --color-cinnamon-sparkle-700: #85421f;
  --color-cinnamon-sparkle-800: #6b3011;
  --color-cinnamon-sparkle-900: #552307;
  --color-cinnamon-sparkle-950: #381402;
  --color-bulma-hair: #3d9c65;
  --color-bulma-hair-50: #deffe8;
  --color-bulma-hair-100: #c4fbd5;
  --color-bulma-hair-200: #a8eabe;
  --color-bulma-hair-300: #89d6a4;
  --color-bulma-hair-400: #5fb881;
  --color-bulma-hair-500: #3d9c65;
  --color-bulma-hair-600: #1c804c;
  --color-bulma-hair-700: #006738;
  --color-bulma-hair-800: #00512b;
  --color-bulma-hair-900: #003e20;
  --color-bulma-hair-950: #002712;
  --color-wondrous-wisteria: #aeabed;
  --color-wondrous-wisteria-50: #ececff;
  --color-wondrous-wisteria-100: #dfdeff;
  --color-wondrous-wisteria-200: #c7c6fc;
  --color-wondrous-wisteria-300: #aeabed;
  --color-wondrous-wisteria-400: #928ecd;
  --color-wondrous-wisteria-500: #7975b3;
  --color-wondrous-wisteria-600: #625d98;
  --color-wondrous-wisteria-700: #4e497e;
  --color-wondrous-wisteria-800: #3d3968;
  --color-wondrous-wisteria-900: #302d54;
  --color-wondrous-wisteria-950: #1d1b37;
  --color-mystery-mint: #b9edd6;
  --color-mystery-mint-50: #effff7;
  --color-mystery-mint-100: #ddfaec;
  --color-mystery-mint-200: #b9edd6;
  --color-mystery-mint-300: #a9d2c0;
  --color-mystery-mint-400: #83b39e;
  --color-mystery-mint-500: #659681;
  --color-mystery-mint-600: #4a7a66;
  --color-mystery-mint-700: #35614f;
  --color-mystery-mint-800: #244b3c;
  --color-mystery-mint-900: #193a2d;
  --color-mystery-mint-950: #0c251b;
}