Moonraker to Melanzane Color Palette

About this palette

Moonraker to Melanzane is a 5-color cool palette: #CBB0E1 (Moonraker), #789F6A (Money), #9768A2 (Crown Jewels), #384E34 (Mountain View), #342236 (Melanzane). It mixes purple, green tones and feels cool overall. The strongest text pairing is #CBB0E1 on #342236 with a contrast ratio of 7.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moonraker	rgb(203, 176, 225)	hsl(273, 45%, 79%)
Money	rgb(120, 159, 106)	hsl(104, 22%, 52%)
Crown Jewels	rgb(151, 104, 162)	hsl(289, 24%, 52%)
Mountain View	rgb(56, 78, 52)	hsl(111, 20%, 25%)
Melanzane	rgb(52, 34, 54)	hsl(294, 23%, 17%)

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.

Aa7.59:1 Very good#CBB0E1 on #342236
Aa7.59:1 Very good#342236 on #CBB0E1
Aa4.88:1 Good#789F6A on #342236
Aa4.88:1 Good#342236 on #789F6A
Aa4.70:1 Good#CBB0E1 on #384E34
Aa4.70:1 Good#384E34 on #CBB0E1
Aa3.37:1 Poor#9768A2 on #342236
Aa3.37:1 Poor#342236 on #9768A2

Color blindness preview

CSS variables

/* Moonraker to Melanzane — https://swatchly.xyz/palette/cbb0e1-789f6a-9768a2-384e34-342236 */
:root {
  --moonraker: #cbb0e1;
  --money: #789f6a;
  --crown-jewels: #9768a2;
  --mountain-view: #384e34;
  --melanzane: #342236;
}

Tailwind CSS v4

/* Moonraker to Melanzane — https://swatchly.xyz/palette/cbb0e1-789f6a-9768a2-384e34-342236 */
@theme {
  --color-moonraker: #cbb0e1;
  --color-moonraker-50: #f8efff;
  --color-moonraker-100: #f1e1ff;
  --color-moonraker-200: #dfcaf0;
  --color-moonraker-300: #cbb0e1;
  --color-moonraker-400: #ab92c0;
  --color-moonraker-500: #9177a5;
  --color-moonraker-600: #765e8a;
  --color-moonraker-700: #5f4971;
  --color-moonraker-800: #4c385b;
  --color-moonraker-900: #3b2b48;
  --color-moonraker-950: #25192e;
  --color-money: #789f6a;
  --color-money-50: #e9ffe2;
  --color-money-100: #e0f8d7;
  --color-money-200: #cbe8c1;
  --color-money-300: #b3d5a8;
  --color-money-400: #93b886;
  --color-money-500: #789f6a;
  --color-money-600: #5c814e;
  --color-money-700: #456838;
  --color-money-800: #335127;
  --color-money-900: #243e1a;
  --color-money-950: #14260d;
  --color-crown-jewels: #9768a2;
  --color-crown-jewels-50: #fceeff;
  --color-crown-jewels-100: #f8dcff;
  --color-crown-jewels-200: #e9c2f3;
  --color-crown-jewels-300: #d4a8de;
  --color-crown-jewels-400: #b485bf;
  --color-crown-jewels-500: #9768a2;
  --color-crown-jewels-600: #7d5087;
  --color-crown-jewels-700: #653d6e;
  --color-crown-jewels-800: #512e59;
  --color-crown-jewels-900: #402247;
  --color-crown-jewels-950: #29142e;
  --color-mountain-view: #384e34;
  --color-mountain-view-50: #ebfae9;
  --color-mountain-view-100: #e0f1dd;
  --color-mountain-view-200: #cbdec7;
  --color-mountain-view-300: #b3c9af;
  --color-mountain-view-400: #93ab8f;
  --color-mountain-view-500: #799174;
  --color-mountain-view-600: #60775b;
  --color-mountain-view-700: #4b6047;
  --color-mountain-view-800: #384e34;
  --color-mountain-view-900: #2c3c29;
  --color-mountain-view-950: #1a2618;
  --color-melanzane: #342236;
  --color-melanzane-50: #fdf0ff;
  --color-melanzane-100: #f4e5f6;
  --color-melanzane-200: #e2d1e4;
  --color-melanzane-300: #cdb9cf;
  --color-melanzane-400: #ad97af;
  --color-melanzane-500: #907a92;
  --color-melanzane-600: #735f75;
  --color-melanzane-700: #59475b;
  --color-melanzane-800: #433445;
  --color-melanzane-900: #342236;
  --color-melanzane-950: #1d151e;
}