Sunken Ship to Mysterious Blue color palette

0B2122Sunken Ship D1E2FFPuffy Cloud 5F3402Chocolate Fantasies C79C7BFrench Oak 447887Mysterious Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Sunken Ship to Mysterious Blue is a 5-color muted, vintage palette: #0B2122 (Sunken Ship), #D1E2FF (Puffy Cloud), #5F3402 (Chocolate Fantasies), #C79C7B (French Oak), #447887 (Mysterious Blue). It mixes gray, blue, brown, orange tones and feels balanced overall. The strongest text pairing is #0B2122 on #D1E2FF with a contrast ratio of 12.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Ship	rgb(11, 33, 34)	hsl(183, 51%, 9%)
Puffy Cloud	rgb(209, 226, 255)	hsl(218, 100%, 91%)
Chocolate Fantasies	rgb(95, 52, 2)	hsl(32, 96%, 19%)
French Oak	rgb(199, 156, 123)	hsl(26, 40%, 63%)
Mysterious Blue	rgb(68, 120, 135)	hsl(193, 33%, 40%)

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.78:1 Super#0B2122 on #D1E2FF
Aa12.78:1 Super#D1E2FF on #0B2122
Aa8.10:1 Very good#D1E2FF on #5F3402
Aa8.10:1 Very good#5F3402 on #D1E2FF
Aa6.75:1 Good#0B2122 on #C79C7B
Aa6.75:1 Good#C79C7B on #0B2122
Aa4.28:1 Poor#5F3402 on #C79C7B
Aa4.28:1 Poor#C79C7B on #5F3402

Color blindness preview

CSS variables

/* Sunken Ship to Mysterious Blue — https://swatchly.xyz/palette/0b2122-d1e2ff-5f3402-c79c7b-447887 */
:root {
  --sunken-ship: #0b2122;
  --puffy-cloud: #d1e2ff;
  --chocolate-fantasies: #5f3402;
  --french-oak: #c79c7b;
  --mysterious-blue: #447887;
}

Tailwind CSS v4

/* Sunken Ship to Mysterious Blue — https://swatchly.xyz/palette/0b2122-d1e2ff-5f3402-c79c7b-447887 */
@theme {
  --color-sunken-ship: #0b2122;
  --color-sunken-ship-50: #eaf8f9;
  --color-sunken-ship-100: #dfefef;
  --color-sunken-ship-200: #c9dcdd;
  --color-sunken-ship-300: #b0c6c7;
  --color-sunken-ship-400: #8fa7a8;
  --color-sunken-ship-500: #738b8c;
  --color-sunken-ship-600: #597071;
  --color-sunken-ship-700: #435959;
  --color-sunken-ship-800: #324545;
  --color-sunken-ship-900: #253435;
  --color-sunken-ship-950: #0b2122;
  --color-puffy-cloud: #d1e2ff;
  --color-puffy-cloud-50: #fafcff;
  --color-puffy-cloud-100: #edf4ff;
  --color-puffy-cloud-200: #d1e2ff;
  --color-puffy-cloud-300: #bcc9e1;
  --color-puffy-cloud-400: #99a8c2;
  --color-puffy-cloud-500: #7c8ba6;
  --color-puffy-cloud-600: #616f88;
  --color-puffy-cloud-700: #4a576e;
  --color-puffy-cloud-800: #374356;
  --color-puffy-cloud-900: #2a3344;
  --color-puffy-cloud-950: #191f2b;
  --color-chocolate-fantasies: #5f3402;
  --color-chocolate-fantasies-50: #fff3e9;
  --color-chocolate-fantasies-100: #ffe6d2;
  --color-chocolate-fantasies-200: #f6cfae;
  --color-chocolate-fantasies-300: #e3b791;
  --color-chocolate-fantasies-400: #c6956c;
  --color-chocolate-fantasies-500: #aa794e;
  --color-chocolate-fantasies-600: #8c5f35;
  --color-chocolate-fantasies-700: #724922;
  --color-chocolate-fantasies-800: #5f3402;
  --color-chocolate-fantasies-900: #47290b;
  --color-chocolate-fantasies-950: #2d1804;
  --color-french-oak: #c79c7b;
  --color-french-oak-50: #fff5ed;
  --color-french-oak-100: #ffe9d9;
  --color-french-oak-200: #f4d3bb;
  --color-french-oak-300: #e2bca0;
  --color-french-oak-400: #c79c7b;
  --color-french-oak-500: #a98060;
  --color-french-oak-600: #8c6546;
  --color-french-oak-700: #724e32;
  --color-french-oak-800: #5b3c23;
  --color-french-oak-900: #472d17;
  --color-french-oak-950: #2d1a0b;
  --color-mysterious-blue: #447887;
  --color-mysterious-blue-50: #e6f9ff;
  --color-mysterious-blue-100: #d2f2fd;
  --color-mysterious-blue-200: #b9e1ed;
  --color-mysterious-blue-300: #9fcbd9;
  --color-mysterious-blue-400: #7badbc;
  --color-mysterious-blue-500: #5e92a2;
  --color-mysterious-blue-600: #447887;
  --color-mysterious-blue-700: #30606d;
  --color-mysterious-blue-800: #204b57;
  --color-mysterious-blue-900: #153a44;
  --color-mysterious-blue-950: #09242b;
}