Inkblot to Over the Moon Color Palette

About this palette

Inkblot to Over the Moon is a 5-color muted palette: #3B404C (Inkblot), #8B8699 (Dusty Chimney), #726878 (Rum), #F8EBF2 (Just Pink Enough), #A8B4D6 (Over the Moon). It mixes gray, white, blue tones and feels cool overall. The strongest text pairing is #3B404C on #F8EBF2 with a contrast ratio of 8.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Inkblot	rgb(59, 64, 76)	hsl(222, 13%, 26%)
Dusty Chimney	rgb(139, 134, 153)	hsl(256, 9%, 56%)
Rum	rgb(114, 104, 120)	hsl(278, 7%, 44%)
Just Pink Enough	rgb(248, 235, 242)	hsl(328, 48%, 95%)
Over the Moon	rgb(168, 180, 214)	hsl(224, 36%, 75%)

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.97:1 Very good#3B404C on #F8EBF2
Aa8.97:1 Very good#F8EBF2 on #3B404C
Aa5.02:1 Good#3B404C on #A8B4D6
Aa5.02:1 Good#A8B4D6 on #3B404C
Aa4.58:1 Good#726878 on #F8EBF2
Aa4.58:1 Good#F8EBF2 on #726878
Aa3.04:1 Poor#8B8699 on #F8EBF2
Aa3.04:1 Poor#F8EBF2 on #8B8699

Color blindness preview

CSS variables

/* Inkblot to Over the Moon — https://swatchly.xyz/palette/3b404c-8b8699-726878-f8ebf2-a8b4d6 */
:root {
  --inkblot: #3b404c;
  --dusty-chimney: #8b8699;
  --rum: #726878;
  --just-pink-enough: #f8ebf2;
  --over-the-moon: #a8b4d6;
}

Tailwind CSS v4

/* Inkblot to Over the Moon — https://swatchly.xyz/palette/3b404c-8b8699-726878-f8ebf2-a8b4d6 */
@theme {
  --color-inkblot: #3b404c;
  --color-inkblot-50: #f1f5fd;
  --color-inkblot-100: #e7ebf4;
  --color-inkblot-200: #d3d7e2;
  --color-inkblot-300: #bbc0cd;
  --color-inkblot-400: #9ba1ae;
  --color-inkblot-500: #7f8592;
  --color-inkblot-600: #656a77;
  --color-inkblot-700: #4e535f;
  --color-inkblot-800: #3b404c;
  --color-inkblot-900: #2d3139;
  --color-inkblot-950: #1b1e24;
  --color-dusty-chimney: #8b8699;
  --color-dusty-chimney-50: #f7f4ff;
  --color-dusty-chimney-100: #edeaf7;
  --color-dusty-chimney-200: #dad7e6;
  --color-dusty-chimney-300: #c5c0d1;
  --color-dusty-chimney-400: #a6a1b4;
  --color-dusty-chimney-500: #8b8699;
  --color-dusty-chimney-600: #706b7d;
  --color-dusty-chimney-700: #595465;
  --color-dusty-chimney-800: #45414f;
  --color-dusty-chimney-900: #35323e;
  --color-dusty-chimney-950: #201e27;
  --color-rum: #726878;
  --color-rum-50: #f9f2fd;
  --color-rum-100: #efe8f4;
  --color-rum-200: #dcd4e1;
  --color-rum-300: #c7bdcc;
  --color-rum-400: #a89dae;
  --color-rum-500: #8d8293;
  --color-rum-600: #726878;
  --color-rum-700: #5b5260;
  --color-rum-800: #473f4c;
  --color-rum-900: #37303b;
  --color-rum-950: #221d25;
  --color-just-pink-enough: #f8ebf2;
  --color-just-pink-enough-50: #fdf6fa;
  --color-just-pink-enough-100: #f8ebf2;
  --color-just-pink-enough-200: #e1d8dd;
  --color-just-pink-enough-300: #cbc0c6;
  --color-just-pink-enough-400: #aba0a6;
  --color-just-pink-enough-500: #8f848a;
  --color-just-pink-enough-600: #74696f;
  --color-just-pink-enough-700: #5c5257;
  --color-just-pink-enough-800: #483f44;
  --color-just-pink-enough-900: #383034;
  --color-just-pink-enough-950: #231d20;
  --color-over-the-moon: #a8b4d6;
  --color-over-the-moon-50: #e9efff;
  --color-over-the-moon-100: #dae2fa;
  --color-over-the-moon-200: #c3cde8;
  --color-over-the-moon-300: #a8b4d6;
  --color-over-the-moon-400: #8c97b7;
  --color-over-the-moon-500: #737e9d;
  --color-over-the-moon-600: #5b6583;
  --color-over-the-moon-700: #48516c;
  --color-over-the-moon-800: #384057;
  --color-over-the-moon-900: #2b3246;
  --color-over-the-moon-950: #1a1f2d;
}