Precious to Midnight Escapade color palette

F2D5B3Precious CBAC63Desert A68D59Teak 4376B6Sail On 30527BSlumber 1B355CMidnight Escapade

About this palette

Precious to Midnight Escapade is a 6-color vintage palette: #F2D5B3 (Precious), #CBAC63 (Desert), #A68D59 (Teak), #4376B6 (Sail On), #30527B (Slumber), #1B355C (Midnight Escapade). It mixes orange, yellow, blue tones and feels balanced overall. The strongest text pairing is #F2D5B3 on #1B355C with a contrast ratio of 8.74:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Precious	rgb(242, 213, 179)	hsl(32, 71%, 83%)
Desert	rgb(203, 172, 99)	hsl(42, 50%, 59%)
Teak	rgb(166, 141, 89)	hsl(41, 30%, 50%)
Sail On	rgb(67, 118, 182)	hsl(213, 46%, 49%)
Slumber	rgb(48, 82, 123)	hsl(213, 44%, 34%)
Midnight Escapade	rgb(27, 53, 92)	hsl(216, 55%, 23%)

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.

Aa8.74:1 Very good#F2D5B3 on #1B355C
Aa8.74:1 Very good#1B355C on #F2D5B3
Aa5.71:1 Good#F2D5B3 on #30527B
Aa5.71:1 Good#30527B on #F2D5B3
Aa5.62:1 Good#CBAC63 on #1B355C
Aa5.62:1 Good#1B355C on #CBAC63
Aa3.84:1 Poor#A68D59 on #1B355C
Aa3.84:1 Poor#1B355C on #A68D59

Color blindness preview

CSS variables

/* Precious to Midnight Escapade — https://swatchly.xyz/palette/f2d5b3-cbac63-a68d59-4376b6-30527b-1b355c */
:root {
  --precious: #f2d5b3;
  --desert: #cbac63;
  --teak: #a68d59;
  --sail-on: #4376b6;
  --slumber: #30527b;
  --midnight-escapade: #1b355c;
}

Tailwind CSS v4

/* Precious to Midnight Escapade — https://swatchly.xyz/palette/f2d5b3-cbac63-a68d59-4376b6-30527b-1b355c */
@theme {
  --color-precious: #f2d5b3;
  --color-precious-50: #fff5ea;
  --color-precious-100: #fcead6;
  --color-precious-200: #f2d5b3;
  --color-precious-300: #d7bfa3;
  --color-precious-400: #b99e7f;
  --color-precious-500: #9d8263;
  --color-precious-600: #816849;
  --color-precious-700: #685135;
  --color-precious-800: #523e26;
  --color-precious-900: #402f1b;
  --color-precious-950: #291d0e;
  --color-desert: #cbac63;
  --color-desert-50: #fffaee;
  --color-desert-100: #fff2d4;
  --color-desert-200: #f5dfaf;
  --color-desert-300: #e4cb92;
  --color-desert-400: #cbac63;
  --color-desert-500: #ac8e46;
  --color-desert-600: #8e7025;
  --color-desert-700: #725707;
  --color-desert-800: #594300;
  --color-desert-900: #443200;
  --color-desert-950: #291d00;
  --color-teak: #a68d59;
  --color-teak-50: #fff6e4;
  --color-teak-100: #fdedcd;
  --color-teak-200: #eedbb5;
  --color-teak-300: #dbc69a;
  --color-teak-400: #bfa776;
  --color-teak-500: #a68d59;
  --color-teak-600: #89703d;
  --color-teak-700: #6e5828;
  --color-teak-800: #574418;
  --color-teak-900: #43330d;
  --color-teak-950: #2a1f04;
  --color-sail-on: #4376b6;
  --color-sail-on-50: #eff6ff;
  --color-sail-on-100: #e1eeff;
  --color-sail-on-200: #c3ddff;
  --color-sail-on-300: #9fc9ff;
  --color-sail-on-400: #79abeb;
  --color-sail-on-500: #5c90d1;
  --color-sail-on-600: #4376b6;
  --color-sail-on-700: #2e5d98;
  --color-sail-on-800: #1e487c;
  --color-sail-on-900: #123763;
  --color-sail-on-950: #072241;
  --color-slumber: #30527b;
  --color-slumber-50: #eff6ff;
  --color-slumber-100: #deedff;
  --color-slumber-200: #bcd9fe;
  --color-slumber-300: #a1c2eb;
  --color-slumber-400: #7ea2ce;
  --color-slumber-500: #6185b2;
  --color-slumber-600: #486a93;
  --color-slumber-700: #30527b;
  --color-slumber-800: #254060;
  --color-slumber-900: #1a314c;
  --color-slumber-950: #0e1e31;
  --color-midnight-escapade: #1b355c;
  --color-midnight-escapade-50: #eff6ff;
  --color-midnight-escapade-100: #e0ecff;
  --color-midnight-escapade-200: #c1d9fd;
  --color-midnight-escapade-300: #a7c3ec;
  --color-midnight-escapade-400: #86a4d0;
  --color-midnight-escapade-500: #6b88b5;
  --color-midnight-escapade-600: #526e99;
  --color-midnight-escapade-700: #3e587f;
  --color-midnight-escapade-800: #2e4567;
  --color-midnight-escapade-900: #1b355c;
  --color-midnight-escapade-950: #132137;
}