Shuriken to Icy Plains color palette

372F43Shuriken 665E77Plummy 3D525DDark Secret 7B88A4Tempest 9CBBD4Gentle Sky D4E0FFIcy Plains

About this palette

Shuriken to Icy Plains is a 6-color muted, cool palette: #372F43 (Shuriken), #665E77 (Plummy), #3D525D (Dark Secret), #7B88A4 (Tempest), #9CBBD4 (Gentle Sky), #D4E0FF (Icy Plains). It mixes purple, gray, blue tones and feels cool overall. The strongest text pairing is #372F43 on #D4E0FF with a contrast ratio of 9.64:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shuriken	rgb(55, 47, 67)	hsl(264, 18%, 22%)
Plummy	rgb(102, 94, 119)	hsl(259, 12%, 42%)
Dark Secret	rgb(61, 82, 93)	hsl(201, 21%, 30%)
Tempest	rgb(123, 136, 164)	hsl(221, 18%, 56%)
Gentle Sky	rgb(156, 187, 212)	hsl(207, 39%, 72%)
Icy Plains	rgb(212, 224, 255)	hsl(223, 100%, 92%)

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.64:1 Very good#372F43 on #D4E0FF
Aa9.64:1 Very good#D4E0FF on #372F43
Aa6.35:1 Good#372F43 on #9CBBD4
Aa6.35:1 Good#9CBBD4 on #372F43
Aa6.20:1 Good#3D525D on #D4E0FF
Aa6.20:1 Good#D4E0FF on #3D525D
Aa4.63:1 Good#665E77 on #D4E0FF
Aa4.63:1 Good#D4E0FF on #665E77

Color blindness preview

CSS variables

/* Shuriken to Icy Plains — https://swatchly.xyz/palette/372f43-665e77-3d525d-7b88a4-9cbbd4-d4e0ff */
:root {
  --shuriken: #372f43;
  --plummy: #665e77;
  --dark-secret: #3d525d;
  --tempest: #7b88a4;
  --gentle-sky: #9cbbd4;
  --icy-plains: #d4e0ff;
}

Tailwind CSS v4

/* Shuriken to Icy Plains — https://swatchly.xyz/palette/372f43-665e77-3d525d-7b88a4-9cbbd4-d4e0ff */
@theme {
  --color-shuriken: #372f43;
  --color-shuriken-50: #f7f3ff;
  --color-shuriken-100: #eee8f8;
  --color-shuriken-200: #dbd4e7;
  --color-shuriken-300: #c5bcd2;
  --color-shuriken-400: #a69db4;
  --color-shuriken-500: #8a8199;
  --color-shuriken-600: #70677e;
  --color-shuriken-700: #595166;
  --color-shuriken-800: #463f51;
  --color-shuriken-900: #372f43;
  --color-shuriken-950: #221d28;
  --color-plummy: #665e77;
  --color-plummy-50: #f6f3ff;
  --color-plummy-100: #ece6f9;
  --color-plummy-200: #d7d0e6;
  --color-plummy-300: #bfb7d0;
  --color-plummy-400: #9e96b0;
  --color-plummy-500: #827994;
  --color-plummy-600: #665e77;
  --color-plummy-700: #514a5f;
  --color-plummy-800: #3f394c;
  --color-plummy-900: #312c3b;
  --color-plummy-950: #1e1b26;
  --color-dark-secret: #3d525d;
  --color-dark-secret-50: #eaf8ff;
  --color-dark-secret-100: #dfeef6;
  --color-dark-secret-200: #c7d9e3;
  --color-dark-secret-300: #adc2cd;
  --color-dark-secret-400: #8ba2ae;
  --color-dark-secret-500: #6f8591;
  --color-dark-secret-600: #546a75;
  --color-dark-secret-700: #3d525d;
  --color-dark-secret-800: #2f4048;
  --color-dark-secret-900: #233138;
  --color-dark-secret-950: #141e23;
  --color-tempest: #7b88a4;
  --color-tempest-50: #f1f6ff;
  --color-tempest-100: #e3ecff;
  --color-tempest-200: #ced9ef;
  --color-tempest-300: #b6c2dc;
  --color-tempest-400: #96a3bf;
  --color-tempest-500: #7b88a4;
  --color-tempest-600: #616d88;
  --color-tempest-700: #4b566e;
  --color-tempest-800: #394358;
  --color-tempest-900: #2b3345;
  --color-tempest-950: #1a1f2c;
  --color-gentle-sky: #9cbbd4;
  --color-gentle-sky-50: #e2f2ff;
  --color-gentle-sky-100: #d2e7f9;
  --color-gentle-sky-200: #bad2e7;
  --color-gentle-sky-300: #9cbbd4;
  --color-gentle-sky-400: #809db5;
  --color-gentle-sky-500: #66849b;
  --color-gentle-sky-600: #4f6b81;
  --color-gentle-sky-700: #3c5569;
  --color-gentle-sky-800: #2d4455;
  --color-gentle-sky-900: #223544;
  --color-gentle-sky-950: #13212c;
  --color-icy-plains: #d4e0ff;
  --color-icy-plains-50: #fafbff;
  --color-icy-plains-100: #eef3ff;
  --color-icy-plains-200: #d4e0ff;
  --color-icy-plains-300: #bec8e1;
  --color-icy-plains-400: #9ca7c2;
  --color-icy-plains-500: #7f8aa6;
  --color-icy-plains-600: #646e89;
  --color-icy-plains-700: #4d566e;
  --color-icy-plains-800: #3a4257;
  --color-icy-plains-900: #2c3244;
  --color-icy-plains-950: #1a1f2c;
}