Minute Mauve to Tardis Blue Color Palette

About this palette

Minute Mauve to Tardis Blue is a 5-color cool palette: #F6E4FF (Minute Mauve), #D0C763 (Quince), #AF9B00 (Lucky), #0074AD (Cloisonné), #003E77 (Tardis Blue). It mixes white, yellow, blue tones and feels cool overall. The strongest text pairing is #F6E4FF on #003E77 with a contrast ratio of 8.93:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Minute Mauve	rgb(246, 228, 255)	hsl(280, 100%, 95%)
Quince	rgb(208, 199, 99)	hsl(55, 54%, 60%)
Lucky	rgb(175, 155, 0)	hsl(53, 100%, 34%)
Cloisonné	rgb(0, 116, 173)	hsl(200, 100%, 34%)
Tardis Blue	rgb(0, 62, 119)	hsl(209, 100%, 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.93:1 Very good#F6E4FF on #003E77
Aa8.93:1 Very good#003E77 on #F6E4FF
Aa6.15:1 Good#D0C763 on #003E77
Aa6.15:1 Good#003E77 on #D0C763
Aa4.26:1 Poor#F6E4FF on #0074AD
Aa4.26:1 Poor#0074AD on #F6E4FF
Aa3.84:1 Poor#AF9B00 on #003E77
Aa3.84:1 Poor#003E77 on #AF9B00

Color blindness preview

CSS variables

/* Minute Mauve to Tardis Blue — https://swatchly.xyz/palette/f6e4ff-d0c763-af9b00-0074ad-003e77 */
:root {
  --minute-mauve: #f6e4ff;
  --quince: #d0c763;
  --lucky: #af9b00;
  --cloisonn: #0074ad;
  --tardis-blue: #003e77;
}

Tailwind CSS v4

/* Minute Mauve to Tardis Blue — https://swatchly.xyz/palette/f6e4ff-d0c763-af9b00-0074ad-003e77 */
@theme {
  --color-minute-mauve: #f6e4ff;
  --color-minute-mauve-50: #fbf2ff;
  --color-minute-mauve-100: #f6e4ff;
  --color-minute-mauve-200: #dfd2e6;
  --color-minute-mauve-300: #cabbd1;
  --color-minute-mauve-400: #ab9bb3;
  --color-minute-mauve-500: #907f98;
  --color-minute-mauve-600: #75657c;
  --color-minute-mauve-700: #5d4f64;
  --color-minute-mauve-800: #493d4f;
  --color-minute-mauve-900: #392e3e;
  --color-minute-mauve-950: #231c27;
  --color-quince: #d0c763;
  --color-quince-50: #fdf9c6;
  --color-quince-100: #f4f0b6;
  --color-quince-200: #e3dd97;
  --color-quince-300: #d0c763;
  --color-quince-400: #afa747;
  --color-quince-500: #948a1e;
  --color-quince-600: #786f00;
  --color-quince-700: #5f5800;
  --color-quince-800: #4a4400;
  --color-quince-900: #393400;
  --color-quince-950: #232000;
  --color-lucky: #af9b00;
  --color-lucky-50: #fff5b5;
  --color-lucky-100: #f5e9a1;
  --color-lucky-200: #e3d47d;
  --color-lucky-300: #cdbc55;
  --color-lucky-400: #af9b00;
  --color-lucky-500: #928100;
  --color-lucky-600: #766800;
  --color-lucky-700: #5e5200;
  --color-lucky-800: #4a4100;
  --color-lucky-900: #3a3200;
  --color-lucky-950: #251f00;
  --color-cloisonn: #0074ad;
  --color-cloisonn-50: #ecf7ff;
  --color-cloisonn-100: #d9efff;
  --color-cloisonn-200: #b2deff;
  --color-cloisonn-300: #81caff;
  --color-cloisonn-400: #55abe5;
  --color-cloisonn-500: #318fca;
  --color-cloisonn-600: #0074ad;
  --color-cloisonn-700: #005c8a;
  --color-cloisonn-800: #00486d;
  --color-cloisonn-900: #003755;
  --color-cloisonn-950: #002237;
  --color-tardis-blue: #003e77;
  --color-tardis-blue-50: #eef6ff;
  --color-tardis-blue-100: #deedff;
  --color-tardis-blue-200: #bcdbff;
  --color-tardis-blue-300: #93c4fd;
  --color-tardis-blue-400: #6ea3e2;
  --color-tardis-blue-500: #5087c6;
  --color-tardis-blue-600: #366ba6;
  --color-tardis-blue-700: #235388;
  --color-tardis-blue-800: #003e77;
  --color-tardis-blue-900: #0b3057;
  --color-tardis-blue-950: #041d39;
}