Start generating

Nightwalker to Dreamy Candy Forest color palette

211C3ENightwalker759600Green ThumbF5F2A2Thunderdome630CB7RoyaltyB695FFDreamy Candy Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Nightwalker to Dreamy Candy Forest is a 5-color cool palette: #211C3E (Nightwalker), #759600 (Green Thumb), #F5F2A2 (Thunderdome), #630CB7 (Royalty), #B695FF (Dreamy Candy Forest). It mixes purple, green, yellow tones and feels cool overall. The strongest text pairing is #211C3E on #F5F2A2 with a contrast ratio of 13.92:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightwalkerrgb(33, 28, 62)hsl(249, 38%, 18%)
Green Thumbrgb(117, 150, 0)hsl(73, 100%, 29%)
Thunderdomergb(245, 242, 162)hsl(58, 81%, 80%)
Royaltyrgb(99, 12, 183)hsl(271, 88%, 38%)
Dreamy Candy Forestrgb(182, 149, 255)hsl(259, 100%, 79%)

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.

  • Aa13.92:1 Super#211C3E on #F5F2A2
  • Aa13.92:1 Super#F5F2A2 on #211C3E
  • Aa7.99:1 Very good#F5F2A2 on #630CB7
  • Aa7.99:1 Very good#630CB7 on #F5F2A2
  • Aa6.72:1 Good#211C3E on #B695FF
  • Aa6.72:1 Good#B695FF on #211C3E
  • Aa4.71:1 Good#211C3E on #759600
  • Aa4.71:1 Good#759600 on #211C3E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightwalker to Dreamy Candy Forest — https://swatchly.xyz/palette/211c3e-759600-f5f2a2-630cb7-b695ff */
:root {
  --nightwalker: #211c3e;
  --green-thumb: #759600;
  --thunderdome: #f5f2a2;
  --royalty: #630cb7;
  --dreamy-candy-forest: #b695ff;
}

Tailwind CSS v4

/* Nightwalker to Dreamy Candy Forest — https://swatchly.xyz/palette/211c3e-759600-f5f2a2-630cb7-b695ff */
@theme {
  --color-nightwalker: #211c3e;
  --color-nightwalker-50: #f4f4ff;
  --color-nightwalker-100: #e9e9ff;
  --color-nightwalker-200: #d5d3f5;
  --color-nightwalker-300: #bebce2;
  --color-nightwalker-400: #9f9cc6;
  --color-nightwalker-500: #8481ab;
  --color-nightwalker-600: #6b678f;
  --color-nightwalker-700: #555276;
  --color-nightwalker-800: #434060;
  --color-nightwalker-900: #34314c;
  --color-nightwalker-950: #211c3e;
  --color-green-thumb: #759600;
  --color-green-thumb-50: #ebffc6;
  --color-green-thumb-100: #dff7b0;
  --color-green-thumb-200: #c9e590;
  --color-green-thumb-300: #b1d06d;
  --color-green-thumb-400: #90b23c;
  --color-green-thumb-500: #759600;
  --color-green-thumb-600: #5e7900;
  --color-green-thumb-700: #4a6000;
  --color-green-thumb-800: #394b00;
  --color-green-thumb-900: #2b3900;
  --color-green-thumb-950: #1a2400;
  --color-thunderdome: #f5f2a2;
  --color-thunderdome-50: #fbfad0;
  --color-thunderdome-100: #f5f2a2;
  --color-thunderdome-200: #dfdda4;
  --color-thunderdome-300: #c9c685;
  --color-thunderdome-400: #aaa65c;
  --color-thunderdome-500: #8e8a3c;
  --color-thunderdome-600: #736f20;
  --color-thunderdome-700: #5c5807;
  --color-thunderdome-800: #484500;
  --color-thunderdome-900: #373500;
  --color-thunderdome-950: #232000;
  --color-royalty: #630cb7;
  --color-royalty-50: #f6f3ff;
  --color-royalty-100: #ede7ff;
  --color-royalty-200: #dbcdff;
  --color-royalty-300: #c7afff;
  --color-royalty-400: #ac81ff;
  --color-royalty-500: #9556f4;
  --color-royalty-600: #7938d1;
  --color-royalty-700: #630cb7;
  --color-royalty-800: #4d0f8f;
  --color-royalty-900: #3c0473;
  --color-royalty-950: #26014d;
  --color-dreamy-candy-forest: #b695ff;
  --color-dreamy-candy-forest-50: #f9f7ff;
  --color-dreamy-candy-forest-100: #f2eeff;
  --color-dreamy-candy-forest-200: #e2d8ff;
  --color-dreamy-candy-forest-300: #cfbdff;
  --color-dreamy-candy-forest-400: #b695ff;
  --color-dreamy-candy-forest-500: #9978de;
  --color-dreamy-candy-forest-600: #7c5bbe;
  --color-dreamy-candy-forest-700: #64439f;
  --color-dreamy-candy-forest-800: #4e3181;
  --color-dreamy-candy-forest-900: #3c2266;
  --color-dreamy-candy-forest-950: #251242;
}

Similar palettes