Capital Blue to Dusty Boots Color Palette

About this palette

Capital Blue to Dusty Boots is a 5-color warm, vintage palette: #1F4253 (Capital Blue), #A04F5B (Cherry Berry), #3899AE (Rainy Mood), #E08B8F (Boho Blush), #F3C08B (Dusty Boots). It mixes blue, red, turquoise, orange tones and feels warm overall. The strongest text pairing is #1F4253 on #F3C08B with a contrast ratio of 6.48:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Capital Blue	rgb(31, 66, 83)	hsl(200, 46%, 22%)
Cherry Berry	rgb(160, 79, 91)	hsl(351, 34%, 47%)
Rainy Mood	rgb(56, 153, 174)	hsl(191, 51%, 45%)
Boho Blush	rgb(224, 139, 143)	hsl(357, 58%, 71%)
Dusty Boots	rgb(243, 192, 139)	hsl(31, 81%, 75%)

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.48:1 Good#1F4253 on #F3C08B
Aa6.48:1 Good#F3C08B on #1F4253
Aa4.21:1 Poor#1F4253 on #E08B8F
Aa4.21:1 Poor#E08B8F on #1F4253
Aa3.38:1 Poor#A04F5B on #F3C08B
Aa3.38:1 Poor#F3C08B on #A04F5B
Aa3.23:1 Poor#1F4253 on #3899AE
Aa3.23:1 Poor#3899AE on #1F4253

Color blindness preview

CSS variables

/* Capital Blue to Dusty Boots — https://swatchly.xyz/palette/1f4253-a04f5b-3899ae-e08b8f-f3c08b */
:root {
  --capital-blue: #1f4253;
  --cherry-berry: #a04f5b;
  --rainy-mood: #3899ae;
  --boho-blush: #e08b8f;
  --dusty-boots: #f3c08b;
}

Tailwind CSS v4

/* Capital Blue to Dusty Boots — https://swatchly.xyz/palette/1f4253-a04f5b-3899ae-e08b8f-f3c08b */
@theme {
  --color-capital-blue: #1f4253;
  --color-capital-blue-50: #eaf8ff;
  --color-capital-blue-100: #d7effd;
  --color-capital-blue-200: #c0ddec;
  --color-capital-blue-300: #a5c6d7;
  --color-capital-blue-400: #82a6b9;
  --color-capital-blue-500: #65899c;
  --color-capital-blue-600: #4b6e80;
  --color-capital-blue-700: #365666;
  --color-capital-blue-800: #1f4253;
  --color-capital-blue-900: #1b323e;
  --color-capital-blue-950: #0e1f27;
  --color-cherry-berry: #a04f5b;
  --color-cherry-berry-50: #fff1f2;
  --color-cherry-berry-100: #ffe3e6;
  --color-cherry-berry-200: #ffc7cc;
  --color-cherry-berry-300: #f6a9b1;
  --color-cherry-berry-400: #da8690;
  --color-cherry-berry-500: #be6975;
  --color-cherry-berry-600: #a04f5b;
  --color-cherry-berry-700: #833b46;
  --color-cherry-berry-800: #6a2b35;
  --color-cherry-berry-900: #541e28;
  --color-cherry-berry-950: #371017;
  --color-rainy-mood: #3899ae;
  --color-rainy-mood-50: #e7faff;
  --color-rainy-mood-100: #cdf5ff;
  --color-rainy-mood-200: #a6e6f6;
  --color-rainy-mood-300: #87d2e4;
  --color-rainy-mood-400: #5cb4c8;
  --color-rainy-mood-500: #3899ae;
  --color-rainy-mood-600: #107d91;
  --color-rainy-mood-700: #006374;
  --color-rainy-mood-800: #004d5b;
  --color-rainy-mood-900: #003b46;
  --color-rainy-mood-950: #00252d;
  --color-boho-blush: #e08b8f;
  --color-boho-blush-50: #fff4f4;
  --color-boho-blush-100: #ffe7e8;
  --color-boho-blush-200: #ffcccd;
  --color-boho-blush-300: #f8afb1;
  --color-boho-blush-400: #e08b8f;
  --color-boho-blush-500: #c16f73;
  --color-boho-blush-600: #a25459;
  --color-boho-blush-700: #853e44;
  --color-boho-blush-800: #6b2d33;
  --color-boho-blush-900: #542025;
  --color-boho-blush-950: #361115;
  --color-dusty-boots: #f3c08b;
  --color-dusty-boots-50: #fff9f4;
  --color-dusty-boots-100: #ffefdf;
  --color-dusty-boots-200: #fdd9b5;
  --color-dusty-boots-300: #f3c08b;
  --color-dusty-boots-400: #ce9f6f;
  --color-dusty-boots-500: #b1824e;
  --color-dusty-boots-600: #936532;
  --color-dusty-boots-700: #774e1d;
  --color-dusty-boots-800: #5e3b0d;
  --color-dusty-boots-900: #492b04;
  --color-dusty-boots-950: #2f1a01;
}