Near Moon to Merlot Color Palette

About this palette

Near Moon to Merlot is a 5-color vibrant, cool palette: #75E7DB (Near Moon), #BB9600 (Faint Gold), #6972FF (Pan Purple), #583ED3 (Blurple), #6F0031 (Merlot). It mixes turquoise, yellow, purple, red tones and feels cool overall. The strongest text pairing is #75E7DB on #6F0031 with a contrast ratio of 8.26:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Near Moon	rgb(117, 231, 219)	hsl(174, 70%, 68%)
Faint Gold	rgb(187, 150, 0)	hsl(48, 100%, 37%)
Pan Purple	rgb(105, 114, 255)	hsl(236, 100%, 71%)
Blurple	rgb(88, 62, 211)	hsl(250, 63%, 54%)
Merlot	rgb(111, 0, 49)	hsl(334, 100%, 22%)

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.

Aa8.26:1 Very good#75E7DB on #6F0031
Aa8.26:1 Very good#6F0031 on #75E7DB
Aa4.67:1 Good#75E7DB on #583ED3
Aa4.67:1 Good#583ED3 on #75E7DB
Aa4.35:1 Poor#BB9600 on #6F0031
Aa4.35:1 Poor#6F0031 on #BB9600
Aa3.17:1 Poor#6972FF on #6F0031
Aa3.17:1 Poor#6F0031 on #6972FF

Color blindness preview

CSS variables

/* Near Moon to Merlot — https://swatchly.xyz/palette/75e7db-bb9600-6972ff-583ed3-6f0031 */
:root {
  --near-moon: #75e7db;
  --faint-gold: #bb9600;
  --pan-purple: #6972ff;
  --blurple: #583ed3;
  --merlot: #6f0031;
}

Tailwind CSS v4

/* Near Moon to Merlot — https://swatchly.xyz/palette/75e7db-bb9600-6972ff-583ed3-6f0031 */
@theme {
  --color-near-moon: #75e7db;
  --color-near-moon-50: #c2fef7;
  --color-near-moon-100: #b0f5ec;
  --color-near-moon-200: #75e7db;
  --color-near-moon-300: #6ecfc4;
  --color-near-moon-400: #3fb1a7;
  --color-near-moon-500: #04978d;
  --color-near-moon-600: #007a72;
  --color-near-moon-700: #00625b;
  --color-near-moon-800: #004e48;
  --color-near-moon-900: #003c37;
  --color-near-moon-950: #002622;
  --color-faint-gold: #bb9600;
  --color-faint-gold-50: #fff2cd;
  --color-faint-gold-100: #fee6a1;
  --color-faint-gold-200: #edd07d;
  --color-faint-gold-300: #d8b855;
  --color-faint-gold-400: #bb9600;
  --color-faint-gold-500: #9c7d00;
  --color-faint-gold-600: #7e6400;
  --color-faint-gold-700: #655000;
  --color-faint-gold-800: #4f3e00;
  --color-faint-gold-900: #3e3000;
  --color-faint-gold-950: #281e00;
  --color-pan-purple: #6972ff;
  --color-pan-purple-50: #f2f5ff;
  --color-pan-purple-100: #e6eaff;
  --color-pan-purple-200: #ccd5ff;
  --color-pan-purple-300: #b0bcff;
  --color-pan-purple-400: #8997ff;
  --color-pan-purple-500: #6972ff;
  --color-pan-purple-600: #5255de;
  --color-pan-purple-700: #3f3ebc;
  --color-pan-purple-800: #302c9b;
  --color-pan-purple-900: #241f7e;
  --color-pan-purple-950: #151055;
  --color-blurple: #583ed3;
  --color-blurple-50: #f3f4ff;
  --color-blurple-100: #e8e9ff;
  --color-blurple-200: #d4d6ff;
  --color-blurple-300: #bcbeff;
  --color-blurple-400: #9c9aff;
  --color-blurple-500: #8277ff;
  --color-blurple-600: #6b57ec;
  --color-blurple-700: #583ed3;
  --color-blurple-800: #452cac;
  --color-blurple-900: #351d8c;
  --color-blurple-950: #210d60;
  --color-merlot: #6f0031;
  --color-merlot-50: #fff1f4;
  --color-merlot-100: #ffe3e8;
  --color-merlot-200: #ffc6d2;
  --color-merlot-300: #ffa1b8;
  --color-merlot-400: #e77d98;
  --color-merlot-500: #cc607e;
  --color-merlot-600: #af4766;
  --color-merlot-700: #943351;
  --color-merlot-800: #7b2440;
  --color-merlot-900: #6f0031;
  --color-merlot-950: #450b20;
}