Brandy to Tardis Blue Color Palette

About this palette

Brandy to Tardis Blue is a 5-color warm, earthy, vintage palette: #E0B483 (Brandy), #FAE6CC (Delightful Pastry), #835624 (Precious Copper), #3E8AD3 (Magical Merlin), #003E6B (Tardis Blue). It mixes orange, brown, blue tones and feels warm overall. The strongest text pairing is #FAE6CC on #003E6B with a contrast ratio of 9.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brandy	rgb(224, 180, 131)	hsl(32, 60%, 70%)
Delightful Pastry	rgb(250, 230, 204)	hsl(34, 82%, 89%)
Precious Copper	rgb(131, 86, 36)	hsl(32, 57%, 33%)
Magical Merlin	rgb(62, 138, 211)	hsl(209, 63%, 54%)
Tardis Blue	rgb(0, 62, 107)	hsl(205, 100%, 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.

Aa9.08:1 Very good#FAE6CC on #003E6B
Aa9.08:1 Very good#003E6B on #FAE6CC
Aa5.80:1 Good#E0B483 on #003E6B
Aa5.80:1 Good#003E6B on #E0B483
Aa5.19:1 Good#FAE6CC on #835624
Aa5.19:1 Good#835624 on #FAE6CC
Aa3.32:1 Poor#E0B483 on #835624
Aa3.32:1 Poor#835624 on #E0B483

Color blindness preview

CSS variables

/* Brandy to Tardis Blue — https://swatchly.xyz/palette/e0b483-fae6cc-835624-3e8ad3-003e6b */
:root {
  --brandy: #e0b483;
  --delightful-pastry: #fae6cc;
  --precious-copper: #835624;
  --magical-merlin: #3e8ad3;
  --tardis-blue: #003e6b;
}

Tailwind CSS v4

/* Brandy to Tardis Blue — https://swatchly.xyz/palette/e0b483-fae6cc-835624-3e8ad3-003e6b */
@theme {
  --color-brandy: #e0b483;
  --color-brandy-50: #fff1e1;
  --color-brandy-100: #ffe3c6;
  --color-brandy-200: #f0cea8;
  --color-brandy-300: #e0b483;
  --color-brandy-400: #bf9667;
  --color-brandy-500: #a47b4b;
  --color-brandy-600: #886133;
  --color-brandy-700: #6f4c20;
  --color-brandy-800: #593a13;
  --color-brandy-900: #472c0a;
  --color-brandy-950: #2d1b03;
  --color-delightful-pastry: #fae6cc;
  --color-delightful-pastry-50: #fdf2e3;
  --color-delightful-pastry-100: #fae6cc;
  --color-delightful-pastry-200: #e2d4c0;
  --color-delightful-pastry-300: #cdbda7;
  --color-delightful-pastry-400: #b09e86;
  --color-delightful-pastry-500: #94826b;
  --color-delightful-pastry-600: #7a6852;
  --color-delightful-pastry-700: #62523e;
  --color-delightful-pastry-800: #4d402e;
  --color-delightful-pastry-900: #3c3121;
  --color-delightful-pastry-950: #261e13;
  --color-precious-copper: #835624;
  --color-precious-copper-50: #fff3e7;
  --color-precious-copper-100: #ffe4ca;
  --color-precious-copper-200: #f3cba5;
  --color-precious-copper-300: #deb186;
  --color-precious-copper-400: #bf8f5f;
  --color-precious-copper-500: #a17241;
  --color-precious-copper-600: #835624;
  --color-precious-copper-700: #6a4317;
  --color-precious-copper-800: #55330b;
  --color-precious-copper-900: #432705;
  --color-precious-copper-950: #2b1702;
  --color-magical-merlin: #3e8ad3;
  --color-magical-merlin-50: #eef6ff;
  --color-magical-merlin-100: #ddedff;
  --color-magical-merlin-200: #badbff;
  --color-magical-merlin-300: #8fc6ff;
  --color-magical-merlin-400: #5ea6ee;
  --color-magical-merlin-500: #3e8ad3;
  --color-magical-merlin-600: #216fb4;
  --color-magical-merlin-700: #075796;
  --color-magical-merlin-800: #004479;
  --color-magical-merlin-900: #00345f;
  --color-magical-merlin-950: #00203e;
  --color-tardis-blue: #003e6b;
  --color-tardis-blue-50: #eef6ff;
  --color-tardis-blue-100: #dceeff;
  --color-tardis-blue-200: #b8dcff;
  --color-tardis-blue-300: #95c5f3;
  --color-tardis-blue-400: #70a4d6;
  --color-tardis-blue-500: #5187b9;
  --color-tardis-blue-600: #376b9a;
  --color-tardis-blue-700: #23537d;
  --color-tardis-blue-800: #003e6b;
  --color-tardis-blue-900: #0c304e;
  --color-tardis-blue-950: #051d32;
}