Maharaja to Lovely Breeze Color Palette

About this palette

Maharaja to Lovely Breeze is a 4-color muted, cool palette: #3C3550 (Maharaja), #99B592 (Foliage), #537156 (Cactus), #F5D6E4 (Lovely Breeze). It mixes purple, green, pink tones and feels cool overall. The strongest text pairing is #3C3550 on #F5D6E4 with a contrast ratio of 8.60:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maharaja	rgb(60, 53, 80)	hsl(256, 20%, 26%)
Foliage	rgb(153, 181, 146)	hsl(108, 19%, 64%)
Cactus	rgb(83, 113, 86)	hsl(126, 15%, 38%)
Lovely Breeze	rgb(245, 214, 228)	hsl(333, 61%, 90%)

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.60:1 Very good#3C3550 on #F5D6E4
Aa8.60:1 Very good#F5D6E4 on #3C3550
Aa5.16:1 Good#3C3550 on #99B592
Aa5.16:1 Good#99B592 on #3C3550
Aa4.04:1 Poor#537156 on #F5D6E4
Aa4.04:1 Poor#F5D6E4 on #537156

Color blindness preview

CSS variables

/* Maharaja to Lovely Breeze — https://swatchly.xyz/palette/3c3550-99b592-537156-f5d6e4 */
:root {
  --maharaja: #3c3550;
  --foliage: #99b592;
  --cactus: #537156;
  --lovely-breeze: #f5d6e4;
}

Tailwind CSS v4

/* Maharaja to Lovely Breeze — https://swatchly.xyz/palette/3c3550-99b592-537156-f5d6e4 */
@theme {
  --color-maharaja: #3c3550;
  --color-maharaja-50: #f6f3ff;
  --color-maharaja-100: #ece8fd;
  --color-maharaja-200: #d9d3ed;
  --color-maharaja-300: #c3bcd9;
  --color-maharaja-400: #a59ebd;
  --color-maharaja-500: #8b84a3;
  --color-maharaja-600: #726b88;
  --color-maharaja-700: #5c5671;
  --color-maharaja-800: #4a445d;
  --color-maharaja-900: #3c3550;
  --color-maharaja-950: #262232;
  --color-foliage: #99b592;
  --color-foliage-50: #effeeb;
  --color-foliage-100: #e5f7e1;
  --color-foliage-200: #d1e6cc;
  --color-foliage-300: #bad2b4;
  --color-foliage-400: #99b592;
  --color-foliage-500: #7c9776;
  --color-foliage-600: #617b5a;
  --color-foliage-700: #4a6144;
  --color-foliage-800: #374c32;
  --color-foliage-900: #283a24;
  --color-foliage-950: #172314;
  --color-cactus: #537156;
  --color-cactus-50: #e9fbea;
  --color-cactus-100: #dcf1de;
  --color-cactus-200: #c5dec7;
  --color-cactus-300: #abc8ae;
  --color-cactus-400: #8aa88c;
  --color-cactus-500: #6d8c70;
  --color-cactus-600: #537156;
  --color-cactus-700: #405a42;
  --color-cactus-800: #304732;
  --color-cactus-900: #233725;
  --color-cactus-950: #142216;
  --color-lovely-breeze: #f5d6e4;
  --color-lovely-breeze-50: #fff9fc;
  --color-lovely-breeze-100: #ffedf5;
  --color-lovely-breeze-200: #f5d6e4;
  --color-lovely-breeze-300: #d9c0cb;
  --color-lovely-breeze-400: #ba9eaa;
  --color-lovely-breeze-500: #9d818e;
  --color-lovely-breeze-600: #806572;
  --color-lovely-breeze-700: #664e5a;
  --color-lovely-breeze-800: #503b45;
  --color-lovely-breeze-900: #3e2d35;
  --color-lovely-breeze-950: #271b21;
}