Mysterious Waters to Lagoon color palette

25444BMysterious Waters B9F3D8Mystery Mint 3E7257Nordic Forest 63BEADTreasured Teal 3B9D98Lagoon

About this palette

Mysterious Waters to Lagoon is a 5-color cool palette: #25444B (Mysterious Waters), #B9F3D8 (Mystery Mint), #3E7257 (Nordic Forest), #63BEAD (Treasured Teal), #3B9D98 (Lagoon). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #25444B on #B9F3D8 with a contrast ratio of 8.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Waters	rgb(37, 68, 75)	hsl(191, 34%, 22%)
Mystery Mint	rgb(185, 243, 216)	hsl(152, 71%, 84%)
Nordic Forest	rgb(62, 114, 87)	hsl(149, 30%, 35%)
Treasured Teal	rgb(99, 190, 173)	hsl(169, 41%, 57%)
Lagoon	rgb(59, 157, 152)	hsl(177, 45%, 42%)

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.

Aa8.41:1 Very good#25444B on #B9F3D8
Aa8.41:1 Very good#B9F3D8 on #25444B
Aa4.73:1 Good#25444B on #63BEAD
Aa4.73:1 Good#63BEAD on #25444B
Aa4.50:1 Good#B9F3D8 on #3E7257
Aa4.50:1 Good#3E7257 on #B9F3D8
Aa3.22:1 Poor#25444B on #3B9D98
Aa3.22:1 Poor#3B9D98 on #25444B

Color blindness preview

CSS variables

/* Mysterious Waters to Lagoon — https://swatchly.xyz/palette/25444b-b9f3d8-3e7257-63bead-3b9d98 */
:root {
  --mysterious-waters: #25444b;
  --mystery-mint: #b9f3d8;
  --nordic-forest: #3e7257;
  --treasured-teal: #63bead;
  --lagoon: #3b9d98;
}

Tailwind CSS v4

/* Mysterious Waters to Lagoon — https://swatchly.xyz/palette/25444b-b9f3d8-3e7257-63bead-3b9d98 */
@theme {
  --color-mysterious-waters: #25444b;
  --color-mysterious-waters-50: #e6f9fe;
  --color-mysterious-waters-100: #daf0f5;
  --color-mysterious-waters-200: #c3dde3;
  --color-mysterious-waters-300: #a9c6cd;
  --color-mysterious-waters-400: #86a7ae;
  --color-mysterious-waters-500: #6a8a92;
  --color-mysterious-waters-600: #506f76;
  --color-mysterious-waters-700: #3b575e;
  --color-mysterious-waters-800: #25444b;
  --color-mysterious-waters-900: #1f3438;
  --color-mysterious-waters-950: #112023;
  --color-mystery-mint: #b9f3d8;
  --color-mystery-mint-50: #d7f8e8;
  --color-mystery-mint-100: #b9f3d8;
  --color-mystery-mint-200: #b1ddc8;
  --color-mystery-mint-300: #98c9b2;
  --color-mystery-mint-400: #76ac93;
  --color-mystery-mint-500: #5a9179;
  --color-mystery-mint-600: #427761;
  --color-mystery-mint-700: #2f614c;
  --color-mystery-mint-800: #204c3a;
  --color-mystery-mint-900: #153b2c;
  --color-mystery-mint-950: #09251a;
  --color-nordic-forest: #3e7257;
  --color-nordic-forest-50: #e0feec;
  --color-nordic-forest-100: #d1f4e0;
  --color-nordic-forest-200: #b8e1c9;
  --color-nordic-forest-300: #9bcab0;
  --color-nordic-forest-400: #77ab8e;
  --color-nordic-forest-500: #598e72;
  --color-nordic-forest-600: #3e7257;
  --color-nordic-forest-700: #2d5b44;
  --color-nordic-forest-800: #1f4834;
  --color-nordic-forest-900: #153827;
  --color-nordic-forest-950: #0a2317;
  --color-treasured-teal: #63bead;
  --color-treasured-teal-50: #e6fff9;
  --color-treasured-teal-100: #cafdf1;
  --color-treasured-teal-200: #b0ede0;
  --color-treasured-teal-300: #92d9cb;
  --color-treasured-teal-400: #63bead;
  --color-treasured-teal-500: #44a090;
  --color-treasured-teal-600: #208374;
  --color-treasured-teal-700: #00695b;
  --color-treasured-teal-800: #005146;
  --color-treasured-teal-900: #003e35;
  --color-treasured-teal-950: #002620;
  --color-lagoon: #3b9d98;
  --color-lagoon-50: #dafffc;
  --color-lagoon-100: #c4faf5;
  --color-lagoon-200: #a8e9e4;
  --color-lagoon-300: #89d5d0;
  --color-lagoon-400: #5fb8b2;
  --color-lagoon-500: #3b9d98;
  --color-lagoon-600: #14807c;
  --color-lagoon-700: #006663;
  --color-lagoon-800: #00504d;
  --color-lagoon-900: #003d3b;
  --color-lagoon-950: #002625;
}