Dusty Duchess to Wild West Color Palette

About this palette

Dusty Duchess to Wild West is a 5-color muted, vintage palette: #B48678 (Dusty Duchess), #AAC4D0 (Airborne), #F9DFD3 (Pink Parfait), #314149 (Little Mermaid), #825B52 (Wild West). It mixes red, gray tones and feels warm overall. The strongest text pairing is #F9DFD3 on #314149 with a contrast ratio of 8.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dusty Duchess	rgb(180, 134, 120)	hsl(14, 29%, 59%)
Airborne	rgb(170, 196, 208)	hsl(199, 29%, 74%)
Pink Parfait	rgb(249, 223, 211)	hsl(19, 76%, 90%)
Little Mermaid	rgb(49, 65, 73)	hsl(200, 20%, 24%)
Wild West	rgb(130, 91, 82)	hsl(11, 23%, 42%)

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.33:1 Very good#F9DFD3 on #314149
Aa8.33:1 Very good#314149 on #F9DFD3
Aa5.81:1 Good#AAC4D0 on #314149
Aa5.81:1 Good#314149 on #AAC4D0
Aa4.63:1 Good#F9DFD3 on #825B52
Aa4.63:1 Good#825B52 on #F9DFD3
Aa3.34:1 Poor#B48678 on #314149
Aa3.34:1 Poor#314149 on #B48678

Color blindness preview

CSS variables

/* Dusty Duchess to Wild West — https://swatchly.xyz/palette/b48678-aac4d0-f9dfd3-314149-825b52 */
:root {
  --dusty-duchess: #b48678;
  --airborne: #aac4d0;
  --pink-parfait: #f9dfd3;
  --little-mermaid: #314149;
  --wild-west: #825b52;
}

Tailwind CSS v4

/* Dusty Duchess to Wild West — https://swatchly.xyz/palette/b48678-aac4d0-f9dfd3-314149-825b52 */
@theme {
  --color-dusty-duchess: #b48678;
  --color-dusty-duchess-50: #fff5f2;
  --color-dusty-duchess-100: #ffebe5;
  --color-dusty-duchess-200: #f9d5ca;
  --color-dusty-duchess-300: #e7bfb3;
  --color-dusty-duchess-400: #cda093;
  --color-dusty-duchess-500: #b48678;
  --color-dusty-duchess-600: #95695c;
  --color-dusty-duchess-700: #795145;
  --color-dusty-duchess-800: #613e33;
  --color-dusty-duchess-900: #4b2e25;
  --color-dusty-duchess-950: #301b14;
  --color-airborne: #aac4d0;
  --color-airborne-50: #e8f7fe;
  --color-airborne-100: #dcedf5;
  --color-airborne-200: #c6dae3;
  --color-airborne-300: #aac4d0;
  --color-airborne-400: #8ca5b0;
  --color-airborne-500: #718a95;
  --color-airborne-600: #586f7a;
  --color-airborne-700: #435862;
  --color-airborne-800: #33454e;
  --color-airborne-900: #26363d;
  --color-airborne-950: #162126;
  --color-pink-parfait: #f9dfd3;
  --color-pink-parfait-50: #fcece5;
  --color-pink-parfait-100: #f9dfd3;
  --color-pink-parfait-200: #e2cec5;
  --color-pink-parfait-300: #ceb8ae;
  --color-pink-parfait-400: #b0998e;
  --color-pink-parfait-500: #967f74;
  --color-pink-parfait-600: #7b655b;
  --color-pink-parfait-700: #645047;
  --color-pink-parfait-800: #4f3e36;
  --color-pink-parfait-900: #3e2f28;
  --color-pink-parfait-950: #271d18;
  --color-little-mermaid: #314149;
  --color-little-mermaid-50: #ecf7fd;
  --color-little-mermaid-100: #e1edf4;
  --color-little-mermaid-200: #ccdae1;
  --color-little-mermaid-300: #b3c3cb;
  --color-little-mermaid-400: #91a3ac;
  --color-little-mermaid-500: #758790;
  --color-little-mermaid-600: #5b6c74;
  --color-little-mermaid-700: #45545c;
  --color-little-mermaid-800: #314149;
  --color-little-mermaid-900: #273137;
  --color-little-mermaid-950: #161e22;
  --color-wild-west: #825b52;
  --color-wild-west-50: #fff2ef;
  --color-wild-west-100: #ffe3dc;
  --color-wild-west-200: #efccc4;
  --color-wild-west-300: #dab4ab;
  --color-wild-west-400: #bb9289;
  --color-wild-west-500: #9f766c;
  --color-wild-west-600: #825b52;
  --color-wild-west-700: #69473f;
  --color-wild-west-800: #543630;
  --color-wild-west-900: #422923;
  --color-wild-west-950: #2a1814;
}