Volcanic Island to Shuriken Color Palette

About this palette

Volcanic Island to Shuriken is a 5-color muted palette: #5B5644 (Volcanic Island), #8F6B67 (Chocolate Temptation), #CEE3E6 (Wave Splash), #7CAAB5 (Equanimity), #2C3347 (Shuriken). It mixes gray, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #CEE3E6 on #2C3347 with a contrast ratio of 9.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Volcanic Island	rgb(91, 86, 68)	hsl(47, 14%, 31%)
Chocolate Temptation	rgb(143, 107, 103)	hsl(6, 16%, 48%)
Wave Splash	rgb(206, 227, 230)	hsl(188, 32%, 85%)
Equanimity	rgb(124, 170, 181)	hsl(192, 28%, 60%)
Shuriken	rgb(44, 51, 71)	hsl(224, 23%, 23%)

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.

Aa9.42:1 Very good#CEE3E6 on #2C3347
Aa9.42:1 Very good#2C3347 on #CEE3E6
Aa5.51:1 Good#5B5644 on #CEE3E6
Aa5.51:1 Good#CEE3E6 on #5B5644
Aa4.95:1 Good#7CAAB5 on #2C3347
Aa4.95:1 Good#2C3347 on #7CAAB5
Aa3.53:1 Poor#8F6B67 on #CEE3E6
Aa3.53:1 Poor#CEE3E6 on #8F6B67

Color blindness preview

CSS variables

/* Volcanic Island to Shuriken — https://swatchly.xyz/palette/5b5644-8f6b67-cee3e6-7caab5-2c3347 */
:root {
  --volcanic-island: #5b5644;
  --chocolate-temptation: #8f6b67;
  --wave-splash: #cee3e6;
  --equanimity: #7caab5;
  --shuriken: #2c3347;
}

Tailwind CSS v4

/* Volcanic Island to Shuriken — https://swatchly.xyz/palette/5b5644-8f6b67-cee3e6-7caab5-2c3347 */
@theme {
  --color-volcanic-island: #5b5644;
  --color-volcanic-island-50: #f8f5ea;
  --color-volcanic-island-100: #efebde;
  --color-volcanic-island-200: #dcd8c8;
  --color-volcanic-island-300: #c6c1b0;
  --color-volcanic-island-400: #a7a28f;
  --color-volcanic-island-500: #8c8773;
  --color-volcanic-island-600: #726c5a;
  --color-volcanic-island-700: #5b5644;
  --color-volcanic-island-800: #474334;
  --color-volcanic-island-900: #373327;
  --color-volcanic-island-950: #222017;
  --color-chocolate-temptation: #8f6b67;
  --color-chocolate-temptation-50: #fff2f0;
  --color-chocolate-temptation-100: #ffe7e4;
  --color-chocolate-temptation-200: #f1d3d0;
  --color-chocolate-temptation-300: #dfbdb9;
  --color-chocolate-temptation-400: #c39e9a;
  --color-chocolate-temptation-500: #a98480;
  --color-chocolate-temptation-600: #8f6b67;
  --color-chocolate-temptation-700: #745350;
  --color-chocolate-temptation-800: #5c403d;
  --color-chocolate-temptation-900: #48302d;
  --color-chocolate-temptation-950: #2e1d1b;
  --color-wave-splash: #cee3e6;
  --color-wave-splash-50: #f1fcfe;
  --color-wave-splash-100: #e8f4f5;
  --color-wave-splash-200: #cee3e6;
  --color-wave-splash-300: #b9cacd;
  --color-wave-splash-400: #97aaad;
  --color-wave-splash-500: #7a8d90;
  --color-wave-splash-600: #5f7274;
  --color-wave-splash-700: #495a5c;
  --color-wave-splash-800: #374548;
  --color-wave-splash-900: #293537;
  --color-wave-splash-950: #182122;
  --color-equanimity: #7caab5;
  --color-equanimity-50: #e4faff;
  --color-equanimity-100: #d4f1f8;
  --color-equanimity-200: #bcdee7;
  --color-equanimity-300: #a1c9d2;
  --color-equanimity-400: #7caab5;
  --color-equanimity-500: #618e99;
  --color-equanimity-600: #48737e;
  --color-equanimity-700: #345c65;
  --color-equanimity-800: #254850;
  --color-equanimity-900: #19383f;
  --color-equanimity-950: #0d2328;
  --color-shuriken: #2c3347;
  --color-shuriken-50: #f1f5ff;
  --color-shuriken-100: #e5ebfb;
  --color-shuriken-200: #d0d7ea;
  --color-shuriken-300: #b8c1d6;
  --color-shuriken-400: #99a1b9;
  --color-shuriken-500: #7d869e;
  --color-shuriken-600: #646c82;
  --color-shuriken-700: #4e556a;
  --color-shuriken-800: #3c4354;
  --color-shuriken-900: #2c3347;
  --color-shuriken-950: #1c202a;
}