Start generating

Ocean’s Embrace to The Count’s Black color palette

236E81Ocean’s Embrace005D41Evergreen203550Midnight Escapade001015Black Knight072029The Count’s Black
Open in generator Export PNG, PDF, ASE…

About this palette

Ocean’s Embrace to The Count’s Black is a 5-color dark, cool palette: #236E81 (Ocean’s Embrace), #005D41 (Evergreen), #203550 (Midnight Escapade), #001015 (Black Knight), #072029 (The Count’s Black). It mixes blue, green, black tones and feels cool overall. The strongest text pairing is #236E81 on #001015 with a contrast ratio of 3.34:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ocean’s Embracergb(35, 110, 129)hsl(192, 57%, 32%)
Evergreenrgb(0, 93, 65)hsl(162, 100%, 18%)
Midnight Escapadergb(32, 53, 80)hsl(214, 43%, 22%)
Black Knightrgb(0, 16, 21)hsl(194, 100%, 4%)
The Count’s Blackrgb(7, 32, 41)hsl(196, 71%, 9%)

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.34:1 Poor#236E81 on #001015
  • Aa3.34:1 Poor#001015 on #236E81

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ocean’s Embrace to The Count’s Black — https://swatchly.xyz/palette/236e81-005d41-203550-001015-072029 */
:root {
  --ocean-s-embrace: #236e81;
  --evergreen: #005d41;
  --midnight-escapade: #203550;
  --black-knight: #001015;
  --the-count-s-black: #072029;
}

Tailwind CSS v4

/* Ocean’s Embrace to The Count’s Black — https://swatchly.xyz/palette/236e81-005d41-203550-001015-072029 */
@theme {
  --color-ocean-s-embrace: #236e81;
  --color-ocean-s-embrace-50: #e6f9ff;
  --color-ocean-s-embrace-100: #c7f2ff;
  --color-ocean-s-embrace-200: #a9deee;
  --color-ocean-s-embrace-300: #8ac7d9;
  --color-ocean-s-embrace-400: #63a7bb;
  --color-ocean-s-embrace-500: #438a9e;
  --color-ocean-s-embrace-600: #236e81;
  --color-ocean-s-embrace-700: #135868;
  --color-ocean-s-embrace-800: #054553;
  --color-ocean-s-embrace-900: #003642;
  --color-ocean-s-embrace-950: #00212a;
  --color-evergreen: #005d41;
  --color-evergreen-50: #dbffee;
  --color-evergreen-100: #caf8e2;
  --color-evergreen-200: #ade5cb;
  --color-evergreen-300: #8eceb1;
  --color-evergreen-400: #67af8f;
  --color-evergreen-500: #479273;
  --color-evergreen-600: #2b7558;
  --color-evergreen-700: #005d41;
  --color-evergreen-800: #074833;
  --color-evergreen-900: #013826;
  --color-evergreen-950: #002316;
  --color-midnight-escapade: #203550;
  --color-midnight-escapade-50: #eff6ff;
  --color-midnight-escapade-100: #dfedff;
  --color-midnight-escapade-200: #c6d9f3;
  --color-midnight-escapade-300: #adc3e0;
  --color-midnight-escapade-400: #8ca4c3;
  --color-midnight-escapade-500: #7189a8;
  --color-midnight-escapade-600: #576e8c;
  --color-midnight-escapade-700: #435873;
  --color-midnight-escapade-800: #32455c;
  --color-midnight-escapade-900: #203550;
  --color-midnight-escapade-950: #16212f;
  --color-black-knight: #001015;
  --color-black-knight-50: #eaf8fc;
  --color-black-knight-100: #dfeef3;
  --color-black-knight-200: #c9dbe1;
  --color-black-knight-300: #b0c5cb;
  --color-black-knight-400: #8fa6ad;
  --color-black-knight-500: #70878d;
  --color-black-knight-600: #53686e;
  --color-black-knight-700: #3b4e53;
  --color-black-knight-800: #28373c;
  --color-black-knight-900: #192428;
  --color-black-knight-950: #001015;
  --color-the-count-s-black: #072029;
  --color-the-count-s-black-50: #e8f8ff;
  --color-the-count-s-black-100: #ddeff6;
  --color-the-count-s-black-200: #c6dce5;
  --color-the-count-s-black-300: #adc5d0;
  --color-the-count-s-black-400: #8ca6b2;
  --color-the-count-s-black-500: #708a96;
  --color-the-count-s-black-600: #566f7a;
  --color-the-count-s-black-700: #415861;
  --color-the-count-s-black-800: #30444c;
  --color-the-count-s-black-900: #22333a;
  --color-the-count-s-black-950: #072029;
}

Similar palettes