Start generating

Noir Mystique to Poppy Pompadour color palette

221C00Noir MystiqueC08FFFDream Vapour4D90BESea Salt Rivers4F4000Alligator GladiatorA8D3FFBaby Blue67439APoppy Pompadour
Open in generator Export PNG, PDF, ASE…

About this palette

Noir Mystique to Poppy Pompadour is a 6-color cool palette: #221C00 (Noir Mystique), #C08FFF (Dream Vapour), #4D90BE (Sea Salt Rivers), #4F4000 (Alligator Gladiator), #A8D3FF (Baby Blue), #67439A (Poppy Pompadour). It mixes brown, purple, blue tones and feels cool overall. The strongest text pairing is #221C00 on #A8D3FF with a contrast ratio of 10.88:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Noir Mystiquergb(34, 28, 0)hsl(49, 100%, 7%)
Dream Vapourrgb(192, 143, 255)hsl(266, 100%, 78%)
Sea Salt Riversrgb(77, 144, 190)hsl(204, 47%, 52%)
Alligator Gladiatorrgb(79, 64, 0)hsl(49, 100%, 15%)
Baby Bluergb(168, 211, 255)hsl(210, 100%, 83%)
Poppy Pompadourrgb(103, 67, 154)hsl(265, 39%, 43%)

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.88:1 Very good#221C00 on #A8D3FF
  • Aa10.88:1 Very good#A8D3FF on #221C00
  • Aa6.98:1 Good#221C00 on #C08FFF
  • Aa6.98:1 Good#C08FFF on #221C00
  • Aa6.50:1 Good#4F4000 on #A8D3FF
  • Aa6.50:1 Good#A8D3FF on #4F4000
  • Aa4.90:1 Good#221C00 on #4D90BE
  • Aa4.90:1 Good#4D90BE on #221C00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Noir Mystique to Poppy Pompadour — https://swatchly.xyz/palette/221c00-c08fff-4d90be-4f4000-a8d3ff-67439a */
:root {
  --noir-mystique: #221c00;
  --dream-vapour: #c08fff;
  --sea-salt-rivers: #4d90be;
  --alligator-gladiator: #4f4000;
  --baby-blue: #a8d3ff;
  --poppy-pompadour: #67439a;
}

Tailwind CSS v4

/* Noir Mystique to Poppy Pompadour — https://swatchly.xyz/palette/221c00-c08fff-4d90be-4f4000-a8d3ff-67439a */
@theme {
  --color-noir-mystique: #221c00;
  --color-noir-mystique-50: #f9f6e2;
  --color-noir-mystique-100: #f0ecd6;
  --color-noir-mystique-200: #ddd8bf;
  --color-noir-mystique-300: #c7c2a5;
  --color-noir-mystique-400: #a9a282;
  --color-noir-mystique-500: #8d8666;
  --color-noir-mystique-600: #716b4c;
  --color-noir-mystique-700: #5a5438;
  --color-noir-mystique-800: #454028;
  --color-noir-mystique-900: #34301c;
  --color-noir-mystique-950: #221c00;
  --color-dream-vapour: #c08fff;
  --color-dream-vapour-50: #faf7ff;
  --color-dream-vapour-100: #f3edff;
  --color-dream-vapour-200: #e6d6ff;
  --color-dream-vapour-300: #d6baff;
  --color-dream-vapour-400: #c08fff;
  --color-dream-vapour-500: #a272de;
  --color-dream-vapour-600: #8555be;
  --color-dream-vapour-700: #6c3d9f;
  --color-dream-vapour-800: #552b81;
  --color-dream-vapour-900: #411d66;
  --color-dream-vapour-950: #290f43;
  --color-sea-salt-rivers: #4d90be;
  --color-sea-salt-rivers-50: #edf7ff;
  --color-sea-salt-rivers-100: #dbefff;
  --color-sea-salt-rivers-200: #b4dfff;
  --color-sea-salt-rivers-300: #92caf3;
  --color-sea-salt-rivers-400: #6cabd9;
  --color-sea-salt-rivers-500: #4d90be;
  --color-sea-salt-rivers-600: #3174a0;
  --color-sea-salt-rivers-700: #1c5c84;
  --color-sea-salt-rivers-800: #0c486b;
  --color-sea-salt-rivers-900: #033755;
  --color-sea-salt-rivers-950: #002237;
  --color-alligator-gladiator: #4f4000;
  --color-alligator-gladiator-50: #fef5d6;
  --color-alligator-gladiator-100: #f5ebc8;
  --color-alligator-gladiator-200: #e4d8ad;
  --color-alligator-gladiator-300: #cfc190;
  --color-alligator-gladiator-400: #b0a16b;
  --color-alligator-gladiator-500: #95854e;
  --color-alligator-gladiator-600: #7a6a34;
  --color-alligator-gladiator-700: #615421;
  --color-alligator-gladiator-800: #4f4000;
  --color-alligator-gladiator-900: #3c310a;
  --color-alligator-gladiator-950: #261e03;
  --color-baby-blue: #a8d3ff;
  --color-baby-blue-50: #e3f1ff;
  --color-baby-blue-100: #cfe6ff;
  --color-baby-blue-200: #a8d3ff;
  --color-baby-blue-300: #98bee4;
  --color-baby-blue-400: #78a0c8;
  --color-baby-blue-500: #5d86ae;
  --color-baby-blue-600: #466c93;
  --color-baby-blue-700: #345779;
  --color-baby-blue-800: #254563;
  --color-baby-blue-900: #1a354f;
  --color-baby-blue-950: #0d2133;
  --color-poppy-pompadour: #67439a;
  --color-poppy-pompadour-50: #f7f3ff;
  --color-poppy-pompadour-100: #eee7ff;
  --color-poppy-pompadour-200: #dfcfff;
  --color-poppy-pompadour-300: #ceb3ff;
  --color-poppy-pompadour-400: #b190ea;
  --color-poppy-pompadour-500: #9774cf;
  --color-poppy-pompadour-600: #7d5ab2;
  --color-poppy-pompadour-700: #67439a;
  --color-poppy-pompadour-800: #51337b;
  --color-poppy-pompadour-900: #3f2562;
  --color-poppy-pompadour-950: #281541;
}

Similar palettes