Poppy Pompadour to Shadow Play Color Palette

About this palette

Poppy Pompadour to Shadow Play is a 4-color palette: #6E44A6 (Poppy Pompadour), #8AA300 (Noxious), #EEF7FF (Cotton Ball), #300C00 (Shadow Play). It mixes purple, green, white, brown tones and feels cool overall. The strongest text pairing is #EEF7FF on #300C00 with a contrast ratio of 16.45:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poppy Pompadour	rgb(110, 68, 166)	hsl(266, 42%, 46%)
Noxious	rgb(138, 163, 0)	hsl(69, 100%, 32%)
Cotton Ball	rgb(238, 247, 255)	hsl(208, 100%, 97%)
Shadow Play	rgb(48, 12, 0)	hsl(15, 100%, 9%)

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.

Aa16.45:1 Super#EEF7FF on #300C00
Aa16.45:1 Super#300C00 on #EEF7FF
Aa6.38:1 Good#6E44A6 on #EEF7FF
Aa6.38:1 Good#EEF7FF on #6E44A6
Aa6.21:1 Good#8AA300 on #300C00
Aa6.21:1 Good#300C00 on #8AA300

Color blindness preview

CSS variables

/* Poppy Pompadour to Shadow Play — https://swatchly.xyz/palette/6e44a6-8aa300-eef7ff-300c00 */
:root {
  --poppy-pompadour: #6e44a6;
  --noxious: #8aa300;
  --cotton-ball: #eef7ff;
  --shadow-play: #300c00;
}

Tailwind CSS v4

/* Poppy Pompadour to Shadow Play — https://swatchly.xyz/palette/6e44a6-8aa300-eef7ff-300c00 */
@theme {
  --color-poppy-pompadour: #6e44a6;
  --color-poppy-pompadour-50: #f7f3ff;
  --color-poppy-pompadour-100: #eee7ff;
  --color-poppy-pompadour-200: #e0d0ff;
  --color-poppy-pompadour-300: #cfb5ff;
  --color-poppy-pompadour-400: #b690f3;
  --color-poppy-pompadour-500: #9d74da;
  --color-poppy-pompadour-600: #835bbe;
  --color-poppy-pompadour-700: #6e44a6;
  --color-poppy-pompadour-800: #573386;
  --color-poppy-pompadour-900: #44246b;
  --color-poppy-pompadour-950: #2b1448;
  --color-noxious: #8aa300;
  --color-noxious-50: #e9fbb5;
  --color-noxious-100: #dcf09f;
  --color-noxious-200: #c5dc7b;
  --color-noxious-300: #abc452;
  --color-noxious-400: #8aa300;
  --color-noxious-500: #738800;
  --color-noxious-600: #5c6e00;
  --color-noxious-700: #495800;
  --color-noxious-800: #394500;
  --color-noxious-900: #2d3600;
  --color-noxious-950: #1c2300;
  --color-cotton-ball: #eef7ff;
  --color-cotton-ball-50: #eef7ff;
  --color-cotton-ball-100: #e7ecf1;
  --color-cotton-ball-200: #d2d9de;
  --color-cotton-ball-300: #bbc2c9;
  --color-cotton-ball-400: #9ba3aa;
  --color-cotton-ball-500: #7f878e;
  --color-cotton-ball-600: #656d74;
  --color-cotton-ball-700: #4f565c;
  --color-cotton-ball-800: #3d4348;
  --color-cotton-ball-900: #2e3438;
  --color-cotton-ball-950: #1c2023;
  --color-shadow-play: #300c00;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #ffe5db;
  --color-shadow-play-200: #f4cebf;
  --color-shadow-play-300: #e1b6a5;
  --color-shadow-play-400: #c39683;
  --color-shadow-play-500: #a67966;
  --color-shadow-play-600: #885d4c;
  --color-shadow-play-700: #6d4738;
  --color-shadow-play-800: #553427;
  --color-shadow-play-900: #40261b;
  --color-shadow-play-950: #300c00;
}