Bangalore to Fernweh color palette

B2A887Bangalore D7C697Golden Mist 3C2F07Secret Passage 604E1AJungle Beat 766941Lizard 967E31Fernweh

Open in generator Export PNG, PDF, ASE…

About this palette

Bangalore to Fernweh is a 6-color warm, earthy, vintage, monochromatic palette: #B2A887 (Bangalore), #D7C697 (Golden Mist), #3C2F07 (Secret Passage), #604E1A (Jungle Beat), #766941 (Lizard), #967E31 (Fernweh). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #D7C697 on #3C2F07 with a contrast ratio of 7.75:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bangalore	rgb(178, 168, 135)	hsl(46, 22%, 61%)
Golden Mist	rgb(215, 198, 151)	hsl(44, 44%, 72%)
Secret Passage	rgb(60, 47, 7)	hsl(45, 79%, 13%)
Jungle Beat	rgb(96, 78, 26)	hsl(45, 57%, 24%)
Lizard	rgb(118, 105, 65)	hsl(45, 29%, 36%)
Fernweh	rgb(150, 126, 49)	hsl(46, 51%, 39%)

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.75:1 Very good#D7C697 on #3C2F07
Aa7.75:1 Very good#3C2F07 on #D7C697
Aa5.52:1 Good#B2A887 on #3C2F07
Aa5.52:1 Good#3C2F07 on #B2A887
Aa4.77:1 Good#D7C697 on #604E1A
Aa4.77:1 Good#604E1A on #D7C697
Aa3.40:1 Poor#B2A887 on #604E1A
Aa3.40:1 Poor#604E1A on #B2A887

Color blindness preview

CSS variables

/* Bangalore to Fernweh — https://swatchly.xyz/palette/b2a887-d7c697-3c2f07-604e1a-766941-967e31 */
:root {
  --bangalore: #b2a887;
  --golden-mist: #d7c697;
  --secret-passage: #3c2f07;
  --jungle-beat: #604e1a;
  --lizard: #766941;
  --fernweh: #967e31;
}

Tailwind CSS v4

/* Bangalore to Fernweh — https://swatchly.xyz/palette/b2a887-d7c697-3c2f07-604e1a-766941-967e31 */
@theme {
  --color-bangalore: #b2a887;
  --color-bangalore-50: #fdf8e5;
  --color-bangalore-100: #f5efda;
  --color-bangalore-200: #e3dcc4;
  --color-bangalore-300: #cfc7ab;
  --color-bangalore-400: #b2a887;
  --color-bangalore-500: #958b6b;
  --color-bangalore-600: #797051;
  --color-bangalore-700: #60583c;
  --color-bangalore-800: #4b442b;
  --color-bangalore-900: #3a331f;
  --color-bangalore-950: #241f10;
  --color-golden-mist: #d7c697;
  --color-golden-mist-50: #fff8e5;
  --color-golden-mist-100: #f9efd3;
  --color-golden-mist-200: #e8dcbb;
  --color-golden-mist-300: #d7c697;
  --color-golden-mist-400: #b5a57a;
  --color-golden-mist-500: #99895c;
  --color-golden-mist-600: #7d6d42;
  --color-golden-mist-700: #64562e;
  --color-golden-mist-800: #4e421e;
  --color-golden-mist-900: #3c3213;
  --color-golden-mist-950: #261e09;
  --color-secret-passage: #3c2f07;
  --color-secret-passage-50: #fdf5de;
  --color-secret-passage-100: #f4ebd1;
  --color-secret-passage-200: #e2d7b8;
  --color-secret-passage-300: #cdc09d;
  --color-secret-passage-400: #aea07a;
  --color-secret-passage-500: #93845d;
  --color-secret-passage-600: #776944;
  --color-secret-passage-700: #5f5330;
  --color-secret-passage-800: #4a3f22;
  --color-secret-passage-900: #3c2f07;
  --color-secret-passage-950: #231d0b;
  --color-jungle-beat: #604e1a;
  --color-jungle-beat-50: #fff5d9;
  --color-jungle-beat-100: #f7eaca;
  --color-jungle-beat-200: #e5d6ae;
  --color-jungle-beat-300: #cfbe91;
  --color-jungle-beat-400: #b09d6b;
  --color-jungle-beat-500: #94814e;
  --color-jungle-beat-600: #786534;
  --color-jungle-beat-700: #604e1a;
  --color-jungle-beat-800: #4b3d15;
  --color-jungle-beat-900: #3a2e0c;
  --color-jungle-beat-950: #241c04;
  --color-lizard: #766941;
  --color-lizard-50: #fdf5dd;
  --color-lizard-100: #f3ebd0;
  --color-lizard-200: #e1d6b6;
  --color-lizard-300: #cbbf9b;
  --color-lizard-400: #ada077;
  --color-lizard-500: #91845b;
  --color-lizard-600: #766941;
  --color-lizard-700: #5e532f;
  --color-lizard-800: #4a4021;
  --color-lizard-900: #3a3116;
  --color-lizard-950: #241e0b;
  --color-fernweh: #967e31;
  --color-fernweh-50: #fff4d2;
  --color-fernweh-100: #f8e8b9;
  --color-fernweh-200: #e6d39b;
  --color-fernweh-300: #d1bb7b;
  --color-fernweh-400: #b29b52;
  --color-fernweh-500: #967e31;
  --color-fernweh-600: #7b6515;
  --color-fernweh-700: #644f00;
  --color-fernweh-800: #4e3e00;
  --color-fernweh-900: #3d3000;
  --color-fernweh-950: #271d00;
}