Pine Scented Lagoon to Hammam Blue color palette

1E6B62Pine Scented Lagoon 275134Moor-Monster 42C3D0Sea Serpent 4C975CEucalyptus 71E0D3Hammam Blue

About this palette

Pine Scented Lagoon to Hammam Blue is a 5-color cool palette: #1E6B62 (Pine Scented Lagoon), #275134 (Moor-Monster), #42C3D0 (Sea Serpent), #4C975C (Eucalyptus), #71E0D3 (Hammam Blue). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #275134 on #71E0D3 with a contrast ratio of 5.75:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Scented Lagoon	rgb(30, 107, 98)	hsl(173, 56%, 27%)
Moor-Monster	rgb(39, 81, 52)	hsl(139, 35%, 24%)
Sea Serpent	rgb(66, 195, 208)	hsl(185, 60%, 54%)
Eucalyptus	rgb(76, 151, 92)	hsl(133, 33%, 45%)
Hammam Blue	rgb(113, 224, 211)	hsl(173, 64%, 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.

Aa5.75:1 Good#275134 on #71E0D3
Aa5.75:1 Good#71E0D3 on #275134
Aa4.30:1 Poor#275134 on #42C3D0
Aa4.30:1 Poor#42C3D0 on #275134
Aa3.99:1 Poor#1E6B62 on #71E0D3
Aa3.99:1 Poor#71E0D3 on #1E6B62

Color blindness preview

CSS variables

/* Pine Scented Lagoon to Hammam Blue — https://swatchly.xyz/palette/1e6b62-275134-42c3d0-4c975c-71e0d3 */
:root {
  --pine-scented-lagoon: #1e6b62;
  --moor-monster: #275134;
  --sea-serpent: #42c3d0;
  --eucalyptus: #4c975c;
  --hammam-blue: #71e0d3;
}

Tailwind CSS v4

/* Pine Scented Lagoon to Hammam Blue — https://swatchly.xyz/palette/1e6b62-275134-42c3d0-4c975c-71e0d3 */
@theme {
  --color-pine-scented-lagoon: #1e6b62;
  --color-pine-scented-lagoon-50: #d8fff8;
  --color-pine-scented-lagoon-100: #caf6ee;
  --color-pine-scented-lagoon-200: #b2e5dd;
  --color-pine-scented-lagoon-300: #96d2c8;
  --color-pine-scented-lagoon-400: #71b5ab;
  --color-pine-scented-lagoon-500: #539b91;
  --color-pine-scented-lagoon-600: #398178;
  --color-pine-scented-lagoon-700: #1e6b62;
  --color-pine-scented-lagoon-800: #12544d;
  --color-pine-scented-lagoon-900: #05413b;
  --color-pine-scented-lagoon-950: #002a25;
  --color-moor-monster: #275134;
  --color-moor-monster-50: #e3fde9;
  --color-moor-monster-100: #d7f4de;
  --color-moor-monster-200: #c0e2c7;
  --color-moor-monster-300: #a6cdb0;
  --color-moor-monster-400: #85af8f;
  --color-moor-monster-500: #699574;
  --color-moor-monster-600: #507a5b;
  --color-moor-monster-700: #3c6347;
  --color-moor-monster-800: #275134;
  --color-moor-monster-900: #203e29;
  --color-moor-monster-950: #112718;
  --color-sea-serpent: #42c3d0;
  --color-sea-serpent-50: #eefdff;
  --color-sea-serpent-100: #d4fbff;
  --color-sea-serpent-200: #a3f0f9;
  --color-sea-serpent-300: #82dee8;
  --color-sea-serpent-400: #42c3d0;
  --color-sea-serpent-500: #0fa4b1;
  --color-sea-serpent-600: #00848e;
  --color-sea-serpent-700: #006871;
  --color-sea-serpent-800: #005057;
  --color-sea-serpent-900: #003d42;
  --color-sea-serpent-950: #002528;
  --color-eucalyptus: #4c975c;
  --color-eucalyptus-50: #deffe2;
  --color-eucalyptus-100: #caf9d0;
  --color-eucalyptus-200: #afe7b7;
  --color-eucalyptus-300: #91d29c;
  --color-eucalyptus-400: #6bb378;
  --color-eucalyptus-500: #4c975c;
  --color-eucalyptus-600: #327c44;
  --color-eucalyptus-700: #1d6431;
  --color-eucalyptus-800: #0e4f22;
  --color-eucalyptus-900: #053e17;
  --color-eucalyptus-950: #01270c;
  --color-hammam-blue: #71e0d3;
  --color-hammam-blue-50: #eafffc;
  --color-hammam-blue-100: #c5fff7;
  --color-hammam-blue-200: #a8efe6;
  --color-hammam-blue-300: #71e0d3;
  --color-hammam-blue-400: #55bdb1;
  --color-hammam-blue-500: #26a094;
  --color-hammam-blue-600: #008177;
  --color-hammam-blue-700: #00665e;
  --color-hammam-blue-800: #004f49;
  --color-hammam-blue-900: #003c37;
  --color-hammam-blue-950: #002622;
}