Fernweh to Packing Paper Color Palette

About this palette

Fernweh to Packing Paper is a 5-color warm, earthy, vintage palette: #937A21 (Fernweh), #515173 (Intergalactic), #E3D192 (Honeycomb Glow), #2D3A61 (Mediaeval Blue), #B79C56 (Packing Paper). It mixes yellow, purple, blue tones and feels warm overall. The strongest text pairing is #E3D192 on #2D3A61 with a contrast ratio of 7.30:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fernweh	rgb(147, 122, 33)	hsl(47, 63%, 35%)
Intergalactic	rgb(81, 81, 115)	hsl(240, 17%, 38%)
Honeycomb Glow	rgb(227, 209, 146)	hsl(47, 59%, 73%)
Mediaeval Blue	rgb(45, 58, 97)	hsl(225, 37%, 28%)
Packing Paper	rgb(183, 156, 86)	hsl(43, 40%, 53%)

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.30:1 Very good#E3D192 on #2D3A61
Aa7.30:1 Very good#2D3A61 on #E3D192
Aa4.97:1 Good#515173 on #E3D192
Aa4.97:1 Good#E3D192 on #515173
Aa4.18:1 Poor#2D3A61 on #B79C56
Aa4.18:1 Poor#B79C56 on #2D3A61

Color blindness preview

CSS variables

/* Fernweh to Packing Paper — https://swatchly.xyz/palette/937a21-515173-e3d192-2d3a61-b79c56 */
:root {
  --fernweh: #937a21;
  --intergalactic: #515173;
  --honeycomb-glow: #e3d192;
  --mediaeval-blue: #2d3a61;
  --packing-paper: #b79c56;
}

Tailwind CSS v4

/* Fernweh to Packing Paper — https://swatchly.xyz/palette/937a21-515173-e3d192-2d3a61-b79c56 */
@theme {
  --color-fernweh: #937a21;
  --color-fernweh-50: #fff3ce;
  --color-fernweh-100: #f8e7b3;
  --color-fernweh-200: #e5d193;
  --color-fernweh-300: #cfb971;
  --color-fernweh-400: #b09745;
  --color-fernweh-500: #937a21;
  --color-fernweh-600: #796100;
  --color-fernweh-700: #604d00;
  --color-fernweh-800: #4c3c00;
  --color-fernweh-900: #3b2f00;
  --color-fernweh-950: #261d00;
  --color-intergalactic: #515173;
  --color-intergalactic-50: #f4f4ff;
  --color-intergalactic-100: #e8e9ff;
  --color-intergalactic-200: #d3d4f2;
  --color-intergalactic-300: #bcbddf;
  --color-intergalactic-400: #9d9dc2;
  --color-intergalactic-500: #8182a7;
  --color-intergalactic-600: #67688a;
  --color-intergalactic-700: #515173;
  --color-intergalactic-800: #3f3f5a;
  --color-intergalactic-900: #303047;
  --color-intergalactic-950: #1d1d2e;
  --color-honeycomb-glow: #e3d192;
  --color-honeycomb-glow-50: #fbf1cd;
  --color-honeycomb-glow-100: #f2e6bd;
  --color-honeycomb-glow-200: #e3d192;
  --color-honeycomb-glow-300: #cbbc86;
  --color-honeycomb-glow-400: #ae9d62;
  --color-honeycomb-glow-500: #948346;
  --color-honeycomb-glow-600: #79692d;
  --color-honeycomb-glow-700: #62531b;
  --color-honeycomb-glow-800: #4f410d;
  --color-honeycomb-glow-900: #3d3205;
  --color-honeycomb-glow-950: #271f01;
  --color-mediaeval-blue: #2d3a61;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e3ebff;
  --color-mediaeval-blue-200: #c9d7fb;
  --color-mediaeval-blue-300: #afbfe8;
  --color-mediaeval-blue-400: #8d9eca;
  --color-mediaeval-blue-500: #7181ad;
  --color-mediaeval-blue-600: #57668f;
  --color-mediaeval-blue-700: #414e73;
  --color-mediaeval-blue-800: #2d3a61;
  --color-mediaeval-blue-900: #242d47;
  --color-mediaeval-blue-950: #141b2d;
  --color-packing-paper: #b79c56;
  --color-packing-paper-50: #fff4d7;
  --color-packing-paper-100: #fae9bd;
  --color-packing-paper-200: #e9d4a0;
  --color-packing-paper-300: #d4bd81;
  --color-packing-paper-400: #b79c56;
  --color-packing-paper-500: #9b813a;
  --color-packing-paper-600: #80671f;
  --color-packing-paper-700: #685108;
  --color-packing-paper-800: #523f00;
  --color-packing-paper-900: #403000;
  --color-packing-paper-950: #291e00;
}