Start generating

Hammam Blue to Sunken Ship color palette

5AD7E0Hammam BlueFF5268InfraredCE596DStrawberry Moon006D6BPine Scented Lagoon7F0035Inescapable Lover002523Sunken Ship
Open in generator Export PNG, PDF, ASE…

About this palette

Hammam Blue to Sunken Ship is a 6-color palette: #5AD7E0 (Hammam Blue), #FF5268 (Infrared), #CE596D (Strawberry Moon), #006D6B (Pine Scented Lagoon), #7F0035 (Inescapable Lover), #002523 (Sunken Ship). It mixes turquoise, red tones and feels balanced overall. The strongest text pairing is #5AD7E0 on #002523 with a contrast ratio of 9.49:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hammam Bluergb(90, 215, 224)hsl(184, 68%, 62%)
Infraredrgb(255, 82, 104)hsl(352, 100%, 66%)
Strawberry Moonrgb(206, 89, 109)hsl(350, 54%, 58%)
Pine Scented Lagoonrgb(0, 109, 107)hsl(179, 100%, 21%)
Inescapable Loverrgb(127, 0, 53)hsl(335, 100%, 25%)
Sunken Shiprgb(0, 37, 35)hsl(177, 100%, 7%)

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.49:1 Very good#5AD7E0 on #002523
  • Aa9.49:1 Very good#002523 on #5AD7E0
  • Aa6.26:1 Good#5AD7E0 on #7F0035
  • Aa6.26:1 Good#7F0035 on #5AD7E0
  • Aa5.17:1 Good#FF5268 on #002523
  • Aa5.17:1 Good#002523 on #FF5268
  • Aa4.09:1 Poor#CE596D on #002523
  • Aa4.09:1 Poor#002523 on #CE596D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hammam Blue to Sunken Ship — https://swatchly.xyz/palette/5ad7e0-ff5268-ce596d-006d6b-7f0035-002523 */
:root {
  --hammam-blue: #5ad7e0;
  --infrared: #ff5268;
  --strawberry-moon: #ce596d;
  --pine-scented-lagoon: #006d6b;
  --inescapable-lover: #7f0035;
  --sunken-ship: #002523;
}

Tailwind CSS v4

/* Hammam Blue to Sunken Ship — https://swatchly.xyz/palette/5ad7e0-ff5268-ce596d-006d6b-7f0035-002523 */
@theme {
  --color-hammam-blue: #5ad7e0;
  --color-hammam-blue-50: #ddfdff;
  --color-hammam-blue-100: #b6faff;
  --color-hammam-blue-200: #96e9ef;
  --color-hammam-blue-300: #5ad7e0;
  --color-hammam-blue-400: #3bb6be;
  --color-hammam-blue-500: #0099a2;
  --color-hammam-blue-600: #007b82;
  --color-hammam-blue-700: #006268;
  --color-hammam-blue-800: #004c51;
  --color-hammam-blue-900: #003b3f;
  --color-hammam-blue-950: #002527;
  --color-infrared: #ff5268;
  --color-infrared-50: #ffeded;
  --color-infrared-100: #ffdddd;
  --color-infrared-200: #ffbec0;
  --color-infrared-300: #ff989c;
  --color-infrared-400: #ff5268;
  --color-infrared-500: #e0314f;
  --color-infrared-600: #bf0539;
  --color-infrared-700: #9b002b;
  --color-infrared-800: #7c0021;
  --color-infrared-900: #620018;
  --color-infrared-950: #42000d;
  --color-strawberry-moon: #ce596d;
  --color-strawberry-moon-50: #fff1f2;
  --color-strawberry-moon-100: #ffe3e5;
  --color-strawberry-moon-200: #ffc6cb;
  --color-strawberry-moon-300: #ffa2ad;
  --color-strawberry-moon-400: #eb7789;
  --color-strawberry-moon-500: #ce596d;
  --color-strawberry-moon-600: #ae3e54;
  --color-strawberry-moon-700: #902a40;
  --color-strawberry-moon-800: #751a30;
  --color-strawberry-moon-900: #5e0f23;
  --color-strawberry-moon-950: #3e0614;
  --color-pine-scented-lagoon: #006d6b;
  --color-pine-scented-lagoon-50: #d5fffd;
  --color-pine-scented-lagoon-100: #c4f7f4;
  --color-pine-scented-lagoon-200: #abe7e4;
  --color-pine-scented-lagoon-300: #8ed3d0;
  --color-pine-scented-lagoon-400: #67b7b4;
  --color-pine-scented-lagoon-500: #479d9a;
  --color-pine-scented-lagoon-600: #2a8381;
  --color-pine-scented-lagoon-700: #006d6b;
  --color-pine-scented-lagoon-800: #005554;
  --color-pine-scented-lagoon-900: #004241;
  --color-pine-scented-lagoon-950: #002a29;
  --color-inescapable-lover: #7f0035;
  --color-inescapable-lover-50: #fff1f3;
  --color-inescapable-lover-100: #ffe3e7;
  --color-inescapable-lover-200: #ffc6d0;
  --color-inescapable-lover-300: #ffa2b5;
  --color-inescapable-lover-400: #ed7792;
  --color-inescapable-lover-500: #d05877;
  --color-inescapable-lover-600: #b03d5d;
  --color-inescapable-lover-700: #922848;
  --color-inescapable-lover-800: #7f0035;
  --color-inescapable-lover-900: #5f0e29;
  --color-inescapable-lover-950: #3f0518;
  --color-sunken-ship: #002523;
  --color-sunken-ship-50: #e5faf8;
  --color-sunken-ship-100: #d9f1ef;
  --color-sunken-ship-200: #c2dedc;
  --color-sunken-ship-300: #a8c9c6;
  --color-sunken-ship-400: #86aaa7;
  --color-sunken-ship-500: #6a8e8b;
  --color-sunken-ship-600: #507471;
  --color-sunken-ship-700: #3c5c59;
  --color-sunken-ship-800: #2c4846;
  --color-sunken-ship-900: #1f3836;
  --color-sunken-ship-950: #002523;
}

Similar palettes