Memorial Black to Ocean’s Embrace Color Palette

About this palette

Memorial Black to Ocean’s Embrace is a 5-color dark, cool palette: #0B1100 (Memorial Black), #001A34 (Naval Night), #003D52 (Maniac Mansion), #254D51 (Sunken Mystery), #436975 (Ocean’s Embrace). It mixes black, blue, turquoise tones and feels cool overall. The strongest text pairing is #0B1100 on #436975 with a contrast ratio of 3.21:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Memorial Black	rgb(11, 17, 0)	hsl(81, 100%, 3%)
Naval Night	rgb(0, 26, 52)	hsl(210, 100%, 10%)
Maniac Mansion	rgb(0, 61, 82)	hsl(195, 100%, 16%)
Sunken Mystery	rgb(37, 77, 81)	hsl(185, 37%, 23%)
Ocean’s Embrace	rgb(67, 105, 117)	hsl(194, 27%, 36%)

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.

Aa3.21:1 Poor#0B1100 on #436975
Aa3.21:1 Poor#436975 on #0B1100

Color blindness preview

CSS variables

/* Memorial Black to Ocean’s Embrace — https://swatchly.xyz/palette/0b1100-001a34-003d52-254d51-436975 */
:root {
  --memorial-black: #0b1100;
  --naval-night: #001a34;
  --maniac-mansion: #003d52;
  --sunken-mystery: #254d51;
  --ocean-s-embrace: #436975;
}

Tailwind CSS v4

/* Memorial Black to Ocean’s Embrace — https://swatchly.xyz/palette/0b1100-001a34-003d52-254d51-436975 */
@theme {
  --color-memorial-black: #0b1100;
  --color-memorial-black-50: #f2f8e8;
  --color-memorial-black-100: #e8eedc;
  --color-memorial-black-200: #d3dbc6;
  --color-memorial-black-300: #bcc5ad;
  --color-memorial-black-400: #9ca68b;
  --color-memorial-black-500: #7d876c;
  --color-memorial-black-600: #606950;
  --color-memorial-black-700: #474f39;
  --color-memorial-black-800: #323827;
  --color-memorial-black-900: #212618;
  --color-memorial-black-950: #0b1100;
  --color-naval-night: #001a34;
  --color-naval-night-50: #eef6ff;
  --color-naval-night-100: #ddedff;
  --color-naval-night-200: #c2daf5;
  --color-naval-night-300: #a8c4e2;
  --color-naval-night-400: #86a5c5;
  --color-naval-night-500: #6988a9;
  --color-naval-night-600: #4f6c8b;
  --color-naval-night-700: #3a5470;
  --color-naval-night-800: #294057;
  --color-naval-night-900: #1c2f42;
  --color-naval-night-950: #001a34;
  --color-maniac-mansion: #003d52;
  --color-maniac-mansion-50: #e9f8ff;
  --color-maniac-mansion-100: #d3f1ff;
  --color-maniac-mansion-200: #b7def2;
  --color-maniac-mansion-300: #9bc9de;
  --color-maniac-mansion-400: #78abc2;
  --color-maniac-mansion-500: #5c90a8;
  --color-maniac-mansion-600: #43768c;
  --color-maniac-mansion-700: #2f5f74;
  --color-maniac-mansion-800: #214c5e;
  --color-maniac-mansion-900: #003d52;
  --color-maniac-mansion-950: #0a2632;
  --color-sunken-mystery: #254d51;
  --color-sunken-mystery-50: #e3fafd;
  --color-sunken-mystery-100: #d7f1f4;
  --color-sunken-mystery-200: #bfdee2;
  --color-sunken-mystery-300: #a5c9cd;
  --color-sunken-mystery-400: #83abaf;
  --color-sunken-mystery-500: #679195;
  --color-sunken-mystery-600: #4e767a;
  --color-sunken-mystery-700: #3b5f63;
  --color-sunken-mystery-800: #254d51;
  --color-sunken-mystery-900: #1f3b3e;
  --color-sunken-mystery-950: #102527;
  --color-ocean-s-embrace: #436975;
  --color-ocean-s-embrace-50: #e7f9ff;
  --color-ocean-s-embrace-100: #d5eff7;
  --color-ocean-s-embrace-200: #bbdae4;
  --color-ocean-s-embrace-300: #9fc2ce;
  --color-ocean-s-embrace-400: #7ba2ae;
  --color-ocean-s-embrace-500: #5e8591;
  --color-ocean-s-embrace-600: #436975;
  --color-ocean-s-embrace-700: #32535e;
  --color-ocean-s-embrace-800: #25414a;
  --color-ocean-s-embrace-900: #1a333a;
  --color-ocean-s-embrace-950: #0e2025;
}