Start generating

Nightmare to Hard Candy color palette

002711Nightmare6D3331Kenyan Copper5174B5Sail On738EDEOlympic BlueFFBABAHard Candy
Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare to Hard Candy is a 5-color cool, vintage palette: #002711 (Nightmare), #6D3331 (Kenyan Copper), #5174B5 (Sail On), #738EDE (Olympic Blue), #FFBABA (Hard Candy). It mixes green, brown, blue, pink tones and feels cool overall. The strongest text pairing is #002711 on #FFBABA with a contrast ratio of 10.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightmarergb(0, 39, 17)hsl(146, 100%, 8%)
Kenyan Copperrgb(109, 51, 49)hsl(2, 38%, 31%)
Sail Onrgb(81, 116, 181)hsl(219, 40%, 51%)
Olympic Bluergb(115, 142, 222)hsl(225, 62%, 66%)
Hard Candyrgb(255, 186, 186)hsl(0, 100%, 86%)

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.00:1 Very good#002711 on #FFBABA
  • Aa10.00:1 Very good#FFBABA on #002711
  • Aa5.99:1 Good#6D3331 on #FFBABA
  • Aa5.99:1 Good#FFBABA on #6D3331
  • Aa5.12:1 Good#002711 on #738EDE
  • Aa5.12:1 Good#738EDE on #002711
  • Aa3.48:1 Poor#002711 on #5174B5
  • Aa3.48:1 Poor#5174B5 on #002711

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightmare to Hard Candy — https://swatchly.xyz/palette/002711-6d3331-5174b5-738ede-ffbaba */
:root {
  --nightmare: #002711;
  --kenyan-copper: #6d3331;
  --sail-on: #5174b5;
  --olympic-blue: #738ede;
  --hard-candy: #ffbaba;
}

Tailwind CSS v4

/* Nightmare to Hard Candy — https://swatchly.xyz/palette/002711-6d3331-5174b5-738ede-ffbaba */
@theme {
  --color-nightmare: #002711;
  --color-nightmare-50: #e5fceb;
  --color-nightmare-100: #d9f3e0;
  --color-nightmare-200: #c2e1ca;
  --color-nightmare-300: #a8cbb2;
  --color-nightmare-400: #86ad91;
  --color-nightmare-500: #6a9176;
  --color-nightmare-600: #50765c;
  --color-nightmare-700: #3c5e47;
  --color-nightmare-800: #2c4a36;
  --color-nightmare-900: #1f3928;
  --color-nightmare-950: #002711;
  --color-kenyan-copper: #6d3331;
  --color-kenyan-copper-50: #fff2f0;
  --color-kenyan-copper-100: #ffe4e2;
  --color-kenyan-copper-200: #fec8c4;
  --color-kenyan-copper-300: #ecb1ac;
  --color-kenyan-copper-400: #d1908c;
  --color-kenyan-copper-500: #b67571;
  --color-kenyan-copper-600: #995b58;
  --color-kenyan-copper-700: #7f4744;
  --color-kenyan-copper-800: #6d3331;
  --color-kenyan-copper-900: #532826;
  --color-kenyan-copper-950: #361716;
  --color-sail-on: #5174b5;
  --color-sail-on-50: #f0f5ff;
  --color-sail-on-100: #e4edff;
  --color-sail-on-200: #c8dcff;
  --color-sail-on-300: #a8c7ff;
  --color-sail-on-400: #85a8e9;
  --color-sail-on-500: #698ed0;
  --color-sail-on-600: #5174b5;
  --color-sail-on-700: #3b5b97;
  --color-sail-on-800: #2b467b;
  --color-sail-on-900: #1e3562;
  --color-sail-on-950: #102041;
  --color-olympic-blue: #738ede;
  --color-olympic-blue-50: #f4f7ff;
  --color-olympic-blue-100: #e9efff;
  --color-olympic-blue-200: #d1deff;
  --color-olympic-blue-300: #b4c8ff;
  --color-olympic-blue-400: #8ea9f5;
  --color-olympic-blue-500: #738ede;
  --color-olympic-blue-600: #5871be;
  --color-olympic-blue-700: #42579e;
  --color-olympic-blue-800: #304381;
  --color-olympic-blue-900: #223266;
  --color-olympic-blue-950: #131d43;
  --color-hard-candy: #ffbaba;
  --color-hard-candy-50: #ffe9e9;
  --color-hard-candy-100: #ffd9d9;
  --color-hard-candy-200: #ffbaba;
  --color-hard-candy-300: #e4a8a8;
  --color-hard-candy-400: #c88889;
  --color-hard-candy-500: #ad6e6f;
  --color-hard-candy-600: #915657;
  --color-hard-candy-700: #784244;
  --color-hard-candy-800: #613334;
  --color-hard-candy-900: #4d2527;
  --color-hard-candy-950: #321617;
}

Similar palettes