Start generating

Eternal Darkness to Riverbed color palette

102A3EEternal Darkness579D87Lagoon156D6FPine Scented Lagoon194B42Tropical ForestCBEDFFVeiling Waterfalls8FBFBERiverbed
Open in generator Export PNG, PDF, ASE…

About this palette

Eternal Darkness to Riverbed is a 6-color muted, cool palette: #102A3E (Eternal Darkness), #579D87 (Lagoon), #156D6F (Pine Scented Lagoon), #194B42 (Tropical Forest), #CBEDFF (Veiling Waterfalls), #8FBFBE (Riverbed). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #102A3E on #CBEDFF with a contrast ratio of 12.02:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Eternal Darknessrgb(16, 42, 62)hsl(206, 59%, 15%)
Lagoonrgb(87, 157, 135)hsl(161, 29%, 48%)
Pine Scented Lagoonrgb(21, 109, 111)hsl(181, 68%, 26%)
Tropical Forestrgb(25, 75, 66)hsl(169, 50%, 20%)
Veiling Waterfallsrgb(203, 237, 255)hsl(201, 100%, 90%)
Riverbedrgb(143, 191, 190)hsl(179, 27%, 65%)

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.

  • Aa12.02:1 Super#102A3E on #CBEDFF
  • Aa12.02:1 Super#CBEDFF on #102A3E
  • Aa8.04:1 Very good#194B42 on #CBEDFF
  • Aa8.04:1 Very good#CBEDFF on #194B42
  • Aa7.28:1 Very good#102A3E on #8FBFBE
  • Aa7.28:1 Very good#8FBFBE on #102A3E
  • Aa4.96:1 Good#156D6F on #CBEDFF
  • Aa4.96:1 Good#CBEDFF on #156D6F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Eternal Darkness to Riverbed — https://swatchly.xyz/palette/102a3e-579d87-156d6f-194b42-cbedff-8fbfbe */
:root {
  --eternal-darkness: #102a3e;
  --lagoon: #579d87;
  --pine-scented-lagoon: #156d6f;
  --tropical-forest: #194b42;
  --veiling-waterfalls: #cbedff;
  --riverbed: #8fbfbe;
}

Tailwind CSS v4

/* Eternal Darkness to Riverbed — https://swatchly.xyz/palette/102a3e-579d87-156d6f-194b42-cbedff-8fbfbe */
@theme {
  --color-eternal-darkness: #102a3e;
  --color-eternal-darkness-50: #edf7ff;
  --color-eternal-darkness-100: #dbeeff;
  --color-eternal-darkness-200: #c4dbee;
  --color-eternal-darkness-300: #abc5db;
  --color-eternal-darkness-400: #89a5bd;
  --color-eternal-darkness-500: #6f8ca4;
  --color-eternal-darkness-600: #57738a;
  --color-eternal-darkness-700: #445d73;
  --color-eternal-darkness-800: #354b5e;
  --color-eternal-darkness-900: #293d4d;
  --color-eternal-darkness-950: #102a3e;
  --color-lagoon: #579d87;
  --color-lagoon-50: #dffff3;
  --color-lagoon-100: #cff9ea;
  --color-lagoon-200: #b6e8d6;
  --color-lagoon-300: #9bd4c0;
  --color-lagoon-400: #75b7a2;
  --color-lagoon-500: #579d87;
  --color-lagoon-600: #3a806c;
  --color-lagoon-700: #246754;
  --color-lagoon-800: #135141;
  --color-lagoon-900: #073f31;
  --color-lagoon-950: #02271d;
  --color-pine-scented-lagoon: #156d6f;
  --color-pine-scented-lagoon-50: #d5ffff;
  --color-pine-scented-lagoon-100: #c7f6f6;
  --color-pine-scented-lagoon-200: #aee6e6;
  --color-pine-scented-lagoon-300: #93d2d3;
  --color-pine-scented-lagoon-400: #6db6b7;
  --color-pine-scented-lagoon-500: #4e9c9e;
  --color-pine-scented-lagoon-600: #338385;
  --color-pine-scented-lagoon-700: #156d6f;
  --color-pine-scented-lagoon-800: #065658;
  --color-pine-scented-lagoon-900: #004244;
  --color-pine-scented-lagoon-950: #002a2b;
  --color-tropical-forest: #194b42;
  --color-tropical-forest-50: #e0fcf5;
  --color-tropical-forest-100: #d4f3ec;
  --color-tropical-forest-200: #bbe1d8;
  --color-tropical-forest-300: #a0cbc1;
  --color-tropical-forest-400: #7daca2;
  --color-tropical-forest-500: #609186;
  --color-tropical-forest-600: #46766c;
  --color-tropical-forest-700: #325e55;
  --color-tropical-forest-800: #194b42;
  --color-tropical-forest-900: #183932;
  --color-tropical-forest-950: #0c241f;
  --color-veiling-waterfalls: #cbedff;
  --color-veiling-waterfalls-50: #e2f5ff;
  --color-veiling-waterfalls-100: #cbedff;
  --color-veiling-waterfalls-200: #bfd9e6;
  --color-veiling-waterfalls-300: #a7c3d2;
  --color-veiling-waterfalls-400: #86a5b5;
  --color-veiling-waterfalls-500: #6b8a9a;
  --color-veiling-waterfalls-600: #52707f;
  --color-veiling-waterfalls-700: #3e5a68;
  --color-veiling-waterfalls-800: #2e4652;
  --color-veiling-waterfalls-900: #213640;
  --color-veiling-waterfalls-950: #132129;
  --color-riverbed: #8fbfbe;
  --color-riverbed-50: #d9f5f5;
  --color-riverbed-100: #caeae9;
  --color-riverbed-200: #afd6d5;
  --color-riverbed-300: #8fbfbe;
  --color-riverbed-400: #73a1a1;
  --color-riverbed-500: #5a8887;
  --color-riverbed-600: #436f6f;
  --color-riverbed-700: #315a59;
  --color-riverbed-800: #234847;
  --color-riverbed-900: #193939;
  --color-riverbed-950: #0d2423;
}

Similar palettes