Shuriken to Seven Seas Color Palette

About this palette

Shuriken to Seven Seas is a 5-color muted palette: #322F40 (Shuriken), #C6A194 (Cashmere Clay), #CACDBA (Tropical Fog), #607882 (Night Rendezvous), #445E68 (Seven Seas). It mixes gray, orange tones and feels warm overall. The strongest text pairing is #322F40 on #CACDBA with a contrast ratio of 8.01:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shuriken	rgb(50, 47, 64)	hsl(251, 15%, 22%)
Cashmere Clay	rgb(198, 161, 148)	hsl(16, 30%, 68%)
Tropical Fog	rgb(202, 205, 186)	hsl(69, 16%, 77%)
Night Rendezvous	rgb(96, 120, 130)	hsl(198, 15%, 44%)
Seven Seas	rgb(68, 94, 104)	hsl(197, 21%, 34%)

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.01:1 Very good#322F40 on #CACDBA
Aa8.01:1 Very good#CACDBA on #322F40
Aa5.52:1 Good#322F40 on #C6A194
Aa5.52:1 Good#C6A194 on #322F40
Aa4.25:1 Poor#CACDBA on #445E68
Aa4.25:1 Poor#445E68 on #CACDBA

Color blindness preview

CSS variables

/* Shuriken to Seven Seas — https://swatchly.xyz/palette/322f40-c6a194-cacdba-607882-445e68 */
:root {
  --shuriken: #322f40;
  --cashmere-clay: #c6a194;
  --tropical-fog: #cacdba;
  --night-rendezvous: #607882;
  --seven-seas: #445e68;
}

Tailwind CSS v4

/* Shuriken to Seven Seas — https://swatchly.xyz/palette/322f40-c6a194-cacdba-607882-445e68 */
@theme {
  --color-shuriken: #322f40;
  --color-shuriken-50: #f5f3ff;
  --color-shuriken-100: #ebe9f7;
  --color-shuriken-200: #d7d5e5;
  --color-shuriken-300: #c1bed1;
  --color-shuriken-400: #a19eb2;
  --color-shuriken-500: #868397;
  --color-shuriken-600: #6b687b;
  --color-shuriken-700: #555263;
  --color-shuriken-800: #423f4e;
  --color-shuriken-900: #322f40;
  --color-shuriken-950: #1e1d26;
  --color-cashmere-clay: #c6a194;
  --color-cashmere-clay-50: #fff6f3;
  --color-cashmere-clay-100: #ffebe4;
  --color-cashmere-clay-200: #f3d7cd;
  --color-cashmere-clay-300: #e0c1b6;
  --color-cashmere-clay-400: #c6a194;
  --color-cashmere-clay-500: #a88478;
  --color-cashmere-clay-600: #8a685c;
  --color-cashmere-clay-700: #705146;
  --color-cashmere-clay-800: #583e34;
  --color-cashmere-clay-900: #442e26;
  --color-cashmere-clay-950: #2b1b15;
  --color-tropical-fog: #cacdba;
  --color-tropical-fog-50: #fafbf1;
  --color-tropical-fog-100: #f1f3e8;
  --color-tropical-fog-200: #dfe1d4;
  --color-tropical-fog-300: #cacdba;
  --color-tropical-fog-400: #a9ab9a;
  --color-tropical-fog-500: #8c8e7d;
  --color-tropical-fog-600: #707261;
  --color-tropical-fog-700: #585a4a;
  --color-tropical-fog-800: #434538;
  --color-tropical-fog-900: #323429;
  --color-tropical-fog-950: #1f2018;
  --color-night-rendezvous: #607882;
  --color-night-rendezvous-50: #e9f8fe;
  --color-night-rendezvous-100: #e0f0f7;
  --color-night-rendezvous-200: #cbdee6;
  --color-night-rendezvous-300: #b4c9d3;
  --color-night-rendezvous-400: #94acb6;
  --color-night-rendezvous-500: #79919c;
  --color-night-rendezvous-600: #607882;
  --color-night-rendezvous-700: #4a5f69;
  --color-night-rendezvous-800: #374b53;
  --color-night-rendezvous-900: #293940;
  --color-night-rendezvous-950: #182328;
  --color-seven-seas: #445e68;
  --color-seven-seas-50: #e8f8ff;
  --color-seven-seas-100: #ddeff6;
  --color-seven-seas-200: #c7dce5;
  --color-seven-seas-300: #afc7d1;
  --color-seven-seas-400: #8ea9b3;
  --color-seven-seas-500: #738e99;
  --color-seven-seas-600: #5a747e;
  --color-seven-seas-700: #445e68;
  --color-seven-seas-800: #344952;
  --color-seven-seas-900: #263940;
  --color-seven-seas-950: #162328;
}