Submerged to Monkey Island color palette

517D7ESubmerged 82B1B2Open Seas 281E1FVelvet Black F1D4D7Summer Crush 573938Monkey Island

About this palette

Submerged to Monkey Island is a 5-color muted palette: #517D7E (Submerged), #82B1B2 (Open Seas), #281E1F (Velvet Black), #F1D4D7 (Summer Crush), #573938 (Monkey Island). It mixes turquoise, gray, brown tones and feels cool overall. The strongest text pairing is #281E1F on #F1D4D7 with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Submerged	rgb(81, 125, 126)	hsl(181, 22%, 41%)
Open Seas	rgb(130, 177, 178)	hsl(181, 24%, 60%)
Velvet Black	rgb(40, 30, 31)	hsl(354, 14%, 14%)
Summer Crush	rgb(241, 212, 215)	hsl(354, 51%, 89%)
Monkey Island	rgb(87, 57, 56)	hsl(2, 22%, 28%)

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.

Aa11.68:1 Very good#281E1F on #F1D4D7
Aa11.68:1 Very good#F1D4D7 on #281E1F
Aa7.39:1 Very good#F1D4D7 on #573938
Aa7.39:1 Very good#573938 on #F1D4D7
Aa6.85:1 Good#82B1B2 on #281E1F
Aa6.85:1 Good#281E1F on #82B1B2
Aa4.34:1 Poor#82B1B2 on #573938
Aa4.34:1 Poor#573938 on #82B1B2

Color blindness preview

CSS variables

/* Submerged to Monkey Island — https://swatchly.xyz/palette/517d7e-82b1b2-281e1f-f1d4d7-573938 */
:root {
  --submerged: #517d7e;
  --open-seas: #82b1b2;
  --velvet-black: #281e1f;
  --summer-crush: #f1d4d7;
  --monkey-island: #573938;
}

Tailwind CSS v4

/* Submerged to Monkey Island — https://swatchly.xyz/palette/517d7e-82b1b2-281e1f-f1d4d7-573938 */
@theme {
  --color-submerged: #517d7e;
  --color-submerged-50: #e2fbfb;
  --color-submerged-100: #d7f3f4;
  --color-submerged-200: #c1e2e3;
  --color-submerged-300: #a8cecf;
  --color-submerged-400: #86b1b1;
  --color-submerged-500: #6a9798;
  --color-submerged-600: #517d7e;
  --color-submerged-700: #3b6465;
  --color-submerged-800: #2a4e4f;
  --color-submerged-900: #1d3c3d;
  --color-submerged-950: #0f2626;
  --color-open-seas: #82b1b2;
  --color-open-seas-50: #e3fdfd;
  --color-open-seas-100: #d8f5f5;
  --color-open-seas-200: #c1e3e4;
  --color-open-seas-300: #a7cecf;
  --color-open-seas-400: #82b1b2;
  --color-open-seas-500: #669495;
  --color-open-seas-600: #4b7879;
  --color-open-seas-700: #366061;
  --color-open-seas-800: #264b4c;
  --color-open-seas-900: #1a393a;
  --color-open-seas-950: #0d2324;
  --color-velvet-black: #281e1f;
  --color-velvet-black-50: #fbf3f3;
  --color-velvet-black-100: #f2e9e9;
  --color-velvet-black-200: #dfd4d5;
  --color-velvet-black-300: #c9bebf;
  --color-velvet-black-400: #ab9e9f;
  --color-velvet-black-500: #908384;
  --color-velvet-black-600: #75696a;
  --color-velvet-black-700: #5e5354;
  --color-velvet-black-800: #4a4142;
  --color-velvet-black-900: #3a3233;
  --color-velvet-black-950: #281e1f;
  --color-summer-crush: #f1d4d7;
  --color-summer-crush-50: #fff6f7;
  --color-summer-crush-100: #fceaec;
  --color-summer-crush-200: #f1d4d7;
  --color-summer-crush-300: #d6bec0;
  --color-summer-crush-400: #b79da0;
  --color-summer-crush-500: #9b8184;
  --color-summer-crush-600: #7f6669;
  --color-summer-crush-700: #664f52;
  --color-summer-crush-800: #503d3f;
  --color-summer-crush-900: #3e2e30;
  --color-summer-crush-950: #271c1d;
  --color-monkey-island: #573938;
  --color-monkey-island-50: #fff1f1;
  --color-monkey-island-100: #fde5e3;
  --color-monkey-island-200: #ecd0ce;
  --color-monkey-island-300: #d8b8b6;
  --color-monkey-island-400: #ba9896;
  --color-monkey-island-500: #9f7c7b;
  --color-monkey-island-600: #836261;
  --color-monkey-island-700: #6a4d4b;
  --color-monkey-island-800: #573938;
  --color-monkey-island-900: #422c2b;
  --color-monkey-island-950: #2a1b1a;
}