Start generating

Mythical Night to Icy Plains color palette

1E3265Mythical Night525A16Reptile Revenge687300Topiary GreenB070B0Berries GaloreF093EFDiva MechaCCD9FFIcy Plains
Open in generator Export PNG, PDF, ASE…

About this palette

Mythical Night to Icy Plains is a 6-color cool palette: #1E3265 (Mythical Night), #525A16 (Reptile Revenge), #687300 (Topiary Green), #B070B0 (Berries Galore), #F093EF (Diva Mecha), #CCD9FF (Icy Plains). It mixes blue, green, pink tones and feels cool overall. The strongest text pairing is #1E3265 on #CCD9FF with a contrast ratio of 8.79:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mythical Nightrgb(30, 50, 101)hsl(223, 54%, 26%)
Reptile Revengergb(82, 90, 22)hsl(67, 61%, 22%)
Topiary Greenrgb(104, 115, 0)hsl(66, 100%, 23%)
Berries Galorergb(176, 112, 176)hsl(300, 29%, 56%)
Diva Mechargb(240, 147, 239)hsl(301, 76%, 76%)
Icy Plainsrgb(204, 217, 255)hsl(225, 100%, 90%)

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.

  • Aa8.79:1 Very good#1E3265 on #CCD9FF
  • Aa8.79:1 Very good#CCD9FF on #1E3265
  • Aa5.96:1 Good#1E3265 on #F093EF
  • Aa5.96:1 Good#F093EF on #1E3265
  • Aa5.27:1 Good#525A16 on #CCD9FF
  • Aa5.27:1 Good#CCD9FF on #525A16
  • Aa3.70:1 Poor#687300 on #CCD9FF
  • Aa3.70:1 Poor#CCD9FF on #687300

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mythical Night to Icy Plains — https://swatchly.xyz/palette/1e3265-525a16-687300-b070b0-f093ef-ccd9ff */
:root {
  --mythical-night: #1e3265;
  --reptile-revenge: #525a16;
  --topiary-green: #687300;
  --berries-galore: #b070b0;
  --diva-mecha: #f093ef;
  --icy-plains: #ccd9ff;
}

Tailwind CSS v4

/* Mythical Night to Icy Plains — https://swatchly.xyz/palette/1e3265-525a16-687300-b070b0-f093ef-ccd9ff */
@theme {
  --color-mythical-night: #1e3265;
  --color-mythical-night-50: #f1f5ff;
  --color-mythical-night-100: #e2ebff;
  --color-mythical-night-200: #c5d8ff;
  --color-mythical-night-300: #a8c1f5;
  --color-mythical-night-400: #87a1db;
  --color-mythical-night-500: #6c86c0;
  --color-mythical-night-600: #536ca3;
  --color-mythical-night-700: #405588;
  --color-mythical-night-800: #30436f;
  --color-mythical-night-900: #1e3265;
  --color-mythical-night-950: #14203c;
  --color-reptile-revenge: #525a16;
  --color-reptile-revenge-50: #f3fad5;
  --color-reptile-revenge-100: #e9f0c7;
  --color-reptile-revenge-200: #d4ddab;
  --color-reptile-revenge-300: #bec78e;
  --color-reptile-revenge-400: #9ea869;
  --color-reptile-revenge-500: #838c4b;
  --color-reptile-revenge-600: #687131;
  --color-reptile-revenge-700: #525a16;
  --color-reptile-revenge-800: #404610;
  --color-reptile-revenge-900: #313607;
  --color-reptile-revenge-950: #1e2202;
  --color-topiary-green: #687300;
  --color-topiary-green-50: #f2fbc9;
  --color-topiary-green-100: #e8f2b9;
  --color-topiary-green-200: #d4df9b;
  --color-topiary-green-300: #bdc97a;
  --color-topiary-green-400: #9daa50;
  --color-topiary-green-500: #828e2d;
  --color-topiary-green-600: #687300;
  --color-topiary-green-700: #525b00;
  --color-topiary-green-800: #404700;
  --color-topiary-green-900: #313700;
  --color-topiary-green-950: #1e2200;
  --color-berries-galore: #b070b0;
  --color-berries-galore-50: #fff1fe;
  --color-berries-galore-100: #ffe2fe;
  --color-berries-galore-200: #f9c7f8;
  --color-berries-galore-300: #e7aee6;
  --color-berries-galore-400: #cb8cca;
  --color-berries-galore-500: #b070b0;
  --color-berries-galore-600: #925593;
  --color-berries-galore-700: #773f78;
  --color-berries-galore-800: #5f2e60;
  --color-berries-galore-900: #4b214b;
  --color-berries-galore-950: #301230;
  --color-diva-mecha: #f093ef;
  --color-diva-mecha-50: #ffeafe;
  --color-diva-mecha-100: #ffd8fd;
  --color-diva-mecha-200: #feb5fc;
  --color-diva-mecha-300: #f093ef;
  --color-diva-mecha-400: #ce76ce;
  --color-diva-mecha-500: #b35ab3;
  --color-diva-mecha-600: #964196;
  --color-diva-mecha-700: #7c2e7c;
  --color-diva-mecha-800: #641f65;
  --color-diva-mecha-900: #501451;
  --color-diva-mecha-950: #340935;
  --color-icy-plains: #ccd9ff;
  --color-icy-plains-50: #f4f7ff;
  --color-icy-plains-100: #e7edff;
  --color-icy-plains-200: #ccd9ff;
  --color-icy-plains-300: #b7c2e2;
  --color-icy-plains-400: #96a2c4;
  --color-icy-plains-500: #7b86a9;
  --color-icy-plains-600: #606b8c;
  --color-icy-plains-700: #4b5472;
  --color-icy-plains-800: #39415b;
  --color-icy-plains-900: #2b3248;
  --color-icy-plains-950: #1a1f2e;
}

Similar palettes