Start generating

Chocolate Castle to Moor-Monster color palette

432514Chocolate Castle9E4C3DPicante8591E6PerrywinkleB9C6FFNight SnowAEE8CEMint-o-licious154E2EMoor-Monster
Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Castle to Moor-Monster is a 6-color cool palette: #432514 (Chocolate Castle), #9E4C3D (Picante), #8591E6 (Perrywinkle), #B9C6FF (Night Snow), #AEE8CE (Mint-o-licious), #154E2E (Moor-Monster). It mixes brown, red, purple, blue, turquoise, green tones and feels cool overall. The strongest text pairing is #432514 on #AEE8CE with a contrast ratio of 10.07:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Chocolate Castlergb(67, 37, 20)hsl(22, 54%, 17%)
Picantergb(158, 76, 61)hsl(9, 44%, 43%)
Perrywinklergb(133, 145, 230)hsl(233, 66%, 71%)
Night Snowrgb(185, 198, 255)hsl(229, 100%, 86%)
Mint-o-liciousrgb(174, 232, 206)hsl(153, 56%, 80%)
Moor-Monsterrgb(21, 78, 46)hsl(146, 58%, 19%)

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.07:1 Very good#432514 on #AEE8CE
  • Aa10.07:1 Very good#AEE8CE on #432514
  • Aa8.32:1 Very good#432514 on #B9C6FF
  • Aa8.32:1 Very good#B9C6FF on #432514
  • Aa7.05:1 Very good#AEE8CE on #154E2E
  • Aa7.05:1 Very good#154E2E on #AEE8CE
  • Aa5.82:1 Good#B9C6FF on #154E2E
  • Aa5.82:1 Good#154E2E on #B9C6FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Chocolate Castle to Moor-Monster — https://swatchly.xyz/palette/432514-9e4c3d-8591e6-b9c6ff-aee8ce-154e2e */
:root {
  --chocolate-castle: #432514;
  --picante: #9e4c3d;
  --perrywinkle: #8591e6;
  --night-snow: #b9c6ff;
  --mint-o-licious: #aee8ce;
  --moor-monster: #154e2e;
}

Tailwind CSS v4

/* Chocolate Castle to Moor-Monster — https://swatchly.xyz/palette/432514-9e4c3d-8591e6-b9c6ff-aee8ce-154e2e */
@theme {
  --color-chocolate-castle: #432514;
  --color-chocolate-castle-50: #fff2ec;
  --color-chocolate-castle-100: #ffe5d8;
  --color-chocolate-castle-200: #eed1c1;
  --color-chocolate-castle-300: #dab9a7;
  --color-chocolate-castle-400: #bc9885;
  --color-chocolate-castle-500: #9f7b68;
  --color-chocolate-castle-600: #82604e;
  --color-chocolate-castle-700: #684a39;
  --color-chocolate-castle-800: #513729;
  --color-chocolate-castle-900: #432514;
  --color-chocolate-castle-950: #26170f;
  --color-picante: #9e4c3d;
  --color-picante-50: #fff2ef;
  --color-picante-100: #ffe3dd;
  --color-picante-200: #ffc7bb;
  --color-picante-300: #f7a898;
  --color-picante-400: #da8474;
  --color-picante-500: #bc6757;
  --color-picante-600: #9e4c3d;
  --color-picante-700: #81392c;
  --color-picante-800: #68291e;
  --color-picante-900: #531e15;
  --color-picante-950: #36100a;
  --color-perrywinkle: #8591e6;
  --color-perrywinkle-50: #eef1ff;
  --color-perrywinkle-100: #e0e5ff;
  --color-perrywinkle-200: #c5ceff;
  --color-perrywinkle-300: #a7b4ff;
  --color-perrywinkle-400: #8591e6;
  --color-perrywinkle-500: #6c77c9;
  --color-perrywinkle-600: #555eac;
  --color-perrywinkle-700: #42498f;
  --color-perrywinkle-800: #333876;
  --color-perrywinkle-900: #272b5f;
  --color-perrywinkle-950: #171a40;
  --color-night-snow: #b9c6ff;
  --color-night-snow-50: #f8f9ff;
  --color-night-snow-100: #edf0ff;
  --color-night-snow-200: #d5ddff;
  --color-night-snow-300: #b9c6ff;
  --color-night-snow-400: #99a5d9;
  --color-night-snow-500: #7c88bd;
  --color-night-snow-600: #616c9f;
  --color-night-snow-700: #4b5482;
  --color-night-snow-800: #394068;
  --color-night-snow-900: #2a3051;
  --color-night-snow-950: #191d35;
  --color-mint-o-licious: #aee8ce;
  --color-mint-o-licious-50: #e0fff0;
  --color-mint-o-licious-100: #d3f6e6;
  --color-mint-o-licious-200: #aee8ce;
  --color-mint-o-licious-300: #9fcfb9;
  --color-mint-o-licious-400: #7ab098;
  --color-mint-o-licious-500: #5d947d;
  --color-mint-o-licious-600: #437963;
  --color-mint-o-licious-700: #2f614d;
  --color-mint-o-licious-800: #204c3b;
  --color-mint-o-licious-900: #153b2c;
  --color-mint-o-licious-950: #09251b;
  --color-moor-monster: #154e2e;
  --color-moor-monster-50: #dfffe8;
  --color-moor-monster-100: #d2f6dd;
  --color-moor-monster-200: #bae4c6;
  --color-moor-monster-300: #9ecead;
  --color-moor-monster-400: #7ab08c;
  --color-moor-monster-500: #5d9470;
  --color-moor-monster-600: #447957;
  --color-moor-monster-700: #306142;
  --color-moor-monster-800: #154e2e;
  --color-moor-monster-900: #163b25;
  --color-moor-monster-950: #0a2515;
}

Similar palettes