Moutarde de Bénichon to Dark Purple Color Palette

About this palette

Moutarde de Bénichon to Dark Purple is a 4-color cool palette: #C49200 (Moutarde de Bénichon), #D3F8FF (Vaporised), #9F14A7 (Magentle), #300536 (Dark Purple). It mixes yellow, white, pink, purple tones and feels cool overall. The strongest text pairing is #D3F8FF on #300536 with a contrast ratio of 15.53:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moutarde de Bénichon	rgb(196, 146, 0)	hsl(45, 100%, 38%)
Vaporised	rgb(211, 248, 255)	hsl(190, 100%, 91%)
Magentle	rgb(159, 20, 167)	hsl(297, 79%, 37%)
Dark Purple	rgb(48, 5, 54)	hsl(293, 83%, 12%)

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.

Aa15.53:1 Super#D3F8FF on #300536
Aa15.53:1 Super#300536 on #D3F8FF
Aa6.21:1 Good#C49200 on #300536
Aa6.21:1 Good#300536 on #C49200
Aa5.95:1 Good#D3F8FF on #9F14A7
Aa5.95:1 Good#9F14A7 on #D3F8FF

Color blindness preview

CSS variables

/* Moutarde de Bénichon to Dark Purple — https://swatchly.xyz/palette/c49200-d3f8ff-9f14a7-300536 */
:root {
  --moutarde-de-b-nichon: #c49200;
  --vaporised: #d3f8ff;
  --magentle: #9f14a7;
  --dark-purple: #300536;
}

Tailwind CSS v4

/* Moutarde de Bénichon to Dark Purple — https://swatchly.xyz/palette/c49200-d3f8ff-9f14a7-300536 */
@theme {
  --color-moutarde-de-b-nichon: #c49200;
  --color-moutarde-de-b-nichon-50: #fff1d7;
  --color-moutarde-de-b-nichon-100: #ffe4b0;
  --color-moutarde-de-b-nichon-200: #f5cd7d;
  --color-moutarde-de-b-nichon-300: #e1b455;
  --color-moutarde-de-b-nichon-400: #c49200;
  --color-moutarde-de-b-nichon-500: #a47900;
  --color-moutarde-de-b-nichon-600: #846100;
  --color-moutarde-de-b-nichon-700: #6a4d00;
  --color-moutarde-de-b-nichon-800: #543c00;
  --color-moutarde-de-b-nichon-900: #412e00;
  --color-moutarde-de-b-nichon-950: #2a1d00;
  --color-vaporised: #d3f8ff;
  --color-vaporised-50: #d3f8ff;
  --color-vaporised-100: #d5ecf1;
  --color-vaporised-200: #bfdadf;
  --color-vaporised-300: #a6c5cb;
  --color-vaporised-400: #85a7ad;
  --color-vaporised-500: #6a8c93;
  --color-vaporised-600: #517278;
  --color-vaporised-700: #3d5b61;
  --color-vaporised-800: #2d474c;
  --color-vaporised-900: #21373b;
  --color-vaporised-950: #122225;
  --color-magentle: #9f14a7;
  --color-magentle-50: #ffefff;
  --color-magentle-100: #ffddff;
  --color-magentle-200: #fdbaff;
  --color-magentle-300: #fa8cff;
  --color-magentle-400: #dd61e3;
  --color-magentle-500: #be3dc6;
  --color-magentle-600: #9f14a7;
  --color-magentle-700: #810088;
  --color-magentle-800: #66006c;
  --color-magentle-900: #510055;
  --color-magentle-950: #340038;
  --color-dark-purple: #300536;
  --color-dark-purple-50: #fdf0ff;
  --color-dark-purple-100: #fce1ff;
  --color-dark-purple-200: #efc8f4;
  --color-dark-purple-300: #dbb0e0;
  --color-dark-purple-400: #bd8ec4;
  --color-dark-purple-500: #a172a8;
  --color-dark-purple-600: #84578b;
  --color-dark-purple-700: #6b4270;
  --color-dark-purple-800: #543159;
  --color-dark-purple-900: #412345;
  --color-dark-purple-950: #300536;
}