Hammam Blue to Black Cherry color palette

68DFD6Hammam Blue D27CDAPink Orchid 656930Jungle Civilization 4A4B1AAlligator Gladiator 291828Black Cherry

Open in generator Export PNG, PDF, ASE…

About this palette

Hammam Blue to Black Cherry is a 5-color cool, vintage palette: #68DFD6 (Hammam Blue), #D27CDA (Pink Orchid), #656930 (Jungle Civilization), #4A4B1A (Alligator Gladiator), #291828 (Black Cherry). It mixes turquoise, pink, green, brown, purple tones and feels cool overall. The strongest text pairing is #68DFD6 on #291828 with a contrast ratio of 10.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hammam Blue	rgb(104, 223, 214)	hsl(175, 65%, 64%)
Pink Orchid	rgb(210, 124, 218)	hsl(295, 56%, 67%)
Jungle Civilization	rgb(101, 105, 48)	hsl(64, 37%, 30%)
Alligator Gladiator	rgb(74, 75, 26)	hsl(61, 49%, 20%)
Black Cherry	rgb(41, 24, 40)	hsl(304, 26%, 13%)

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.45:1 Very good#68DFD6 on #291828
Aa10.45:1 Very good#291828 on #68DFD6
Aa6.08:1 Good#D27CDA on #291828
Aa6.08:1 Good#291828 on #D27CDA
Aa5.67:1 Good#68DFD6 on #4A4B1A
Aa5.67:1 Good#4A4B1A on #68DFD6
Aa3.63:1 Poor#68DFD6 on #656930
Aa3.63:1 Poor#656930 on #68DFD6

Color blindness preview

CSS variables

/* Hammam Blue to Black Cherry — https://swatchly.xyz/palette/68dfd6-d27cda-656930-4a4b1a-291828 */
:root {
  --hammam-blue: #68dfd6;
  --pink-orchid: #d27cda;
  --jungle-civilization: #656930;
  --alligator-gladiator: #4a4b1a;
  --black-cherry: #291828;
}

Tailwind CSS v4

/* Hammam Blue to Black Cherry — https://swatchly.xyz/palette/68dfd6-d27cda-656930-4a4b1a-291828 */
@theme {
  --color-hammam-blue: #68dfd6;
  --color-hammam-blue-50: #e6fffc;
  --color-hammam-blue-100: #c0fff8;
  --color-hammam-blue-200: #a2efe8;
  --color-hammam-blue-300: #68dfd6;
  --color-hammam-blue-400: #4bbcb4;
  --color-hammam-blue-500: #109f98;
  --color-hammam-blue-600: #00807a;
  --color-hammam-blue-700: #006560;
  --color-hammam-blue-800: #004f4a;
  --color-hammam-blue-900: #003c38;
  --color-hammam-blue-950: #002523;
  --color-pink-orchid: #d27cda;
  --color-pink-orchid-50: #fef0ff;
  --color-pink-orchid-100: #fde1ff;
  --color-pink-orchid-200: #fac1ff;
  --color-pink-orchid-300: #eda2f3;
  --color-pink-orchid-400: #d27cda;
  --color-pink-orchid-500: #b460bc;
  --color-pink-orchid-600: #97469f;
  --color-pink-orchid-700: #7b3183;
  --color-pink-orchid-800: #63216a;
  --color-pink-orchid-900: #4e1654;
  --color-pink-orchid-950: #330a37;
  --color-jungle-civilization: #656930;
  --color-jungle-civilization-50: #f5f9d8;
  --color-jungle-civilization-100: #eaeec8;
  --color-jungle-civilization-200: #d5d9ac;
  --color-jungle-civilization-300: #bdc28e;
  --color-jungle-civilization-400: #9ca169;
  --color-jungle-civilization-500: #80854b;
  --color-jungle-civilization-600: #656930;
  --color-jungle-civilization-700: #505321;
  --color-jungle-civilization-800: #3e4115;
  --color-jungle-civilization-900: #30320c;
  --color-jungle-civilization-950: #1e1f05;
  --color-alligator-gladiator: #4a4b1a;
  --color-alligator-gladiator-50: #f6f8db;
  --color-alligator-gladiator-100: #eceece;
  --color-alligator-gladiator-200: #d9dbb4;
  --color-alligator-gladiator-300: #c4c69a;
  --color-alligator-gladiator-400: #a5a877;
  --color-alligator-gladiator-500: #8b8d5c;
  --color-alligator-gladiator-600: #727343;
  --color-alligator-gladiator-700: #5c5d30;
  --color-alligator-gladiator-800: #4a4b1a;
  --color-alligator-gladiator-900: #393a16;
  --color-alligator-gladiator-950: #24240a;
  --color-black-cherry: #291828;
  --color-black-cherry-50: #fef0fc;
  --color-black-cherry-100: #f5e6f3;
  --color-black-cherry-200: #e3d1e1;
  --color-black-cherry-300: #cebacc;
  --color-black-cherry-400: #af9aad;
  --color-black-cherry-500: #947e92;
  --color-black-cherry-600: #786477;
  --color-black-cherry-700: #614e5f;
  --color-black-cherry-800: #4c3c4b;
  --color-black-cherry-900: #3b2d3a;
  --color-black-cherry-950: #291828;
}