Shuriken to Misty Harbour Color Palette

About this palette

Shuriken to Misty Harbour is a 4-color muted, cool, monochromatic palette: #2C354C (Shuriken), #8998B0 (Moon Veil), #C2D4F7 (Frozen Periwinkle), #657596 (Misty Harbour). It mixes blue tones and feels cool overall. The strongest text pairing is #2C354C on #C2D4F7 with a contrast ratio of 8.17:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shuriken	rgb(44, 53, 76)	hsl(223, 27%, 24%)
Moon Veil	rgb(137, 152, 176)	hsl(217, 20%, 61%)
Frozen Periwinkle	rgb(194, 212, 247)	hsl(220, 77%, 86%)
Misty Harbour	rgb(101, 117, 150)	hsl(220, 20%, 49%)

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.17:1 Very good#2C354C on #C2D4F7
Aa8.17:1 Very good#C2D4F7 on #2C354C
Aa4.17:1 Poor#2C354C on #8998B0
Aa4.17:1 Poor#8998B0 on #2C354C
Aa3.10:1 Poor#C2D4F7 on #657596
Aa3.10:1 Poor#657596 on #C2D4F7

Color blindness preview

CSS variables

/* Shuriken to Misty Harbour — https://swatchly.xyz/palette/2c354c-8998b0-c2d4f7-657596 */
:root {
  --shuriken: #2c354c;
  --moon-veil: #8998b0;
  --frozen-periwinkle: #c2d4f7;
  --misty-harbour: #657596;
}

Tailwind CSS v4

/* Shuriken to Misty Harbour — https://swatchly.xyz/palette/2c354c-8998b0-c2d4f7-657596 */
@theme {
  --color-shuriken: #2c354c;
  --color-shuriken-50: #f1f5ff;
  --color-shuriken-100: #e3ebfe;
  --color-shuriken-200: #ced7ed;
  --color-shuriken-300: #b6c1d9;
  --color-shuriken-400: #97a2bd;
  --color-shuriken-500: #7c87a2;
  --color-shuriken-600: #636d87;
  --color-shuriken-700: #4e576e;
  --color-shuriken-800: #3c4459;
  --color-shuriken-900: #2c354c;
  --color-shuriken-950: #1c212e;
  --color-moon-veil: #8998b0;
  --color-moon-veil-50: #eaf2ff;
  --color-moon-veil-100: #dce6f7;
  --color-moon-veil-200: #c5d1e5;
  --color-moon-veil-300: #abb9cf;
  --color-moon-veil-400: #8998b0;
  --color-moon-veil-500: #707f96;
  --color-moon-veil-600: #59667c;
  --color-moon-veil-700: #455165;
  --color-moon-veil-800: #354051;
  --color-moon-veil-900: #293240;
  --color-moon-veil-950: #19202a;
  --color-frozen-periwinkle: #c2d4f7;
  --color-frozen-periwinkle-50: #ecf3ff;
  --color-frozen-periwinkle-100: #dce8ff;
  --color-frozen-periwinkle-200: #c2d4f7;
  --color-frozen-periwinkle-300: #afbedc;
  --color-frozen-periwinkle-400: #8f9fbf;
  --color-frozen-periwinkle-500: #7485a5;
  --color-frozen-periwinkle-600: #5b6b89;
  --color-frozen-periwinkle-700: #475570;
  --color-frozen-periwinkle-800: #36425a;
  --color-frozen-periwinkle-900: #293347;
  --color-frozen-periwinkle-950: #181f2e;
  --color-misty-harbour: #657596;
  --color-misty-harbour-50: #f0f5ff;
  --color-misty-harbour-100: #e4edff;
  --color-misty-harbour-200: #cedbf6;
  --color-misty-harbour-300: #b7c6e5;
  --color-misty-harbour-400: #98a8ca;
  --color-misty-harbour-500: #7e8eb0;
  --color-misty-harbour-600: #657596;
  --color-misty-harbour-700: #4e5d7b;
  --color-misty-harbour-800: #3b4862;
  --color-misty-harbour-900: #2c374d;
  --color-misty-harbour-950: #1a2232;
}