Abyssal Waters to Dark Olive Color Palette

About this palette

Abyssal Waters to Dark Olive is a 5-color dark, cool palette: #00545A (Abyssal Waters), #00694E (Into the Green), #120E00 (Memorial Black), #002620 (Nightmare), #353B17 (Dark Olive). It mixes turquoise, black, green tones and feels cool overall. The strongest text pairing is #00694E on #120E00 with a contrast ratio of 2.88:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Abyssal Waters	rgb(0, 84, 90)	hsl(184, 100%, 18%)
Into the Green	rgb(0, 105, 78)	hsl(165, 100%, 21%)
Memorial Black	rgb(18, 14, 0)	hsl(47, 100%, 4%)
Nightmare	rgb(0, 38, 32)	hsl(171, 100%, 7%)
Dark Olive	rgb(53, 59, 23)	hsl(70, 44%, 16%)

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.

Color blindness preview

CSS variables

/* Abyssal Waters to Dark Olive — https://swatchly.xyz/palette/00545a-00694e-120e00-002620-353b17 */
:root {
  --abyssal-waters: #00545a;
  --into-the-green: #00694e;
  --memorial-black: #120e00;
  --nightmare: #002620;
  --dark-olive: #353b17;
}

Tailwind CSS v4

/* Abyssal Waters to Dark Olive — https://swatchly.xyz/palette/00545a-00694e-120e00-002620-353b17 */
@theme {
  --color-abyssal-waters: #00545a;
  --color-abyssal-waters-50: #ddfcff;
  --color-abyssal-waters-100: #cbf4f8;
  --color-abyssal-waters-200: #b1e2e7;
  --color-abyssal-waters-300: #95ced3;
  --color-abyssal-waters-400: #71b1b7;
  --color-abyssal-waters-500: #53979d;
  --color-abyssal-waters-600: #397d83;
  --color-abyssal-waters-700: #25666c;
  --color-abyssal-waters-800: #00545a;
  --color-abyssal-waters-900: #094045;
  --color-abyssal-waters-950: #02292c;
  --color-into-the-green: #00694e;
  --color-into-the-green-50: #dbffef;
  --color-into-the-green-100: #c7f8e3;
  --color-into-the-green-200: #ace7cf;
  --color-into-the-green-300: #8ed3b8;
  --color-into-the-green-400: #67b698;
  --color-into-the-green-500: #479b7d;
  --color-into-the-green-600: #2a8064;
  --color-into-the-green-700: #00694e;
  --color-into-the-green-800: #00523c;
  --color-into-the-green-900: #00402e;
  --color-into-the-green-950: #00281c;
  --color-memorial-black: #120e00;
  --color-memorial-black-50: #f8f6e8;
  --color-memorial-black-100: #efecdc;
  --color-memorial-black-200: #dcd8c6;
  --color-memorial-black-300: #c6c1ad;
  --color-memorial-black-400: #a7a28b;
  --color-memorial-black-500: #87836c;
  --color-memorial-black-600: #696550;
  --color-memorial-black-700: #4f4b39;
  --color-memorial-black-800: #393526;
  --color-memorial-black-900: #262318;
  --color-memorial-black-950: #120e00;
  --color-nightmare: #002620;
  --color-nightmare-50: #e5fbf5;
  --color-nightmare-100: #d9f2ec;
  --color-nightmare-200: #c2dfd8;
  --color-nightmare-300: #a8c9c2;
  --color-nightmare-400: #86aba2;
  --color-nightmare-500: #6a8f87;
  --color-nightmare-600: #50746d;
  --color-nightmare-700: #3c5d56;
  --color-nightmare-800: #2c4943;
  --color-nightmare-900: #203933;
  --color-nightmare-950: #002620;
  --color-dark-olive: #353b17;
  --color-dark-olive-50: #f3f8e1;
  --color-dark-olive-100: #e9efd5;
  --color-dark-olive-200: #d5dcbd;
  --color-dark-olive-300: #bec6a3;
  --color-dark-olive-400: #9fa781;
  --color-dark-olive-500: #858d66;
  --color-dark-olive-600: #6c734e;
  --color-dark-olive-700: #565d3a;
  --color-dark-olive-800: #444a2b;
  --color-dark-olive-900: #353b17;
  --color-dark-olive-950: #212511;
}