Start generating

Midnight Pines to Nile color palette

1B2007Midnight Pines665F7FPlummyF2B9B7Angry Ghost064D5BNocturnal Expedition009DA6BalticB5B67CNile
Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to Nile is a 6-color cool palette: #1B2007 (Midnight Pines), #665F7F (Plummy), #F2B9B7 (Angry Ghost), #064D5B (Nocturnal Expedition), #009DA6 (Baltic), #B5B67C (Nile). It mixes green, purple, pink, blue, turquoise, yellow tones and feels cool overall. The strongest text pairing is #1B2007 on #F2B9B7 with a contrast ratio of 9.87:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Midnight Pinesrgb(27, 32, 7)hsl(72, 64%, 8%)
Plummyrgb(102, 95, 127)hsl(253, 14%, 44%)
Angry Ghostrgb(242, 185, 183)hsl(2, 69%, 83%)
Nocturnal Expeditionrgb(6, 77, 91)hsl(190, 88%, 19%)
Balticrgb(0, 157, 166)hsl(183, 100%, 33%)
Nilergb(181, 182, 124)hsl(61, 28%, 60%)

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.87:1 Very good#1B2007 on #F2B9B7
  • Aa9.87:1 Very good#F2B9B7 on #1B2007
  • Aa7.92:1 Very good#1B2007 on #B5B67C
  • Aa7.92:1 Very good#B5B67C on #1B2007
  • Aa5.58:1 Good#F2B9B7 on #064D5B
  • Aa5.58:1 Good#064D5B on #F2B9B7
  • Aa5.07:1 Good#1B2007 on #009DA6
  • Aa5.07:1 Good#009DA6 on #1B2007

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Midnight Pines to Nile — https://swatchly.xyz/palette/1b2007-665f7f-f2b9b7-064d5b-009da6-b5b67c */
:root {
  --midnight-pines: #1b2007;
  --plummy: #665f7f;
  --angry-ghost: #f2b9b7;
  --nocturnal-expedition: #064d5b;
  --baltic: #009da6;
  --nile: #b5b67c;
}

Tailwind CSS v4

/* Midnight Pines to Nile — https://swatchly.xyz/palette/1b2007-665f7f-f2b9b7-064d5b-009da6-b5b67c */
@theme {
  --color-midnight-pines: #1b2007;
  --color-midnight-pines-50: #f3f8e6;
  --color-midnight-pines-100: #e9eedb;
  --color-midnight-pines-200: #d5dbc4;
  --color-midnight-pines-300: #bec5ab;
  --color-midnight-pines-400: #9ea689;
  --color-midnight-pines-500: #828a6d;
  --color-midnight-pines-600: #686f53;
  --color-midnight-pines-700: #51573f;
  --color-midnight-pines-800: #3f442e;
  --color-midnight-pines-900: #2f3321;
  --color-midnight-pines-950: #1b2007;
  --color-plummy: #665f7f;
  --color-plummy-50: #f5f3ff;
  --color-plummy-100: #ebe6fe;
  --color-plummy-200: #d6d0ec;
  --color-plummy-300: #beb8d7;
  --color-plummy-400: #9e97b8;
  --color-plummy-500: #817a9c;
  --color-plummy-600: #665f7f;
  --color-plummy-700: #514b66;
  --color-plummy-800: #3f3a52;
  --color-plummy-900: #312c40;
  --color-plummy-950: #1e1b29;
  --color-angry-ghost: #f2b9b7;
  --color-angry-ghost-50: #fff8f7;
  --color-angry-ghost-100: #ffeceb;
  --color-angry-ghost-200: #fcd3d2;
  --color-angry-ghost-300: #f2b9b7;
  --color-angry-ghost-400: #cd9998;
  --color-angry-ghost-500: #b07c7a;
  --color-angry-ghost-600: #92605f;
  --color-angry-ghost-700: #774a49;
  --color-angry-ghost-800: #5e3736;
  --color-angry-ghost-900: #492828;
  --color-angry-ghost-950: #2f1817;
  --color-nocturnal-expedition: #064d5b;
  --color-nocturnal-expedition-50: #e5f9ff;
  --color-nocturnal-expedition-100: #cdf3fd;
  --color-nocturnal-expedition-200: #b4e0ec;
  --color-nocturnal-expedition-300: #98cbd9;
  --color-nocturnal-expedition-400: #73adbc;
  --color-nocturnal-expedition-500: #5692a1;
  --color-nocturnal-expedition-600: #3c7786;
  --color-nocturnal-expedition-700: #28606d;
  --color-nocturnal-expedition-800: #064d5b;
  --color-nocturnal-expedition-900: #0e3b45;
  --color-nocturnal-expedition-950: #05252c;
  --color-baltic: #009da6;
  --color-baltic-50: #defdff;
  --color-baltic-100: #bafaff;
  --color-baltic-200: #9aeaf0;
  --color-baltic-300: #77d6dd;
  --color-baltic-400: #44b8c0;
  --color-baltic-500: #009da6;
  --color-baltic-600: #007e86;
  --color-baltic-700: #00646a;
  --color-baltic-800: #004e53;
  --color-baltic-900: #003c40;
  --color-baltic-950: #002528;
  --color-nile: #b5b67c;
  --color-nile-50: #eff0cc;
  --color-nile-100: #e3e4bc;
  --color-nile-200: #cdce9f;
  --color-nile-300: #b5b67c;
  --color-nile-400: #989961;
  --color-nile-500: #808048;
  --color-nile-600: #686833;
  --color-nile-700: #545422;
  --color-nile-800: #434316;
  --color-nile-900: #35350e;
  --color-nile-950: #212105;
}

Similar palettes