Mystery Mint to Nightmare color palette

BCEDD6Mystery Mint E37F58Sassy Salmon 7B6EC2Venus Violet 833400Espresso Martini 00211ANightmare

About this palette

Mystery Mint to Nightmare is a 5-color cool, earthy, vintage palette: #BCEDD6 (Mystery Mint), #E37F58 (Sassy Salmon), #7B6EC2 (Venus Violet), #833400 (Espresso Martini), #00211A (Nightmare). It mixes green, orange, purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #BCEDD6 on #00211A with a contrast ratio of 13.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mystery Mint	rgb(188, 237, 214)	hsl(152, 58%, 83%)
Sassy Salmon	rgb(227, 127, 88)	hsl(17, 71%, 62%)
Venus Violet	rgb(123, 110, 194)	hsl(249, 41%, 60%)
Espresso Martini	rgb(131, 52, 0)	hsl(24, 100%, 26%)
Nightmare	rgb(0, 33, 26)	hsl(167, 100%, 6%)

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.16:1 Super#BCEDD6 on #00211A
Aa13.16:1 Super#00211A on #BCEDD6
Aa6.60:1 Good#BCEDD6 on #833400
Aa6.60:1 Good#833400 on #BCEDD6
Aa6.04:1 Good#E37F58 on #00211A
Aa6.04:1 Good#00211A on #E37F58
Aa3.94:1 Poor#7B6EC2 on #00211A
Aa3.94:1 Poor#00211A on #7B6EC2

Color blindness preview

CSS variables

/* Mystery Mint to Nightmare — https://swatchly.xyz/palette/bcedd6-e37f58-7b6ec2-833400-00211a */
:root {
  --mystery-mint: #bcedd6;
  --sassy-salmon: #e37f58;
  --venus-violet: #7b6ec2;
  --espresso-martini: #833400;
  --nightmare: #00211a;
}

Tailwind CSS v4

/* Mystery Mint to Nightmare — https://swatchly.xyz/palette/bcedd6-e37f58-7b6ec2-833400-00211a */
@theme {
  --color-mystery-mint: #bcedd6;
  --color-mystery-mint-50: #f0fff8;
  --color-mystery-mint-100: #defaed;
  --color-mystery-mint-200: #bcedd6;
  --color-mystery-mint-300: #abd2c0;
  --color-mystery-mint-400: #86b29e;
  --color-mystery-mint-500: #689681;
  --color-mystery-mint-600: #4d7966;
  --color-mystery-mint-700: #37604f;
  --color-mystery-mint-800: #274b3c;
  --color-mystery-mint-900: #1b3a2d;
  --color-mystery-mint-950: #0e241b;
  --color-sassy-salmon: #e37f58;
  --color-sassy-salmon-50: #fff0eb;
  --color-sassy-salmon-100: #ffe2d8;
  --color-sassy-salmon-200: #ffc6b1;
  --color-sassy-salmon-300: #fea482;
  --color-sassy-salmon-400: #e37f58;
  --color-sassy-salmon-500: #c5643d;
  --color-sassy-salmon-600: #a64a24;
  --color-sassy-salmon-700: #8a360f;
  --color-sassy-salmon-800: #702602;
  --color-sassy-salmon-900: #591c00;
  --color-sassy-salmon-950: #3a0f00;
  --color-venus-violet: #7b6ec2;
  --color-venus-violet-50: #f2f2ff;
  --color-venus-violet-100: #e6e4ff;
  --color-venus-violet-200: #d0cbff;
  --color-venus-violet-300: #b8aefd;
  --color-venus-violet-400: #978be0;
  --color-venus-violet-500: #7b6ec2;
  --color-venus-violet-600: #6356a4;
  --color-venus-violet-700: #4f4289;
  --color-venus-violet-800: #3e3270;
  --color-venus-violet-900: #30265a;
  --color-venus-violet-950: #1e163c;
  --color-espresso-martini: #833400;
  --color-espresso-martini-50: #fff2ec;
  --color-espresso-martini-100: #ffe5d9;
  --color-espresso-martini-200: #ffc9b0;
  --color-espresso-martini-300: #f8a985;
  --color-espresso-martini-400: #da865e;
  --color-espresso-martini-500: #bd683f;
  --color-espresso-martini-600: #9d4d25;
  --color-espresso-martini-700: #833400;
  --color-espresso-martini-800: #662904;
  --color-espresso-martini-900: #511d00;
  --color-espresso-martini-950: #351000;
  --color-nightmare: #00211a;
  --color-nightmare-50: #e6faf4;
  --color-nightmare-100: #daf1ea;
  --color-nightmare-200: #c3dfd6;
  --color-nightmare-300: #aac9c0;
  --color-nightmare-400: #88aaa0;
  --color-nightmare-500: #6b8e84;
  --color-nightmare-600: #517269;
  --color-nightmare-700: #3c5a52;
  --color-nightmare-800: #2b453e;
  --color-nightmare-900: #1e342e;
  --color-nightmare-950: #00211a;
}