Hay Day to Dark Prom Queen color palette

DCCE85Hay Day 00B3D5Aquarius BB4699Magenta Memoir 006E85Waterworld 423C00Dark Olive 2B152ADark Prom Queen

Open in generator Export PNG, PDF, ASE…

About this palette

Hay Day to Dark Prom Queen is a 6-color palette: #DCCE85 (Hay Day), #00B3D5 (Aquarius), #BB4699 (Magenta Memoir), #006E85 (Waterworld), #423C00 (Dark Olive), #2B152A (Dark Prom Queen). It mixes yellow, blue, red, brown, purple tones and feels balanced overall. The strongest text pairing is #DCCE85 on #2B152A with a contrast ratio of 10.62:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hay Day	rgb(220, 206, 133)	hsl(50, 55%, 69%)
Aquarius	rgb(0, 179, 213)	hsl(190, 100%, 42%)
Magenta Memoir	rgb(187, 70, 153)	hsl(317, 46%, 50%)
Waterworld	rgb(0, 110, 133)	hsl(190, 100%, 26%)
Dark Olive	rgb(66, 60, 0)	hsl(55, 100%, 13%)
Dark Prom Queen	rgb(43, 21, 42)	hsl(303, 34%, 13%)

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.62:1 Very good#DCCE85 on #2B152A
Aa10.62:1 Very good#2B152A on #DCCE85
Aa7.03:1 Very good#DCCE85 on #423C00
Aa7.03:1 Very good#423C00 on #DCCE85
Aa6.76:1 Good#00B3D5 on #2B152A
Aa6.76:1 Good#2B152A on #00B3D5
Aa4.48:1 Poor#00B3D5 on #423C00
Aa4.48:1 Poor#423C00 on #00B3D5

Color blindness preview

CSS variables

/* Hay Day to Dark Prom Queen — https://swatchly.xyz/palette/dcce85-00b3d5-bb4699-006e85-423c00-2b152a */
:root {
  --hay-day: #dcce85;
  --aquarius: #00b3d5;
  --magenta-memoir: #bb4699;
  --waterworld: #006e85;
  --dark-olive: #423c00;
  --dark-prom-queen: #2b152a;
}

Tailwind CSS v4

/* Hay Day to Dark Prom Queen — https://swatchly.xyz/palette/dcce85-00b3d5-bb4699-006e85-423c00-2b152a */
@theme {
  --color-hay-day: #dcce85;
  --color-hay-day-50: #f7efc4;
  --color-hay-day-100: #ece3b3;
  --color-hay-day-200: #dcce85;
  --color-hay-day-300: #c5b97a;
  --color-hay-day-400: #a99c56;
  --color-hay-day-500: #90823a;
  --color-hay-day-600: #766920;
  --color-hay-day-700: #60540c;
  --color-hay-day-800: #4d4200;
  --color-hay-day-900: #3c3300;
  --color-hay-day-950: #251f00;
  --color-aquarius: #00b3d5;
  --color-aquarius-50: #e5f9ff;
  --color-aquarius-100: #caf3ff;
  --color-aquarius-200: #8ee6ff;
  --color-aquarius-300: #62d1ef;
  --color-aquarius-400: #00b3d5;
  --color-aquarius-500: #0095b2;
  --color-aquarius-600: #007890;
  --color-aquarius-700: #005f73;
  --color-aquarius-800: #004a5a;
  --color-aquarius-900: #003946;
  --color-aquarius-950: #00242d;
  --color-magenta-memoir: #bb4699;
  --color-magenta-memoir-50: #ffedf8;
  --color-magenta-memoir-100: #ffdaf1;
  --color-magenta-memoir-200: #ffb7e5;
  --color-magenta-memoir-300: #fa8dd6;
  --color-magenta-memoir-400: #db66b7;
  --color-magenta-memoir-500: #bb4699;
  --color-magenta-memoir-600: #9d2e7f;
  --color-magenta-memoir-700: #821b67;
  --color-magenta-memoir-800: #6a0d53;
  --color-magenta-memoir-900: #550542;
  --color-magenta-memoir-950: #39012b;
  --color-waterworld: #006e85;
  --color-waterworld-50: #e6f9ff;
  --color-waterworld-100: #c7f2ff;
  --color-waterworld-200: #a1dff3;
  --color-waterworld-300: #80c8de;
  --color-waterworld-400: #55a8c0;
  --color-waterworld-500: #318ba2;
  --color-waterworld-600: #006e85;
  --color-waterworld-700: #00576a;
  --color-waterworld-800: #004454;
  --color-waterworld-900: #003541;
  --color-waterworld-950: #00212a;
  --color-dark-olive: #423c00;
  --color-dark-olive-50: #faf7d8;
  --color-dark-olive-100: #f0edca;
  --color-dark-olive-200: #dddab0;
  --color-dark-olive-300: #c6c292;
  --color-dark-olive-400: #a6a16c;
  --color-dark-olive-500: #8a844e;
  --color-dark-olive-600: #6e6835;
  --color-dark-olive-700: #555021;
  --color-dark-olive-800: #423c00;
  --color-dark-olive-900: #312e0b;
  --color-dark-olive-950: #1e1b04;
  --color-dark-prom-queen: #2b152a;
  --color-dark-prom-queen-50: #fff0fe;
  --color-dark-prom-queen-100: #f7e4f6;
  --color-dark-prom-queen-200: #e6cfe4;
  --color-dark-prom-queen-300: #d1b8cf;
  --color-dark-prom-queen-400: #b397b1;
  --color-dark-prom-queen-500: #977c95;
  --color-dark-prom-queen-600: #7c617a;
  --color-dark-prom-queen-700: #634c62;
  --color-dark-prom-queen-800: #4e3a4d;
  --color-dark-prom-queen-900: #3d2b3b;
  --color-dark-prom-queen-950: #2b152a;
}