Hammam Blue to Vampire Hunter Color Palette

About this palette

Hammam Blue to Vampire Hunter is a 5-color cool palette: #4FDFD8 (Hammam Blue), #00ACBB (True Sky Blue), #008A83 (Go Go Green), #A80024 (Hong Kong Taxi), #570016 (Vampire Hunter). It mixes turquoise, red, brown tones and feels cool overall. The strongest text pairing is #4FDFD8 on #570016 with a contrast ratio of 9.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hammam Blue	rgb(79, 223, 216)	hsl(177, 69%, 59%)
True Sky Blue	rgb(0, 172, 187)	hsl(185, 100%, 37%)
Go Go Green	rgb(0, 138, 131)	hsl(177, 100%, 27%)
Hong Kong Taxi	rgb(168, 0, 36)	hsl(347, 100%, 33%)
Vampire Hunter	rgb(87, 0, 22)	hsl(345, 100%, 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.

Aa9.09:1 Very good#4FDFD8 on #570016
Aa9.09:1 Very good#570016 on #4FDFD8
Aa5.38:1 Good#00ACBB on #570016
Aa5.38:1 Good#570016 on #00ACBB
Aa4.79:1 Good#4FDFD8 on #A80024
Aa4.79:1 Good#A80024 on #4FDFD8
Aa3.50:1 Poor#008A83 on #570016
Aa3.50:1 Poor#570016 on #008A83

Color blindness preview

CSS variables

/* Hammam Blue to Vampire Hunter — https://swatchly.xyz/palette/4fdfd8-00acbb-008a83-a80024-570016 */
:root {
  --hammam-blue: #4fdfd8;
  --true-sky-blue: #00acbb;
  --go-go-green: #008a83;
  --hong-kong-taxi: #a80024;
  --vampire-hunter: #570016;
}

Tailwind CSS v4

/* Hammam Blue to Vampire Hunter — https://swatchly.xyz/palette/4fdfd8-00acbb-008a83-a80024-570016 */
@theme {
  --color-hammam-blue: #4fdfd8;
  --color-hammam-blue-50: #e1fffc;
  --color-hammam-blue-100: #b6fffa;
  --color-hammam-blue-200: #95efe9;
  --color-hammam-blue-300: #4fdfd8;
  --color-hammam-blue-400: #2dbcb6;
  --color-hammam-blue-500: #009e98;
  --color-hammam-blue-600: #007f7a;
  --color-hammam-blue-700: #006461;
  --color-hammam-blue-800: #004e4b;
  --color-hammam-blue-900: #003c39;
  --color-hammam-blue-950: #002524;
  --color-true-sky-blue: #00acbb;
  --color-true-sky-blue-50: #d4faff;
  --color-true-sky-blue-100: #a9f5ff;
  --color-true-sky-blue-200: #85e2ee;
  --color-true-sky-blue-300: #5bccd9;
  --color-true-sky-blue-400: #00acbb;
  --color-true-sky-blue-500: #008f9c;
  --color-true-sky-blue-600: #00747e;
  --color-true-sky-blue-700: #005c65;
  --color-true-sky-blue-800: #004950;
  --color-true-sky-blue-900: #00393f;
  --color-true-sky-blue-950: #002529;
  --color-go-go-green: #008a83;
  --color-go-go-green-50: #d6fffb;
  --color-go-go-green-100: #c0fbf5;
  --color-go-go-green-200: #a5ece5;
  --color-go-go-green-300: #86d9d2;
  --color-go-go-green-400: #5bbdb5;
  --color-go-go-green-500: #35a49c;
  --color-go-go-green-600: #008a83;
  --color-go-go-green-700: #006e68;
  --color-go-go-green-800: #005651;
  --color-go-go-green-900: #00423e;
  --color-go-go-green-950: #002927;
  --color-hong-kong-taxi: #a80024;
  --color-hong-kong-taxi-50: #fff1f1;
  --color-hong-kong-taxi-100: #ffe4e2;
  --color-hong-kong-taxi-200: #ffc9c6;
  --color-hong-kong-taxi-300: #ffa7a4;
  --color-hong-kong-taxi-400: #ff6e70;
  --color-hong-kong-taxi-500: #e34d54;
  --color-hong-kong-taxi-600: #c32e3b;
  --color-hong-kong-taxi-700: #a80024;
  --color-hong-kong-taxi-800: #85001a;
  --color-hong-kong-taxi-900: #690012;
  --color-hong-kong-taxi-950: #450009;
  --color-vampire-hunter: #570016;
  --color-vampire-hunter-50: #fff1f2;
  --color-vampire-hunter-100: #ffe4e4;
  --color-vampire-hunter-200: #ffc7c9;
  --color-vampire-hunter-300: #faa7ab;
  --color-vampire-hunter-400: #dd8288;
  --color-vampire-hunter-500: #be646b;
  --color-vampire-hunter-600: #9e4951;
  --color-vampire-hunter-700: #7f333b;
  --color-vampire-hunter-800: #63232a;
  --color-vampire-hunter-900: #570016;
  --color-vampire-hunter-950: #2f0b10;
}