Mediaeval Blue to Rosewood Dreams Color Palette

About this palette

Mediaeval Blue to Rosewood Dreams is a 5-color cool, vintage palette: #2D3A5F (Mediaeval Blue), #395B3E (Ficus), #A36D60 (Amaretto), #92A6D7 (Old World), #F0BFBA (Rosewood Dreams). It mixes blue, green, red, pink tones and feels cool overall. The strongest text pairing is #2D3A5F on #F0BFBA with a contrast ratio of 6.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mediaeval Blue	rgb(45, 58, 95)	hsl(224, 36%, 27%)
Ficus	rgb(57, 91, 62)	hsl(129, 23%, 29%)
Amaretto	rgb(163, 109, 96)	hsl(12, 27%, 51%)
Old World	rgb(146, 166, 215)	hsl(223, 46%, 71%)
Rosewood Dreams	rgb(240, 191, 186)	hsl(6, 64%, 84%)

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.84:1 Good#2D3A5F on #F0BFBA
Aa6.84:1 Good#F0BFBA on #2D3A5F
Aa4.70:1 Good#395B3E on #F0BFBA
Aa4.70:1 Good#F0BFBA on #395B3E
Aa4.60:1 Good#2D3A5F on #92A6D7
Aa4.60:1 Good#92A6D7 on #2D3A5F
Aa3.16:1 Poor#395B3E on #92A6D7
Aa3.16:1 Poor#92A6D7 on #395B3E

Color blindness preview

CSS variables

/* Mediaeval Blue to Rosewood Dreams — https://swatchly.xyz/palette/2d3a5f-395b3e-a36d60-92a6d7-f0bfba */
:root {
  --mediaeval-blue: #2d3a5f;
  --ficus: #395b3e;
  --amaretto: #a36d60;
  --old-world: #92a6d7;
  --rosewood-dreams: #f0bfba;
}

Tailwind CSS v4

/* Mediaeval Blue to Rosewood Dreams — https://swatchly.xyz/palette/2d3a5f-395b3e-a36d60-92a6d7-f0bfba */
@theme {
  --color-mediaeval-blue: #2d3a5f;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e3ebff;
  --color-mediaeval-blue-200: #c9d7f9;
  --color-mediaeval-blue-300: #b0bfe6;
  --color-mediaeval-blue-400: #8e9ec8;
  --color-mediaeval-blue-500: #7181ab;
  --color-mediaeval-blue-600: #57668d;
  --color-mediaeval-blue-700: #414e71;
  --color-mediaeval-blue-800: #2d3a5f;
  --color-mediaeval-blue-900: #242d45;
  --color-mediaeval-blue-950: #141b2c;
  --color-ficus: #395b3e;
  --color-ficus-50: #e7fce9;
  --color-ficus-100: #dbf3dd;
  --color-ficus-200: #c3e0c6;
  --color-ficus-300: #a9c9ad;
  --color-ficus-400: #87aa8b;
  --color-ficus-500: #6a8e6f;
  --color-ficus-600: #507255;
  --color-ficus-700: #395b3e;
  --color-ficus-800: #2c4730;
  --color-ficus-900: #203724;
  --color-ficus-950: #122214;
  --color-amaretto: #a36d60;
  --color-amaretto-50: #ffefec;
  --color-amaretto-100: #ffe0d8;
  --color-amaretto-200: #f4c6bb;
  --color-amaretto-300: #e0ac9f;
  --color-amaretto-400: #c18a7c;
  --color-amaretto-500: #a36d60;
  --color-amaretto-600: #875549;
  --color-amaretto-700: #6f4237;
  --color-amaretto-800: #593229;
  --color-amaretto-900: #47261e;
  --color-amaretto-950: #2e1711;
  --color-old-world: #92a6d7;
  --color-old-world-50: #f4f7ff;
  --color-old-world-100: #e7eeff;
  --color-old-world-200: #ccdbff;
  --color-old-world-300: #b4c5ef;
  --color-old-world-400: #92a6d7;
  --color-old-world-500: #7689b9;
  --color-old-world-600: #5c6e9b;
  --color-old-world-700: #46567f;
  --color-old-world-800: #354366;
  --color-old-world-900: #273250;
  --color-old-world-950: #161e34;
  --color-rosewood-dreams: #f0bfba;
  --color-rosewood-dreams-50: #ffe8e5;
  --color-rosewood-dreams-100: #fbd9d5;
  --color-rosewood-dreams-200: #f0bfba;
  --color-rosewood-dreams-300: #d7aca8;
  --color-rosewood-dreams-400: #bb8e89;
  --color-rosewood-dreams-500: #a17470;
  --color-rosewood-dreams-600: #865c58;
  --color-rosewood-dreams-700: #6e4845;
  --color-rosewood-dreams-800: #593835;
  --color-rosewood-dreams-900: #462a28;
  --color-rosewood-dreams-950: #2d1917;
}