Crystal Lake to Ahoy! Blue color palette

8BB8C6Crystal Lake 2E5D44Herbes de Provence 003C3DRich Black 45AAA5Twilight Meadow AFEAD9Water Leaf 0C81A1Ahoy! Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Crystal Lake to Ahoy! Blue is a 6-color cool palette: #8BB8C6 (Crystal Lake), #2E5D44 (Herbes de Provence), #003C3D (Rich Black), #45AAA5 (Twilight Meadow), #AFEAD9 (Water Leaf), #0C81A1 (Ahoy! Blue). It mixes blue, green, turquoise tones and feels cool overall. The strongest text pairing is #003C3D on #AFEAD9 with a contrast ratio of 9.10:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crystal Lake	rgb(139, 184, 198)	hsl(194, 34%, 66%)
Herbes de Provence	rgb(46, 93, 68)	hsl(148, 34%, 27%)
Rich Black	rgb(0, 60, 61)	hsl(181, 100%, 12%)
Twilight Meadow	rgb(69, 170, 165)	hsl(177, 42%, 47%)
Water Leaf	rgb(175, 234, 217)	hsl(163, 58%, 80%)
Ahoy! Blue	rgb(12, 129, 161)	hsl(193, 86%, 34%)

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.10:1 Very good#003C3D on #AFEAD9
Aa9.10:1 Very good#AFEAD9 on #003C3D
Aa5.70:1 Good#8BB8C6 on #003C3D
Aa5.70:1 Good#003C3D on #8BB8C6
Aa5.64:1 Good#2E5D44 on #AFEAD9
Aa5.64:1 Good#AFEAD9 on #2E5D44
Aa4.40:1 Poor#003C3D on #45AAA5
Aa4.40:1 Poor#45AAA5 on #003C3D

Color blindness preview

CSS variables

/* Crystal Lake to Ahoy! Blue — https://swatchly.xyz/palette/8bb8c6-2e5d44-003c3d-45aaa5-afead9-0c81a1 */
:root {
  --crystal-lake: #8bb8c6;
  --herbes-de-provence: #2e5d44;
  --rich-black: #003c3d;
  --twilight-meadow: #45aaa5;
  --water-leaf: #afead9;
  --ahoy-blue: #0c81a1;
}

Tailwind CSS v4

/* Crystal Lake to Ahoy! Blue — https://swatchly.xyz/palette/8bb8c6-2e5d44-003c3d-45aaa5-afead9-0c81a1 */
@theme {
  --color-crystal-lake: #8bb8c6;
  --color-crystal-lake-50: #f3fcff;
  --color-crystal-lake-100: #e0f7ff;
  --color-crystal-lake-200: #c8e8f1;
  --color-crystal-lake-300: #b0d4df;
  --color-crystal-lake-400: #8bb8c6;
  --color-crystal-lake-500: #6e99a7;
  --color-crystal-lake-600: #517c89;
  --color-crystal-lake-700: #3a626e;
  --color-crystal-lake-800: #294c57;
  --color-crystal-lake-900: #1b3a42;
  --color-crystal-lake-950: #0d2329;
  --color-herbes-de-provence: #2e5d44;
  --color-herbes-de-provence-50: #e2fdec;
  --color-herbes-de-provence-100: #d5f4e1;
  --color-herbes-de-provence-200: #bce1cb;
  --color-herbes-de-provence-300: #a1cbb2;
  --color-herbes-de-provence-400: #7dac91;
  --color-herbes-de-provence-500: #609075;
  --color-herbes-de-provence-600: #46745b;
  --color-herbes-de-provence-700: #2e5d44;
  --color-herbes-de-provence-800: #244835;
  --color-herbes-de-provence-900: #193827;
  --color-herbes-de-provence-950: #0c2317;
  --color-rich-black: #003c3d;
  --color-rich-black-50: #dffcfc;
  --color-rich-black-100: #d2f3f3;
  --color-rich-black-200: #b9e0e0;
  --color-rich-black-300: #9ecbcb;
  --color-rich-black-400: #7aacad;
  --color-rich-black-500: #5e9192;
  --color-rich-black-600: #447677;
  --color-rich-black-700: #305f5f;
  --color-rich-black-800: #214b4b;
  --color-rich-black-900: #003c3d;
  --color-rich-black-950: #0a2425;
  --color-twilight-meadow: #45aaa5;
  --color-twilight-meadow-50: #c9fefa;
  --color-twilight-meadow-100: #b7f4ef;
  --color-twilight-meadow-200: #98e0dc;
  --color-twilight-meadow-300: #75cac5;
  --color-twilight-meadow-400: #45aaa5;
  --color-twilight-meadow-500: #23908b;
  --color-twilight-meadow-600: #007571;
  --color-twilight-meadow-700: #005e5a;
  --color-twilight-meadow-800: #004a47;
  --color-twilight-meadow-900: #003a38;
  --color-twilight-meadow-950: #002524;
  --color-water-leaf: #afead9;
  --color-water-leaf-50: #e4fff7;
  --color-water-leaf-100: #d5f7ed;
  --color-water-leaf-200: #afead9;
  --color-water-leaf-300: #a0d0c2;
  --color-water-leaf-400: #7bb1a2;
  --color-water-leaf-500: #5d9586;
  --color-water-leaf-600: #42796b;
  --color-water-leaf-700: #2d6154;
  --color-water-leaf-800: #1e4c41;
  --color-water-leaf-900: #133b31;
  --color-water-leaf-950: #08251e;
  --color-ahoy-blue: #0c81a1;
  --color-ahoy-blue-50: #e8f8ff;
  --color-ahoy-blue-100: #d4f3ff;
  --color-ahoy-blue-200: #a5e6ff;
  --color-ahoy-blue-300: #86d2ef;
  --color-ahoy-blue-400: #5cb5d5;
  --color-ahoy-blue-500: #389bbc;
  --color-ahoy-blue-600: #0c81a1;
  --color-ahoy-blue-700: #006781;
  --color-ahoy-blue-800: #005066;
  --color-ahoy-blue-900: #003d4f;
  --color-ahoy-blue-950: #002632;
}