Jet d’Eau to Midnight Masquerade color palette

CFE8EBJet d’Eau CDA6A4La Vie en Rose 578D96Horizon 725A38Oak Barrel 293144Midnight Masquerade

About this palette

Jet d’Eau to Midnight Masquerade is a 5-color muted, vintage palette: #CFE8EB (Jet d’Eau), #CDA6A4 (La Vie en Rose), #578D96 (Horizon), #725A38 (Oak Barrel), #293144 (Midnight Masquerade). It mixes gray, red, turquoise, brown, blue tones and feels balanced overall. The strongest text pairing is #CFE8EB on #293144 with a contrast ratio of 10.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jet d’Eau	rgb(207, 232, 235)	hsl(186, 41%, 87%)
La Vie en Rose	rgb(205, 166, 164)	hsl(3, 29%, 72%)
Horizon	rgb(87, 141, 150)	hsl(189, 27%, 46%)
Oak Barrel	rgb(114, 90, 56)	hsl(35, 34%, 33%)
Midnight Masquerade	rgb(41, 49, 68)	hsl(222, 25%, 21%)

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.14:1 Very good#CFE8EB on #293144
Aa10.14:1 Very good#293144 on #CFE8EB
Aa5.93:1 Good#CDA6A4 on #293144
Aa5.93:1 Good#293144 on #CDA6A4
Aa5.07:1 Good#CFE8EB on #725A38
Aa5.07:1 Good#725A38 on #CFE8EB
Aa3.50:1 Poor#578D96 on #293144
Aa3.50:1 Poor#293144 on #578D96

Color blindness preview

CSS variables

/* Jet d’Eau to Midnight Masquerade — https://swatchly.xyz/palette/cfe8eb-cda6a4-578d96-725a38-293144 */
:root {
  --jet-d-eau: #cfe8eb;
  --la-vie-en-rose: #cda6a4;
  --horizon: #578d96;
  --oak-barrel: #725a38;
  --midnight-masquerade: #293144;
}

Tailwind CSS v4

/* Jet d’Eau to Midnight Masquerade — https://swatchly.xyz/palette/cfe8eb-cda6a4-578d96-725a38-293144 */
@theme {
  --color-jet-d-eau: #cfe8eb;
  --color-jet-d-eau-50: #e2f1f3;
  --color-jet-d-eau-100: #cfe8eb;
  --color-jet-d-eau-200: #c1d5d7;
  --color-jet-d-eau-300: #abc0c3;
  --color-jet-d-eau-400: #8ca2a5;
  --color-jet-d-eau-500: #72888b;
  --color-jet-d-eau-600: #596f72;
  --color-jet-d-eau-700: #45595c;
  --color-jet-d-eau-800: #354648;
  --color-jet-d-eau-900: #273638;
  --color-jet-d-eau-950: #172123;
  --color-la-vie-en-rose: #cda6a4;
  --color-la-vie-en-rose-50: #fff9f9;
  --color-la-vie-en-rose-100: #ffefee;
  --color-la-vie-en-rose-200: #f7dbd9;
  --color-la-vie-en-rose-300: #e5c5c4;
  --color-la-vie-en-rose-400: #cda6a4;
  --color-la-vie-en-rose-500: #ad8886;
  --color-la-vie-en-rose-600: #8f6b69;
  --color-la-vie-en-rose-700: #735351;
  --color-la-vie-en-rose-800: #5b3e3d;
  --color-la-vie-en-rose-900: #452e2d;
  --color-la-vie-en-rose-950: #2b1a1a;
  --color-horizon: #578d96;
  --color-horizon-50: #e0faff;
  --color-horizon-100: #cff1f7;
  --color-horizon-200: #b5dee5;
  --color-horizon-300: #99c8d0;
  --color-horizon-400: #74a9b2;
  --color-horizon-500: #578d96;
  --color-horizon-600: #3e737b;
  --color-horizon-700: #2b5c63;
  --color-horizon-800: #1d484f;
  --color-horizon-900: #12383e;
  --color-horizon-950: #082327;
  --color-oak-barrel: #725a38;
  --color-oak-barrel-50: #fff3e4;
  --color-oak-barrel-100: #fae8d1;
  --color-oak-barrel-200: #ead6bb;
  --color-oak-barrel-300: #d7c1a2;
  --color-oak-barrel-400: #bba280;
  --color-oak-barrel-500: #a28865;
  --color-oak-barrel-600: #886f4d;
  --color-oak-barrel-700: #725a38;
  --color-oak-barrel-800: #5a4629;
  --color-oak-barrel-900: #46351c;
  --color-oak-barrel-950: #2d210f;
  --color-midnight-masquerade: #293144;
  --color-midnight-masquerade-50: #f1f5ff;
  --color-midnight-masquerade-100: #e4ebfb;
  --color-midnight-masquerade-200: #cfd7ea;
  --color-midnight-masquerade-300: #b8c1d6;
  --color-midnight-masquerade-400: #97a1b8;
  --color-midnight-masquerade-500: #7c859c;
  --color-midnight-masquerade-600: #626b80;
  --color-midnight-masquerade-700: #4c5467;
  --color-midnight-masquerade-800: #3a4151;
  --color-midnight-masquerade-900: #293144;
  --color-midnight-masquerade-950: #1a1e28;
}