Grand Bleu to Midnight Masquerade color palette

005280Grand Bleu 94636ECinnapink E3B0BCSakura 92B678Around the Gills 22334EMidnight Masquerade

About this palette

Grand Bleu to Midnight Masquerade is a 5-color cool, vintage palette: #005280 (Grand Bleu), #94636E (Cinnapink), #E3B0BC (Sakura), #92B678 (Around the Gills), #22334E (Midnight Masquerade). It mixes blue, red, pink, green tones and feels cool overall. The strongest text pairing is #E3B0BC on #22334E with a contrast ratio of 6.78:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grand Bleu	rgb(0, 82, 128)	hsl(202, 100%, 25%)
Cinnapink	rgb(148, 99, 110)	hsl(347, 20%, 48%)
Sakura	rgb(227, 176, 188)	hsl(346, 48%, 79%)
Around the Gills	rgb(146, 182, 120)	hsl(95, 30%, 59%)
Midnight Masquerade	rgb(34, 51, 78)	hsl(217, 39%, 22%)

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.78:1 Good#E3B0BC on #22334E
Aa6.78:1 Good#22334E on #E3B0BC
Aa5.56:1 Good#92B678 on #22334E
Aa5.56:1 Good#22334E on #92B678
Aa4.45:1 Poor#005280 on #E3B0BC
Aa4.45:1 Poor#E3B0BC on #005280
Aa3.65:1 Poor#005280 on #92B678
Aa3.65:1 Poor#92B678 on #005280

Color blindness preview

CSS variables

/* Grand Bleu to Midnight Masquerade — https://swatchly.xyz/palette/005280-94636e-e3b0bc-92b678-22334e */
:root {
  --grand-bleu: #005280;
  --cinnapink: #94636e;
  --sakura: #e3b0bc;
  --around-the-gills: #92b678;
  --midnight-masquerade: #22334e;
}

Tailwind CSS v4

/* Grand Bleu to Midnight Masquerade — https://swatchly.xyz/palette/005280-94636e-e3b0bc-92b678-22334e */
@theme {
  --color-grand-bleu: #005280;
  --color-grand-bleu-50: #edf7ff;
  --color-grand-bleu-100: #daeeff;
  --color-grand-bleu-200: #b0dcff;
  --color-grand-bleu-300: #8bc5f3;
  --color-grand-bleu-400: #64a4d6;
  --color-grand-bleu-500: #4487b8;
  --color-grand-bleu-600: #296a99;
  --color-grand-bleu-700: #005280;
  --color-grand-bleu-800: #064063;
  --color-grand-bleu-900: #01314f;
  --color-grand-bleu-950: #001e33;
  --color-cinnapink: #94636e;
  --color-cinnapink-50: #fff1f4;
  --color-cinnapink-100: #ffe5ea;
  --color-cinnapink-200: #f7ced6;
  --color-cinnapink-300: #e5b7c0;
  --color-cinnapink-400: #c997a2;
  --color-cinnapink-500: #af7c87;
  --color-cinnapink-600: #94636e;
  --color-cinnapink-700: #794c57;
  --color-cinnapink-800: #603a43;
  --color-cinnapink-900: #4c2b33;
  --color-cinnapink-950: #31191f;
  --color-sakura: #e3b0bc;
  --color-sakura-50: #fff0f3;
  --color-sakura-100: #ffe2e8;
  --color-sakura-200: #f2cbd4;
  --color-sakura-300: #e3b0bc;
  --color-sakura-400: #c1929d;
  --color-sakura-500: #a67682;
  --color-sakura-600: #895d68;
  --color-sakura-700: #704852;
  --color-sakura-800: #593640;
  --color-sakura-900: #462931;
  --color-sakura-950: #2d181e;
  --color-around-the-gills: #92b678;
  --color-around-the-gills-50: #ecffe0;
  --color-around-the-gills-100: #e1f8d2;
  --color-around-the-gills-200: #cce7ba;
  --color-around-the-gills-300: #b4d39f;
  --color-around-the-gills-400: #92b678;
  --color-around-the-gills-500: #76995c;
  --color-around-the-gills-600: #5b7c41;
  --color-around-the-gills-700: #45632d;
  --color-around-the-gills-800: #334d1d;
  --color-around-the-gills-900: #253b12;
  --color-around-the-gills-950: #152407;
  --color-midnight-masquerade: #22334e;
  --color-midnight-masquerade-50: #f0f6ff;
  --color-midnight-masquerade-100: #e0ecff;
  --color-midnight-masquerade-200: #c8d9f2;
  --color-midnight-masquerade-300: #b0c2df;
  --color-midnight-masquerade-400: #8fa3c2;
  --color-midnight-masquerade-500: #7387a7;
  --color-midnight-masquerade-600: #5a6d8b;
  --color-midnight-masquerade-700: #455671;
  --color-midnight-masquerade-800: #34435a;
  --color-midnight-masquerade-900: #22334e;
  --color-midnight-masquerade-950: #16202e;
}