Start generating

Moonless Mystery to Bellini color palette

1D2636Moonless Mystery2F3C65Nightlife864F2EGingerbread849866Sleepy HollowAEC08CNileF4CBB5Bellini
Open in generator Export PNG, PDF, ASE…

About this palette

Moonless Mystery to Bellini is a 6-color earthy palette: #1D2636 (Moonless Mystery), #2F3C65 (Nightlife), #864F2E (Gingerbread), #849866 (Sleepy Hollow), #AEC08C (Nile), #F4CBB5 (Bellini). It mixes gray, blue, brown, green, orange tones and feels cool overall. The strongest text pairing is #1D2636 on #F4CBB5 with a contrast ratio of 10.17:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Moonless Mysteryrgb(29, 38, 54)hsl(218, 30%, 16%)
Nightlifergb(47, 60, 101)hsl(226, 36%, 29%)
Gingerbreadrgb(134, 79, 46)hsl(23, 49%, 35%)
Sleepy Hollowrgb(132, 152, 102)hsl(84, 20%, 50%)
Nilergb(174, 192, 140)hsl(81, 29%, 65%)
Bellinirgb(244, 203, 181)hsl(21, 74%, 83%)

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.17:1 Very good#1D2636 on #F4CBB5
  • Aa10.17:1 Very good#F4CBB5 on #1D2636
  • Aa7.75:1 Very good#1D2636 on #AEC08C
  • Aa7.75:1 Very good#AEC08C on #1D2636
  • Aa7.19:1 Very good#2F3C65 on #F4CBB5
  • Aa7.19:1 Very good#F4CBB5 on #2F3C65
  • Aa5.48:1 Good#2F3C65 on #AEC08C
  • Aa5.48:1 Good#AEC08C on #2F3C65

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Moonless Mystery to Bellini — https://swatchly.xyz/palette/1d2636-2f3c65-864f2e-849866-aec08c-f4cbb5 */
:root {
  --moonless-mystery: #1d2636;
  --nightlife: #2f3c65;
  --gingerbread: #864f2e;
  --sleepy-hollow: #849866;
  --nile: #aec08c;
  --bellini: #f4cbb5;
}

Tailwind CSS v4

/* Moonless Mystery to Bellini — https://swatchly.xyz/palette/1d2636-2f3c65-864f2e-849866-aec08c-f4cbb5 */
@theme {
  --color-moonless-mystery: #1d2636;
  --color-moonless-mystery-50: #f0f5ff;
  --color-moonless-mystery-100: #e4ecf9;
  --color-moonless-mystery-200: #cfd8e8;
  --color-moonless-mystery-300: #b7c1d4;
  --color-moonless-mystery-400: #97a2b6;
  --color-moonless-mystery-500: #7d889c;
  --color-moonless-mystery-600: #646f82;
  --color-moonless-mystery-700: #505a6b;
  --color-moonless-mystery-800: #3f4857;
  --color-moonless-mystery-900: #313946;
  --color-moonless-mystery-950: #1d2636;
  --color-nightlife: #2f3c65;
  --color-nightlife-50: #f1f5ff;
  --color-nightlife-100: #e3ebff;
  --color-nightlife-200: #c9d7fc;
  --color-nightlife-300: #b0bfea;
  --color-nightlife-400: #8e9fcd;
  --color-nightlife-500: #7282b1;
  --color-nightlife-600: #586793;
  --color-nightlife-700: #435077;
  --color-nightlife-800: #2f3c65;
  --color-nightlife-900: #252e4a;
  --color-nightlife-950: #151c30;
  --color-gingerbread: #864f2e;
  --color-gingerbread-50: #fff2eb;
  --color-gingerbread-100: #ffe5d7;
  --color-gingerbread-200: #fdceb4;
  --color-gingerbread-300: #ecb79a;
  --color-gingerbread-400: #d29877;
  --color-gingerbread-500: #b87d5c;
  --color-gingerbread-600: #9d6443;
  --color-gingerbread-700: #864f2e;
  --color-gingerbread-800: #6b3c20;
  --color-gingerbread-900: #542d15;
  --color-gingerbread-950: #371b09;
  --color-sleepy-hollow: #849866;
  --color-sleepy-hollow-50: #f0fce0;
  --color-sleepy-hollow-100: #e7f5d5;
  --color-sleepy-hollow-200: #d4e3be;
  --color-sleepy-hollow-300: #bdcfa4;
  --color-sleepy-hollow-400: #9eb282;
  --color-sleepy-hollow-500: #849866;
  --color-sleepy-hollow-600: #687b4b;
  --color-sleepy-hollow-700: #516235;
  --color-sleepy-hollow-800: #3e4d25;
  --color-sleepy-hollow-900: #2e3b19;
  --color-sleepy-hollow-950: #1b240c;
  --color-nile: #aec08c;
  --color-nile-50: #eaf6d6;
  --color-nile-100: #deebc8;
  --color-nile-200: #c8d6ad;
  --color-nile-300: #aec08c;
  --color-nile-400: #91a270;
  --color-nile-500: #778856;
  --color-nile-600: #5f6f3f;
  --color-nile-700: #4b592e;
  --color-nile-800: #3b4620;
  --color-nile-900: #2d3716;
  --color-nile-950: #1b220b;
  --color-bellini: #f4cbb5;
  --color-bellini-50: #fff0e8;
  --color-bellini-100: #fde3d5;
  --color-bellini-200: #f4cbb5;
  --color-bellini-300: #d9b6a4;
  --color-bellini-400: #bc9783;
  --color-bellini-500: #a17c67;
  --color-bellini-600: #85624f;
  --color-bellini-700: #6c4d3b;
  --color-bellini-800: #573b2c;
  --color-bellini-900: #442d20;
  --color-bellini-950: #2b1b11;
}

Similar palettes