Black Market to Mermaid Tears Color Palette

About this palette

Black Market to Mermaid Tears is a 4-color cool palette: #24203B (Black Market), #885040 (Annatto), #57A5B7 (Seaside), #D4E4A0 (Mermaid Tears). It mixes purple, red, turquoise, green tones and feels cool overall. The strongest text pairing is #24203B on #D4E4A0 with a contrast ratio of 11.46:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Market	rgb(36, 32, 59)	hsl(249, 30%, 18%)
Annatto	rgb(136, 80, 64)	hsl(13, 36%, 39%)
Seaside	rgb(87, 165, 183)	hsl(191, 40%, 53%)
Mermaid Tears	rgb(212, 228, 160)	hsl(74, 56%, 76%)

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.

Aa11.46:1 Very good#24203B on #D4E4A0
Aa11.46:1 Very good#D4E4A0 on #24203B
Aa5.56:1 Good#24203B on #57A5B7
Aa5.56:1 Good#57A5B7 on #24203B
Aa4.71:1 Good#885040 on #D4E4A0
Aa4.71:1 Good#D4E4A0 on #885040

Color blindness preview

CSS variables

/* Black Market to Mermaid Tears — https://swatchly.xyz/palette/24203b-885040-57a5b7-d4e4a0 */
:root {
  --black-market: #24203b;
  --annatto: #885040;
  --seaside: #57a5b7;
  --mermaid-tears: #d4e4a0;
}

Tailwind CSS v4

/* Black Market to Mermaid Tears — https://swatchly.xyz/palette/24203b-885040-57a5b7-d4e4a0 */
@theme {
  --color-black-market: #24203b;
  --color-black-market-50: #f4f4ff;
  --color-black-market-100: #eae8ff;
  --color-black-market-200: #d6d4ef;
  --color-black-market-300: #c0bddb;
  --color-black-market-400: #a09dbe;
  --color-black-market-500: #8683a4;
  --color-black-market-600: #6d6989;
  --color-black-market-700: #575471;
  --color-black-market-800: #45435c;
  --color-black-market-900: #37344a;
  --color-black-market-950: #24203b;
  --color-annatto: #885040;
  --color-annatto-50: #fff2ee;
  --color-annatto-100: #ffe2d9;
  --color-annatto-200: #f8c6b8;
  --color-annatto-300: #e4ac9b;
  --color-annatto-400: #c58978;
  --color-annatto-500: #a66c5b;
  --color-annatto-600: #885040;
  --color-annatto-700: #6e3e30;
  --color-annatto-800: #582f23;
  --color-annatto-900: #462319;
  --color-annatto-950: #2d140d;
  --color-seaside: #57a5b7;
  --color-seaside-50: #dbf8ff;
  --color-seaside-100: #bff0fc;
  --color-seaside-200: #a1dceb;
  --color-seaside-300: #81c5d5;
  --color-seaside-400: #57a5b7;
  --color-seaside-500: #3b8b9c;
  --color-seaside-600: #217182;
  --color-seaside-700: #095b6a;
  --color-seaside-800: #004855;
  --color-seaside-900: #003843;
  --color-seaside-950: #00242c;
  --color-mermaid-tears: #d4e4a0;
  --color-mermaid-tears-50: #f3fdd9;
  --color-mermaid-tears-100: #eaf4cc;
  --color-mermaid-tears-200: #d4e4a0;
  --color-mermaid-tears-300: #becb94;
  --color-mermaid-tears-400: #9eac6d;
  --color-mermaid-tears-500: #82904f;
  --color-mermaid-tears-600: #677435;
  --color-mermaid-tears-700: #515c21;
  --color-mermaid-tears-800: #3e4813;
  --color-mermaid-tears-900: #2f3709;
  --color-mermaid-tears-950: #1d2203;
}