Martian Cerulean to Sunken Mystery color palette

5D928AMartian Cerulean DEECFBCelestial Cathedral 4E6B68Dark Forest 9BB3D1Mont Blanc B5D6DEPale Whale 254F5BSunken Mystery

Open in generator Export PNG, PDF, ASE…

About this palette

Martian Cerulean to Sunken Mystery is a 6-color muted, cool palette: #5D928A (Martian Cerulean), #DEECFB (Celestial Cathedral), #4E6B68 (Dark Forest), #9BB3D1 (Mont Blanc), #B5D6DE (Pale Whale), #254F5B (Sunken Mystery). It mixes turquoise, white, gray, blue tones and feels cool overall. The strongest text pairing is #DEECFB on #254F5B with a contrast ratio of 7.45:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Martian Cerulean	rgb(93, 146, 138)	hsl(171, 22%, 47%)
Celestial Cathedral	rgb(222, 236, 251)	hsl(211, 78%, 93%)
Dark Forest	rgb(78, 107, 104)	hsl(174, 16%, 36%)
Mont Blanc	rgb(155, 179, 209)	hsl(213, 37%, 71%)
Pale Whale	rgb(181, 214, 222)	hsl(192, 38%, 79%)
Sunken Mystery	rgb(37, 79, 91)	hsl(193, 42%, 25%)

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.

Aa7.45:1 Very good#DEECFB on #254F5B
Aa7.45:1 Very good#254F5B on #DEECFB
Aa5.81:1 Good#B5D6DE on #254F5B
Aa5.81:1 Good#254F5B on #B5D6DE
Aa4.82:1 Good#DEECFB on #4E6B68
Aa4.82:1 Good#4E6B68 on #DEECFB
Aa4.16:1 Poor#9BB3D1 on #254F5B
Aa4.16:1 Poor#254F5B on #9BB3D1

Color blindness preview

CSS variables

/* Martian Cerulean to Sunken Mystery — https://swatchly.xyz/palette/5d928a-deecfb-4e6b68-9bb3d1-b5d6de-254f5b */
:root {
  --martian-cerulean: #5d928a;
  --celestial-cathedral: #deecfb;
  --dark-forest: #4e6b68;
  --mont-blanc: #9bb3d1;
  --pale-whale: #b5d6de;
  --sunken-mystery: #254f5b;
}

Tailwind CSS v4

/* Martian Cerulean to Sunken Mystery — https://swatchly.xyz/palette/5d928a-deecfb-4e6b68-9bb3d1-b5d6de-254f5b */
@theme {
  --color-martian-cerulean: #5d928a;
  --color-martian-cerulean-50: #dffdf7;
  --color-martian-cerulean-100: #d2f4ee;
  --color-martian-cerulean-200: #b9e1da;
  --color-martian-cerulean-300: #9eccc4;
  --color-martian-cerulean-400: #7aada5;
  --color-martian-cerulean-500: #5d928a;
  --color-martian-cerulean-600: #43776f;
  --color-martian-cerulean-700: #2f5f59;
  --color-martian-cerulean-800: #204b45;
  --color-martian-cerulean-900: #153a35;
  --color-martian-cerulean-950: #0a2421;
  --color-celestial-cathedral: #deecfb;
  --color-celestial-cathedral-50: #eef5fe;
  --color-celestial-cathedral-100: #deecfb;
  --color-celestial-cathedral-200: #ced8e3;
  --color-celestial-cathedral-300: #b6c2ce;
  --color-celestial-cathedral-400: #96a3b0;
  --color-celestial-cathedral-500: #7b8795;
  --color-celestial-cathedral-600: #616d7a;
  --color-celestial-cathedral-700: #4c5762;
  --color-celestial-cathedral-800: #3a434d;
  --color-celestial-cathedral-900: #2c343c;
  --color-celestial-cathedral-950: #1a2026;
  --color-dark-forest: #4e6b68;
  --color-dark-forest-50: #e8f9f7;
  --color-dark-forest-100: #dbefec;
  --color-dark-forest-200: #c3dbd8;
  --color-dark-forest-300: #a8c3c0;
  --color-dark-forest-400: #86a3a0;
  --color-dark-forest-500: #698783;
  --color-dark-forest-600: #4e6b68;
  --color-dark-forest-700: #3c5552;
  --color-dark-forest-800: #2d4341;
  --color-dark-forest-900: #213432;
  --color-dark-forest-950: #13201f;
  --color-mont-blanc: #9bb3d1;
  --color-mont-blanc-50: #f8fbff;
  --color-mont-blanc-100: #ecf4ff;
  --color-mont-blanc-200: #d3e4f9;
  --color-mont-blanc-300: #bcd0e8;
  --color-mont-blanc-400: #9bb3d1;
  --color-mont-blanc-500: #7e95b1;
  --color-mont-blanc-600: #617793;
  --color-mont-blanc-700: #495e77;
  --color-mont-blanc-800: #36485e;
  --color-mont-blanc-900: #273648;
  --color-mont-blanc-950: #16202d;
  --color-pale-whale: #b5d6de;
  --color-pale-whale-50: #e0f4f8;
  --color-pale-whale-100: #d3e9ee;
  --color-pale-whale-200: #b5d6de;
  --color-pale-whale-300: #a4c0c7;
  --color-pale-whale-400: #84a2aa;
  --color-pale-whale-500: #6a8890;
  --color-pale-whale-600: #526f76;
  --color-pale-whale-700: #3e5960;
  --color-pale-whale-800: #2f474c;
  --color-pale-whale-900: #22373b;
  --color-pale-whale-950: #132225;
  --color-sunken-mystery: #254f5b;
  --color-sunken-mystery-50: #e6f9ff;
  --color-sunken-mystery-100: #d5f1fa;
  --color-sunken-mystery-200: #bddee8;
  --color-sunken-mystery-300: #a4c9d5;
  --color-sunken-mystery-400: #82acb9;
  --color-sunken-mystery-500: #67919e;
  --color-sunken-mystery-600: #4e7784;
  --color-sunken-mystery-700: #3a616d;
  --color-sunken-mystery-800: #254f5b;
  --color-sunken-mystery-900: #1e3d45;
  --color-sunken-mystery-950: #10262d;
}