Her Highness to Ginger Scent color palette

473066Her Highness 042129Midnight Dreams 445A2ATurf 6BDCE4Hammam Blue 7C70A3Purple Haze D18E7FGinger Scent

Open in generator Export PNG, PDF, ASE…

About this palette

Her Highness to Ginger Scent is a 6-color cool palette: #473066 (Her Highness), #042129 (Midnight Dreams), #445A2A (Turf), #6BDCE4 (Hammam Blue), #7C70A3 (Purple Haze), #D18E7F (Ginger Scent). It mixes purple, blue, green, turquoise, red tones and feels cool overall. The strongest text pairing is #042129 on #6BDCE4 with a contrast ratio of 10.35:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Her Highness	rgb(71, 48, 102)	hsl(266, 36%, 29%)
Midnight Dreams	rgb(4, 33, 41)	hsl(193, 82%, 9%)
Turf	rgb(68, 90, 42)	hsl(88, 36%, 26%)
Hammam Blue	rgb(107, 220, 228)	hsl(184, 69%, 66%)
Purple Haze	rgb(124, 112, 163)	hsl(254, 22%, 54%)
Ginger Scent	rgb(209, 142, 127)	hsl(11, 47%, 66%)

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.

Aa10.35:1 Very good#042129 on #6BDCE4
Aa10.35:1 Very good#6BDCE4 on #042129
Aa6.90:1 Good#473066 on #6BDCE4
Aa6.90:1 Good#6BDCE4 on #473066
Aa6.29:1 Good#042129 on #D18E7F
Aa6.29:1 Good#D18E7F on #042129
Aa4.74:1 Good#445A2A on #6BDCE4
Aa4.74:1 Good#6BDCE4 on #445A2A

Color blindness preview

CSS variables

/* Her Highness to Ginger Scent — https://swatchly.xyz/palette/473066-042129-445a2a-6bdce4-7c70a3-d18e7f */
:root {
  --her-highness: #473066;
  --midnight-dreams: #042129;
  --turf: #445a2a;
  --hammam-blue: #6bdce4;
  --purple-haze: #7c70a3;
  --ginger-scent: #d18e7f;
}

Tailwind CSS v4

/* Her Highness to Ginger Scent — https://swatchly.xyz/palette/473066-042129-445a2a-6bdce4-7c70a3-d18e7f */
@theme {
  --color-her-highness: #473066;
  --color-her-highness-50: #f7f3ff;
  --color-her-highness-100: #efe6ff;
  --color-her-highness-200: #dfcefe;
  --color-her-highness-300: #c9b4ec;
  --color-her-highness-400: #aa93cf;
  --color-her-highness-500: #8e76b2;
  --color-her-highness-600: #725b94;
  --color-her-highness-700: #5a4578;
  --color-her-highness-800: #473066;
  --color-her-highness-900: #35264b;
  --color-her-highness-950: #211630;
  --color-midnight-dreams: #042129;
  --color-midnight-dreams-50: #e7f9ff;
  --color-midnight-dreams-100: #dbeff6;
  --color-midnight-dreams-200: #c4dce4;
  --color-midnight-dreams-300: #abc6cf;
  --color-midnight-dreams-400: #89a7b1;
  --color-midnight-dreams-500: #6d8b95;
  --color-midnight-dreams-600: #53707a;
  --color-midnight-dreams-700: #3e5961;
  --color-midnight-dreams-800: #2e454c;
  --color-midnight-dreams-900: #21343a;
  --color-midnight-dreams-950: #042129;
  --color-turf: #445a2a;
  --color-turf-50: #ecfbde;
  --color-turf-100: #e1f2d1;
  --color-turf-200: #cbdfb7;
  --color-turf-300: #b2c99b;
  --color-turf-400: #91a978;
  --color-turf-500: #758d5b;
  --color-turf-600: #5b7142;
  --color-turf-700: #445a2a;
  --color-turf-800: #354620;
  --color-turf-900: #273616;
  --color-turf-950: #17220b;
  --color-hammam-blue: #6bdce4;
  --color-hammam-blue-50: #e8feff;
  --color-hammam-blue-100: #c7fbff;
  --color-hammam-blue-200: #a3ecf2;
  --color-hammam-blue-300: #6bdce4;
  --color-hammam-blue-400: #4eb9c1;
  --color-hammam-blue-500: #1b9da5;
  --color-hammam-blue-600: #007e85;
  --color-hammam-blue-700: #006469;
  --color-hammam-blue-800: #004d52;
  --color-hammam-blue-900: #003b3e;
  --color-hammam-blue-950: #002527;
  --color-purple-haze: #7c70a3;
  --color-purple-haze-50: #f3f0ff;
  --color-purple-haze-100: #e7e2ff;
  --color-purple-haze-200: #d2c9f5;
  --color-purple-haze-300: #baafe0;
  --color-purple-haze-400: #998dc1;
  --color-purple-haze-500: #7c70a3;
  --color-purple-haze-600: #645988;
  --color-purple-haze-700: #504570;
  --color-purple-haze-800: #3f365a;
  --color-purple-haze-900: #312948;
  --color-purple-haze-950: #1f1930;
  --color-ginger-scent: #d18e7f;
  --color-ginger-scent-50: #fff2ef;
  --color-ginger-scent-100: #ffe4de;
  --color-ginger-scent-200: #fec9bd;
  --color-ginger-scent-300: #ecb0a3;
  --color-ginger-scent-400: #d18e7f;
  --color-ginger-scent-500: #b37365;
  --color-ginger-scent-600: #96594c;
  --color-ginger-scent-700: #7b4438;
  --color-ginger-scent-800: #633329;
  --color-ginger-scent-900: #4e261d;
  --color-ginger-scent-950: #331610;
}