Shuriken to Martian Cerulean Color Palette

About this palette

Shuriken to Martian Cerulean is a 5-color muted palette: #372E3E (Shuriken), #BD9BA1 (Classy Mauve), #536247 (Cypress), #D9D2E8 (Iron Maiden), #648F88 (Martian Cerulean). It mixes gray, pink, green, turquoise tones and feels cool overall. The strongest text pairing is #372E3E on #D9D2E8 with a contrast ratio of 8.83:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shuriken	rgb(55, 46, 62)	hsl(274, 15%, 21%)
Classy Mauve	rgb(189, 155, 161)	hsl(349, 20%, 67%)
Cypress	rgb(83, 98, 71)	hsl(93, 16%, 33%)
Iron Maiden	rgb(217, 210, 232)	hsl(259, 32%, 87%)
Martian Cerulean	rgb(100, 143, 136)	hsl(170, 18%, 48%)

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.

Aa8.83:1 Very good#372E3E on #D9D2E8
Aa8.83:1 Very good#D9D2E8 on #372E3E
Aa5.16:1 Good#372E3E on #BD9BA1
Aa5.16:1 Good#BD9BA1 on #372E3E
Aa4.47:1 Poor#536247 on #D9D2E8
Aa4.47:1 Poor#D9D2E8 on #536247
Aa3.59:1 Poor#372E3E on #648F88
Aa3.59:1 Poor#648F88 on #372E3E

Color blindness preview

CSS variables

/* Shuriken to Martian Cerulean — https://swatchly.xyz/palette/372e3e-bd9ba1-536247-d9d2e8-648f88 */
:root {
  --shuriken: #372e3e;
  --classy-mauve: #bd9ba1;
  --cypress: #536247;
  --iron-maiden: #d9d2e8;
  --martian-cerulean: #648f88;
}

Tailwind CSS v4

/* Shuriken to Martian Cerulean — https://swatchly.xyz/palette/372e3e-bd9ba1-536247-d9d2e8-648f88 */
@theme {
  --color-shuriken: #372e3e;
  --color-shuriken-50: #f9f2fe;
  --color-shuriken-100: #efe8f5;
  --color-shuriken-200: #dcd4e3;
  --color-shuriken-300: #c6bdce;
  --color-shuriken-400: #a79daf;
  --color-shuriken-500: #8c8194;
  --color-shuriken-600: #716779;
  --color-shuriken-700: #5a5161;
  --color-shuriken-800: #463e4c;
  --color-shuriken-900: #372e3e;
  --color-shuriken-950: #211d25;
  --color-classy-mauve: #bd9ba1;
  --color-classy-mauve-50: #fff3f5;
  --color-classy-mauve-100: #fde7ea;
  --color-classy-mauve-200: #edd2d7;
  --color-classy-mauve-300: #d9bbc0;
  --color-classy-mauve-400: #bd9ba1;
  --color-classy-mauve-500: #a07f85;
  --color-classy-mauve-600: #83656a;
  --color-classy-mauve-700: #6a4e53;
  --color-classy-mauve-800: #543c40;
  --color-classy-mauve-900: #412d31;
  --color-classy-mauve-950: #291b1d;
  --color-cypress: #536247;
  --color-cypress-50: #eff9e8;
  --color-cypress-100: #e4efdc;
  --color-cypress-200: #d1dec7;
  --color-cypress-300: #bbc9b0;
  --color-cypress-400: #9cac8f;
  --color-cypress-500: #819175;
  --color-cypress-600: #68785c;
  --color-cypress-700: #536247;
  --color-cypress-800: #404d36;
  --color-cypress-900: #313b28;
  --color-cypress-950: #1d2517;
  --color-iron-maiden: #d9d2e8;
  --color-iron-maiden-50: #f6f2fe;
  --color-iron-maiden-100: #ece7f5;
  --color-iron-maiden-200: #d9d2e8;
  --color-iron-maiden-300: #c2bccf;
  --color-iron-maiden-400: #a39db1;
  --color-iron-maiden-500: #888296;
  --color-iron-maiden-600: #6e687b;
  --color-iron-maiden-700: #575263;
  --color-iron-maiden-800: #443f4e;
  --color-iron-maiden-900: #35303d;
  --color-iron-maiden-950: #201d27;
  --color-martian-cerulean: #648f88;
  --color-martian-cerulean-50: #e2fbf7;
  --color-martian-cerulean-100: #d6f2ed;
  --color-martian-cerulean-200: #bedfd9;
  --color-martian-cerulean-300: #a3c9c3;
  --color-martian-cerulean-400: #81aba3;
  --color-martian-cerulean-500: #648f88;
  --color-martian-cerulean-600: #4b746e;
  --color-martian-cerulean-700: #375d57;
  --color-martian-cerulean-800: #274944;
  --color-martian-cerulean-900: #1c3934;
  --color-martian-cerulean-950: #0f2320;
}