Winter Wizard to Very Coffee color palette

A3E2FFWinter Wizard D8A644Sunny Disposition 9380D7Perrywinkle 7164C8Venus Violet 006581Harem Silk 654000Very Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Winter Wizard to Very Coffee is a 6-color cool palette: #A3E2FF (Winter Wizard), #D8A644 (Sunny Disposition), #9380D7 (Perrywinkle), #7164C8 (Venus Violet), #006581 (Harem Silk), #654000 (Very Coffee). It mixes blue, yellow, purple, brown tones and feels cool overall. The strongest text pairing is #A3E2FF on #654000 with a contrast ratio of 6.51:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Winter Wizard	rgb(163, 226, 255)	hsl(199, 100%, 82%)
Sunny Disposition	rgb(216, 166, 68)	hsl(40, 65%, 56%)
Perrywinkle	rgb(147, 128, 215)	hsl(253, 52%, 67%)
Venus Violet	rgb(113, 100, 200)	hsl(248, 48%, 59%)
Harem Silk	rgb(0, 101, 129)	hsl(193, 100%, 25%)
Very Coffee	rgb(101, 64, 0)	hsl(38, 100%, 20%)

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.

Aa6.51:1 Good#A3E2FF on #654000
Aa6.51:1 Good#654000 on #A3E2FF
Aa4.68:1 Good#A3E2FF on #006581
Aa4.68:1 Good#006581 on #A3E2FF
Aa4.14:1 Poor#D8A644 on #654000
Aa4.14:1 Poor#654000 on #D8A644
Aa3.41:1 Poor#A3E2FF on #7164C8
Aa3.41:1 Poor#7164C8 on #A3E2FF

Color blindness preview

CSS variables

/* Winter Wizard to Very Coffee — https://swatchly.xyz/palette/a3e2ff-d8a644-9380d7-7164c8-006581-654000 */
:root {
  --winter-wizard: #a3e2ff;
  --sunny-disposition: #d8a644;
  --perrywinkle: #9380d7;
  --venus-violet: #7164c8;
  --harem-silk: #006581;
  --very-coffee: #654000;
}

Tailwind CSS v4

/* Winter Wizard to Very Coffee — https://swatchly.xyz/palette/a3e2ff-d8a644-9380d7-7164c8-006581-654000 */
@theme {
  --color-winter-wizard: #a3e2ff;
  --color-winter-wizard-50: #e9f8ff;
  --color-winter-wizard-100: #d3f1ff;
  --color-winter-wizard-200: #a3e2ff;
  --color-winter-wizard-300: #95cae2;
  --color-winter-wizard-400: #70abc5;
  --color-winter-wizard-500: #528faa;
  --color-winter-wizard-600: #38748e;
  --color-winter-wizard-700: #245d74;
  --color-winter-wizard-800: #15495d;
  --color-winter-wizard-900: #0b3849;
  --color-winter-wizard-950: #03232f;
  --color-sunny-disposition: #d8a644;
  --color-sunny-disposition-50: #fff9ef;
  --color-sunny-disposition-100: #fff1d8;
  --color-sunny-disposition-200: #ffdc9e;
  --color-sunny-disposition-300: #efc67d;
  --color-sunny-disposition-400: #d8a644;
  --color-sunny-disposition-500: #b8881f;
  --color-sunny-disposition-600: #966c00;
  --color-sunny-disposition-700: #775400;
  --color-sunny-disposition-800: #5c4100;
  --color-sunny-disposition-900: #463000;
  --color-sunny-disposition-950: #2b1c00;
  --color-perrywinkle: #9380d7;
  --color-perrywinkle-50: #f7f6ff;
  --color-perrywinkle-100: #efecff;
  --color-perrywinkle-200: #ddd7ff;
  --color-perrywinkle-300: #c9bdff;
  --color-perrywinkle-400: #ac9bef;
  --color-perrywinkle-500: #9380d7;
  --color-perrywinkle-600: #7763b7;
  --color-perrywinkle-700: #5f4c99;
  --color-perrywinkle-800: #4a387c;
  --color-perrywinkle-900: #382962;
  --color-perrywinkle-950: #231740;
  --color-venus-violet: #7164c8;
  --color-venus-violet-50: #f4f4ff;
  --color-venus-violet-100: #ebebff;
  --color-venus-violet-200: #d8d6ff;
  --color-venus-violet-300: #c1beff;
  --color-venus-violet-400: #a299fc;
  --color-venus-violet-500: #897ee4;
  --color-venus-violet-600: #7164c8;
  --color-venus-violet-700: #5a4ca8;
  --color-venus-violet-800: #46388a;
  --color-venus-violet-900: #35296e;
  --color-venus-violet-950: #21174a;
  --color-harem-silk: #006581;
  --color-harem-silk-50: #e8f8ff;
  --color-harem-silk-100: #d1f1ff;
  --color-harem-silk-200: #aae3fa;
  --color-harem-silk-300: #8dcee8;
  --color-harem-silk-400: #66b0cd;
  --color-harem-silk-500: #4696b3;
  --color-harem-silk-600: #297b98;
  --color-harem-silk-700: #006581;
  --color-harem-silk-800: #004f66;
  --color-harem-silk-900: #003d4f;
  --color-harem-silk-950: #002633;
  --color-very-coffee: #654000;
  --color-very-coffee-50: #fff3e5;
  --color-very-coffee-100: #ffe7ca;
  --color-very-coffee-200: #f2d2aa;
  --color-very-coffee-300: #e0bb8e;
  --color-very-coffee-400: #c49c69;
  --color-very-coffee-500: #aa814c;
  --color-very-coffee-600: #8f6833;
  --color-very-coffee-700: #775320;
  --color-very-coffee-800: #654000;
  --color-very-coffee-900: #4d3207;
  --color-very-coffee-950: #321e01;
}