Noir Mystique to Pink Champagne color palette

181808Noir Mystique 623100Meatloaf 4587A9Underwater Moonlight D79A7CBlushing Rose E5DFFFPink Champagne

Open in generator Export PNG, PDF, ASE…

About this palette

Noir Mystique to Pink Champagne is a 5-color vintage palette: #181808 (Noir Mystique), #623100 (Meatloaf), #4587A9 (Underwater Moonlight), #D79A7C (Blushing Rose), #E5DFFF (Pink Champagne). It mixes black, brown, blue, orange, purple tones and feels balanced overall. The strongest text pairing is #181808 on #E5DFFF with a contrast ratio of 13.92:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(24, 24, 8)	hsl(60, 50%, 6%)
Meatloaf	rgb(98, 49, 0)	hsl(30, 100%, 19%)
Underwater Moonlight	rgb(69, 135, 169)	hsl(200, 42%, 47%)
Blushing Rose	rgb(215, 154, 124)	hsl(20, 53%, 66%)
Pink Champagne	rgb(229, 223, 255)	hsl(251, 100%, 94%)

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.

Aa13.92:1 Super#181808 on #E5DFFF
Aa13.92:1 Super#E5DFFF on #181808
Aa8.34:1 Very good#623100 on #E5DFFF
Aa8.34:1 Very good#E5DFFF on #623100
Aa7.50:1 Very good#181808 on #D79A7C
Aa7.50:1 Very good#D79A7C on #181808
Aa4.51:1 Good#181808 on #4587A9
Aa4.51:1 Good#4587A9 on #181808

Color blindness preview

CSS variables

/* Noir Mystique to Pink Champagne — https://swatchly.xyz/palette/181808-623100-4587a9-d79a7c-e5dfff */
:root {
  --noir-mystique: #181808;
  --meatloaf: #623100;
  --underwater-moonlight: #4587a9;
  --blushing-rose: #d79a7c;
  --pink-champagne: #e5dfff;
}

Tailwind CSS v4

/* Noir Mystique to Pink Champagne — https://swatchly.xyz/palette/181808-623100-4587a9-d79a7c-e5dfff */
@theme {
  --color-noir-mystique: #181808;
  --color-noir-mystique-50: #f6f6ea;
  --color-noir-mystique-100: #ececdf;
  --color-noir-mystique-200: #d8d9c9;
  --color-noir-mystique-300: #c2c2b1;
  --color-noir-mystique-400: #a3a390;
  --color-noir-mystique-500: #858672;
  --color-noir-mystique-600: #696a57;
  --color-noir-mystique-700: #515241;
  --color-noir-mystique-800: #3d3d2f;
  --color-noir-mystique-900: #2c2c21;
  --color-noir-mystique-950: #181808;
  --color-meatloaf: #623100;
  --color-meatloaf-50: #fff2ea;
  --color-meatloaf-100: #ffe6d4;
  --color-meatloaf-200: #facdad;
  --color-meatloaf-300: #e7b490;
  --color-meatloaf-400: #ca936b;
  --color-meatloaf-500: #ae774d;
  --color-meatloaf-600: #905c34;
  --color-meatloaf-700: #754621;
  --color-meatloaf-800: #623100;
  --color-meatloaf-900: #49270a;
  --color-meatloaf-950: #2f1704;
  --color-underwater-moonlight: #4587a9;
  --color-underwater-moonlight-50: #e7f6ff;
  --color-underwater-moonlight-100: #cfeeff;
  --color-underwater-moonlight-200: #a9dbf8;
  --color-underwater-moonlight-300: #8bc4e4;
  --color-underwater-moonlight-400: #64a4c6;
  --color-underwater-moonlight-500: #4587a9;
  --color-underwater-moonlight-600: #2c6d8d;
  --color-underwater-moonlight-700: #1a5774;
  --color-underwater-moonlight-800: #0c455e;
  --color-underwater-moonlight-900: #04354b;
  --color-underwater-moonlight-950: #012231;
  --color-blushing-rose: #d79a7c;
  --color-blushing-rose-50: #fff6f2;
  --color-blushing-rose-100: #ffebe2;
  --color-blushing-rose-200: #ffd3bd;
  --color-blushing-rose-300: #efbba2;
  --color-blushing-rose-400: #d79a7c;
  --color-blushing-rose-500: #b87d60;
  --color-blushing-rose-600: #996145;
  --color-blushing-rose-700: #7d4a30;
  --color-blushing-rose-800: #643821;
  --color-blushing-rose-900: #4e2915;
  --color-blushing-rose-950: #321709;
  --color-pink-champagne: #e5dfff;
  --color-pink-champagne-50: #f0ecff;
  --color-pink-champagne-100: #e5dfff;
  --color-pink-champagne-200: #d2cee6;
  --color-pink-champagne-300: #bdb8d3;
  --color-pink-champagne-400: #9f9ab6;
  --color-pink-champagne-500: #857f9c;
  --color-pink-champagne-600: #6c6682;
  --color-pink-champagne-700: #56516a;
  --color-pink-champagne-800: #433f54;
  --color-pink-champagne-900: #343042;
  --color-pink-champagne-950: #201d2a;
}