Start generating

Cold Light of Day to Midnight Pines color palette

00E5EDCold Light of DayA39DFFCold Lips0096A8Oasis636000Forestial Outpost70001EEvil Forces221F00Midnight Pines
Open in generator Export PNG, PDF, ASE…

About this palette

Cold Light of Day to Midnight Pines is a 6-color palette: #00E5ED (Cold Light of Day), #A39DFF (Cold Lips), #0096A8 (Oasis), #636000 (Forestial Outpost), #70001E (Evil Forces), #221F00 (Midnight Pines). It mixes turquoise, purple, brown, red tones and feels balanced overall. The strongest text pairing is #00E5ED on #221F00 with a contrast ratio of 10.63:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cold Light of Dayrgb(0, 229, 237)hsl(182, 100%, 46%)
Cold Lipsrgb(163, 157, 255)hsl(244, 100%, 81%)
Oasisrgb(0, 150, 168)hsl(186, 100%, 33%)
Forestial Outpostrgb(99, 96, 0)hsl(58, 100%, 19%)
Evil Forcesrgb(112, 0, 30)hsl(344, 100%, 22%)
Midnight Pinesrgb(34, 31, 0)hsl(55, 100%, 7%)

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.63:1 Very good#00E5ED on #221F00
  • Aa10.63:1 Very good#221F00 on #00E5ED
  • Aa7.86:1 Very good#00E5ED on #70001E
  • Aa7.86:1 Very good#70001E on #00E5ED
  • Aa6.98:1 Good#A39DFF on #221F00
  • Aa6.98:1 Good#221F00 on #A39DFF
  • Aa5.17:1 Good#A39DFF on #70001E
  • Aa5.17:1 Good#70001E on #A39DFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cold Light of Day to Midnight Pines — https://swatchly.xyz/palette/00e5ed-a39dff-0096a8-636000-70001e-221f00 */
:root {
  --cold-light-of-day: #00e5ed;
  --cold-lips: #a39dff;
  --oasis: #0096a8;
  --forestial-outpost: #636000;
  --evil-forces: #70001e;
  --midnight-pines: #221f00;
}

Tailwind CSS v4

/* Cold Light of Day to Midnight Pines — https://swatchly.xyz/palette/00e5ed-a39dff-0096a8-636000-70001e-221f00 */
@theme {
  --color-cold-light-of-day: #00e5ed;
  --color-cold-light-of-day-50: #ebfeff;
  --color-cold-light-of-day-100: #c8fdff;
  --color-cold-light-of-day-200: #89f3f8;
  --color-cold-light-of-day-300: #00e5ed;
  --color-cold-light-of-day-400: #00c0c6;
  --color-cold-light-of-day-500: #009fa5;
  --color-cold-light-of-day-600: #008084;
  --color-cold-light-of-day-700: #006568;
  --color-cold-light-of-day-800: #004e51;
  --color-cold-light-of-day-900: #003b3d;
  --color-cold-light-of-day-950: #002527;
  --color-cold-lips: #a39dff;
  --color-cold-lips-50: #f8f8ff;
  --color-cold-lips-100: #eeefff;
  --color-cold-lips-200: #dadaff;
  --color-cold-lips-300: #c3c2ff;
  --color-cold-lips-400: #a39dff;
  --color-cold-lips-500: #8780de;
  --color-cold-lips-600: #6b63be;
  --color-cold-lips-700: #544b9f;
  --color-cold-lips-800: #413881;
  --color-cold-lips-900: #312866;
  --color-cold-lips-950: #1d1743;
  --color-oasis: #0096a8;
  --color-oasis-50: #e1faff;
  --color-oasis-100: #c1f6ff;
  --color-oasis-200: #97e6f4;
  --color-oasis-300: #73d1e0;
  --color-oasis-400: #41b2c3;
  --color-oasis-500: #0096a8;
  --color-oasis-600: #007988;
  --color-oasis-700: #00606c;
  --color-oasis-800: #004b55;
  --color-oasis-900: #003a42;
  --color-oasis-950: #00242a;
  --color-forestial-outpost: #636000;
  --color-forestial-outpost-50: #f8f9cd;
  --color-forestial-outpost-100: #efefbe;
  --color-forestial-outpost-200: #dddda4;
  --color-forestial-outpost-300: #c9c886;
  --color-forestial-outpost-400: #acaa5f;
  --color-forestial-outpost-500: #929040;
  --color-forestial-outpost-600: #787625;
  --color-forestial-outpost-700: #636000;
  --color-forestial-outpost-800: #4d4b00;
  --color-forestial-outpost-900: #3b3a00;
  --color-forestial-outpost-950: #252400;
  --color-evil-forces: #70001e;
  --color-evil-forces-50: #fff1f1;
  --color-evil-forces-100: #ffe4e4;
  --color-evil-forces-200: #ffc7c9;
  --color-evil-forces-300: #ffa4a8;
  --color-evil-forces-400: #ea7e85;
  --color-evil-forces-500: #ce626a;
  --color-evil-forces-600: #b14852;
  --color-evil-forces-700: #95343f;
  --color-evil-forces-800: #7c2430;
  --color-evil-forces-900: #70001e;
  --color-evil-forces-950: #450c15;
  --color-midnight-pines: #221f00;
  --color-midnight-pines-50: #f8f7e2;
  --color-midnight-pines-100: #eeedd5;
  --color-midnight-pines-200: #dbd9be;
  --color-midnight-pines-300: #c5c3a4;
  --color-midnight-pines-400: #a6a481;
  --color-midnight-pines-500: #8a8865;
  --color-midnight-pines-600: #706d4c;
  --color-midnight-pines-700: #585638;
  --color-midnight-pines-800: #454328;
  --color-midnight-pines-900: #35331d;
  --color-midnight-pines-950: #221f00;
}

Similar palettes