Start generating

Call It a Night to Reading Tea Leaves color palette

46384ECall It a NightFAF7FFGhost WhiteD1C0CEMecha Kitty8F7A87Muted Berry7E585AReading Tea Leaves
Open in generator Export PNG, PDF, ASE…

About this palette

Call It a Night to Reading Tea Leaves is a 5-color muted palette: #46384E (Call It a Night), #FAF7FF (Ghost White), #D1C0CE (Mecha Kitty), #8F7A87 (Muted Berry), #7E585A (Reading Tea Leaves). It mixes purple, white, gray, red tones and feels balanced overall. The strongest text pairing is #46384E on #FAF7FF with a contrast ratio of 10.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Call It a Nightrgb(70, 56, 78)hsl(278, 16%, 26%)
Ghost Whitergb(250, 247, 255)hsl(262, 100%, 98%)
Mecha Kittyrgb(209, 192, 206)hsl(311, 16%, 79%)
Muted Berryrgb(143, 122, 135)hsl(323, 9%, 52%)
Reading Tea Leavesrgb(126, 88, 90)hsl(357, 18%, 42%)

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.

  • Aa10.23:1 Very good#46384E on #FAF7FF
  • Aa10.23:1 Very good#FAF7FF on #46384E
  • Aa6.27:1 Good#46384E on #D1C0CE
  • Aa6.27:1 Good#D1C0CE on #46384E
  • Aa5.78:1 Good#FAF7FF on #7E585A
  • Aa5.78:1 Good#7E585A on #FAF7FF
  • Aa3.74:1 Poor#FAF7FF on #8F7A87
  • Aa3.74:1 Poor#8F7A87 on #FAF7FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Call It a Night to Reading Tea Leaves — https://swatchly.xyz/palette/46384e-faf7ff-d1c0ce-8f7a87-7e585a */
:root {
  --call-it-a-night: #46384e;
  --ghost-white: #faf7ff;
  --mecha-kitty: #d1c0ce;
  --muted-berry: #8f7a87;
  --reading-tea-leaves: #7e585a;
}

Tailwind CSS v4

/* Call It a Night to Reading Tea Leaves — https://swatchly.xyz/palette/46384e-faf7ff-d1c0ce-8f7a87-7e585a */
@theme {
  --color-call-it-a-night: #46384e;
  --color-call-it-a-night-50: #faf1ff;
  --color-call-it-a-night-100: #f1e7f8;
  --color-call-it-a-night-200: #dfd2e6;
  --color-call-it-a-night-300: #c8bad1;
  --color-call-it-a-night-400: #a999b2;
  --color-call-it-a-night-500: #8d7d96;
  --color-call-it-a-night-600: #71627a;
  --color-call-it-a-night-700: #594c61;
  --color-call-it-a-night-800: #46384e;
  --color-call-it-a-night-900: #352b3a;
  --color-call-it-a-night-950: #211a25;
  --color-ghost-white: #faf7ff;
  --color-ghost-white-50: #faf7ff;
  --color-ghost-white-100: #efedf2;
  --color-ghost-white-200: #dbd9de;
  --color-ghost-white-300: #c4c1c8;
  --color-ghost-white-400: #a4a1a8;
  --color-ghost-white-500: #88858c;
  --color-ghost-white-600: #6d6a71;
  --color-ghost-white-700: #56545a;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #343236;
  --color-ghost-white-950: #201f22;
  --color-mecha-kitty: #d1c0ce;
  --color-mecha-kitty-50: #fef4fc;
  --color-mecha-kitty-100: #f5ebf4;
  --color-mecha-kitty-200: #e4d7e2;
  --color-mecha-kitty-300: #d1c0ce;
  --color-mecha-kitty-400: #b0a0ad;
  --color-mecha-kitty-500: #938491;
  --color-mecha-kitty-600: #786975;
  --color-mecha-kitty-700: #5f525d;
  --color-mecha-kitty-800: #4b3f49;
  --color-mecha-kitty-900: #392f37;
  --color-mecha-kitty-950: #241d23;
  --color-muted-berry: #8f7a87;
  --color-muted-berry-50: #fdf0f8;
  --color-muted-berry-100: #f3e4ed;
  --color-muted-berry-200: #e0cfda;
  --color-muted-berry-300: #cab7c3;
  --color-muted-berry-400: #ab96a3;
  --color-muted-berry-500: #8f7a87;
  --color-muted-berry-600: #75616d;
  --color-muted-berry-700: #5e4c57;
  --color-muted-berry-800: #4a3b44;
  --color-muted-berry-900: #3a2d35;
  --color-muted-berry-950: #251b21;
  --color-reading-tea-leaves: #7e585a;
  --color-reading-tea-leaves-50: #fff1f2;
  --color-reading-tea-leaves-100: #fee2e2;
  --color-reading-tea-leaves-200: #edcbcc;
  --color-reading-tea-leaves-300: #d7b1b3;
  --color-reading-tea-leaves-400: #b89091;
  --color-reading-tea-leaves-500: #9b7375;
  --color-reading-tea-leaves-600: #7e585a;
  --color-reading-tea-leaves-700: #654546;
  --color-reading-tea-leaves-800: #513536;
  --color-reading-tea-leaves-900: #402829;
  --color-reading-tea-leaves-950: #291819;
}

Similar palettes