Mediaeval Blue to Desert Locust color palette

263750Mediaeval Blue 7F6900Muddy Brown 894634Olive Niçoise F2A692Creamy Peach A5D6FDDroplet B29E4CDesert Locust

Open in generator Export PNG, PDF, ASE…

About this palette

Mediaeval Blue to Desert Locust is a 6-color warm, vintage palette: #263750 (Mediaeval Blue), #7F6900 (Muddy Brown), #894634 (Olive Niçoise), #F2A692 (Creamy Peach), #A5D6FD (Droplet), #B29E4C (Desert Locust). It mixes blue, brown, red, pink, yellow tones and feels warm overall. The strongest text pairing is #263750 on #A5D6FD with a contrast ratio of 7.82:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mediaeval Blue	rgb(38, 55, 80)	hsl(216, 36%, 23%)
Muddy Brown	rgb(127, 105, 0)	hsl(50, 100%, 25%)
Olive Niçoise	rgb(137, 70, 52)	hsl(13, 45%, 37%)
Creamy Peach	rgb(242, 166, 146)	hsl(13, 79%, 76%)
Droplet	rgb(165, 214, 253)	hsl(207, 96%, 82%)
Desert Locust	rgb(178, 158, 76)	hsl(48, 40%, 50%)

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.

Aa7.82:1 Very good#263750 on #A5D6FD
Aa7.82:1 Very good#A5D6FD on #263750
Aa6.10:1 Good#263750 on #F2A692
Aa6.10:1 Good#F2A692 on #263750
Aa4.56:1 Good#894634 on #A5D6FD
Aa4.56:1 Good#A5D6FD on #894634
Aa4.52:1 Good#263750 on #B29E4C
Aa4.52:1 Good#B29E4C on #263750

Color blindness preview

CSS variables

/* Mediaeval Blue to Desert Locust — https://swatchly.xyz/palette/263750-7f6900-894634-f2a692-a5d6fd-b29e4c */
:root {
  --mediaeval-blue: #263750;
  --muddy-brown: #7f6900;
  --olive-ni-oise: #894634;
  --creamy-peach: #f2a692;
  --droplet: #a5d6fd;
  --desert-locust: #b29e4c;
}

Tailwind CSS v4

/* Mediaeval Blue to Desert Locust — https://swatchly.xyz/palette/263750-7f6900-894634-f2a692-a5d6fd-b29e4c */
@theme {
  --color-mediaeval-blue: #263750;
  --color-mediaeval-blue-50: #eff6ff;
  --color-mediaeval-blue-100: #e0ecff;
  --color-mediaeval-blue-200: #c9d9f0;
  --color-mediaeval-blue-300: #b0c2dd;
  --color-mediaeval-blue-400: #90a4c1;
  --color-mediaeval-blue-500: #7589a6;
  --color-mediaeval-blue-600: #5c6f8b;
  --color-mediaeval-blue-700: #485972;
  --color-mediaeval-blue-800: #37465c;
  --color-mediaeval-blue-900: #263750;
  --color-mediaeval-blue-950: #192230;
  --color-muddy-brown: #7f6900;
  --color-muddy-brown-50: #fff5d2;
  --color-muddy-brown-100: #f9ebb9;
  --color-muddy-brown-200: #e8d79a;
  --color-muddy-brown-300: #d3c07a;
  --color-muddy-brown-400: #b6a04f;
  --color-muddy-brown-500: #9a842d;
  --color-muddy-brown-600: #7f6900;
  --color-muddy-brown-700: #655300;
  --color-muddy-brown-800: #4f4100;
  --color-muddy-brown-900: #3d3100;
  --color-muddy-brown-950: #271e00;
  --color-olive-ni-oise: #894634;
  --color-olive-ni-oise-50: #fff2ee;
  --color-olive-ni-oise-100: #ffe5dd;
  --color-olive-ni-oise-200: #ffcbbd;
  --color-olive-ni-oise-300: #f3b19f;
  --color-olive-ni-oise-400: #d8917d;
  --color-olive-ni-oise-500: #bd7562;
  --color-olive-ni-oise-600: #a15c49;
  --color-olive-ni-oise-700: #894634;
  --color-olive-ni-oise-800: #6d3526;
  --color-olive-ni-oise-900: #56271a;
  --color-olive-ni-oise-950: #39160d;
  --color-creamy-peach: #f2a692;
  --color-creamy-peach-50: #ffeeea;
  --color-creamy-peach-100: #ffe0d7;
  --color-creamy-peach-200: #ffc3b3;
  --color-creamy-peach-300: #f2a692;
  --color-creamy-peach-400: #d08976;
  --color-creamy-peach-500: #b46d5b;
  --color-creamy-peach-600: #975543;
  --color-creamy-peach-700: #7d4031;
  --color-creamy-peach-800: #653023;
  --color-creamy-peach-900: #512418;
  --color-creamy-peach-950: #35140c;
  --color-droplet: #a5d6fd;
  --color-droplet-50: #e2f2ff;
  --color-droplet-100: #cde8ff;
  --color-droplet-200: #a5d6fd;
  --color-droplet-300: #96c0e2;
  --color-droplet-400: #74a2c6;
  --color-droplet-500: #5a88ac;
  --color-droplet-600: #426e90;
  --color-droplet-700: #2f5877;
  --color-droplet-800: #214661;
  --color-droplet-900: #16364d;
  --color-droplet-950: #0a2132;
  --color-desert-locust: #b29e4c;
  --color-desert-locust-50: #fff5ca;
  --color-desert-locust-100: #f6eab8;
  --color-desert-locust-200: #e5d69a;
  --color-desert-locust-300: #d0be79;
  --color-desert-locust-400: #b29e4c;
  --color-desert-locust-500: #97832f;
  --color-desert-locust-600: #7c690e;
  --color-desert-locust-700: #635300;
  --color-desert-locust-800: #4e4100;
  --color-desert-locust-900: #3d3200;
  --color-desert-locust-950: #261f00;
}