Phoenix Red to Hammam Blue Color Palette

About this palette

Phoenix Red to Hammam Blue is a 4-color palette: #D97251 (Phoenix Red), #004C4A (Tropical Forest), #A1597E (Feminism), #5CDAE7 (Hammam Blue). It mixes red, turquoise tones and feels balanced overall. The strongest text pairing is #004C4A on #5CDAE7 with a contrast ratio of 5.93:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Phoenix Red	rgb(217, 114, 81)	hsl(15, 64%, 58%)
Tropical Forest	rgb(0, 76, 74)	hsl(178, 100%, 15%)
Feminism	rgb(161, 89, 126)	hsl(329, 29%, 49%)
Hammam Blue	rgb(92, 218, 231)	hsl(186, 74%, 63%)

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.

Aa5.93:1 Good#004C4A on #5CDAE7
Aa5.93:1 Good#5CDAE7 on #004C4A
Aa3.04:1 Poor#D97251 on #004C4A
Aa3.04:1 Poor#004C4A on #D97251

Color blindness preview

CSS variables

/* Phoenix Red to Hammam Blue — https://swatchly.xyz/palette/d97251-004c4a-a1597e-5cdae7 */
:root {
  --phoenix-red: #d97251;
  --tropical-forest: #004c4a;
  --feminism: #a1597e;
  --hammam-blue: #5cdae7;
}

Tailwind CSS v4

/* Phoenix Red to Hammam Blue — https://swatchly.xyz/palette/d97251-004c4a-a1597e-5cdae7 */
@theme {
  --color-phoenix-red: #d97251;
  --color-phoenix-red-50: #fff5f2;
  --color-phoenix-red-100: #ffebe5;
  --color-phoenix-red-200: #ffd3c6;
  --color-phoenix-red-300: #ffb69f;
  --color-phoenix-red-400: #f18f6f;
  --color-phoenix-red-500: #d97251;
  --color-phoenix-red-600: #b85434;
  --color-phoenix-red-700: #983c1d;
  --color-phoenix-red-800: #7b2a0c;
  --color-phoenix-red-900: #611c02;
  --color-phoenix-red-950: #3f0d00;
  --color-tropical-forest: #004c4a;
  --color-tropical-forest-50: #dbfdfb;
  --color-tropical-forest-100: #cef4f2;
  --color-tropical-forest-200: #b4e2df;
  --color-tropical-forest-300: #97cdca;
  --color-tropical-forest-400: #72aeab;
  --color-tropical-forest-500: #54928f;
  --color-tropical-forest-600: #3a7774;
  --color-tropical-forest-700: #265f5d;
  --color-tropical-forest-800: #004c4a;
  --color-tropical-forest-900: #0c3a38;
  --color-tropical-forest-950: #042423;
  --color-feminism: #a1597e;
  --color-feminism-50: #fff1f7;
  --color-feminism-100: #ffe4f0;
  --color-feminism-200: #ffc9e2;
  --color-feminism-300: #f1afcf;
  --color-feminism-400: #d78eb1;
  --color-feminism-500: #bc7298;
  --color-feminism-600: #a1597e;
  --color-feminism-700: #844365;
  --color-feminism-800: #6a314f;
  --color-feminism-900: #54233d;
  --color-feminism-950: #361326;
  --color-hammam-blue: #5cdae7;
  --color-hammam-blue-50: #e5fdff;
  --color-hammam-blue-100: #c5f9ff;
  --color-hammam-blue-200: #99ebf4;
  --color-hammam-blue-300: #5cdae7;
  --color-hammam-blue-400: #3db8c4;
  --color-hammam-blue-500: #009ba7;
  --color-hammam-blue-600: #007d87;
  --color-hammam-blue-700: #00636b;
  --color-hammam-blue-800: #004d53;
  --color-hammam-blue-900: #003b40;
  --color-hammam-blue-950: #002528;
}