Up in the Air to Melanzane color palette

BBD5DBUp in the Air B48F87Nude Lips 709879Money 52685BDark Forest 1B4B58Nocturnal Expedition 342732Melanzane

Open in generator Export PNG, PDF, ASE…

About this palette

Up in the Air to Melanzane is a 6-color muted palette: #BBD5DB (Up in the Air), #B48F87 (Nude Lips), #709879 (Money), #52685B (Dark Forest), #1B4B58 (Nocturnal Expedition), #342732 (Melanzane). It mixes gray, red, green, blue tones and feels cool overall. The strongest text pairing is #BBD5DB on #342732 with a contrast ratio of 9.21:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Up in the Air	rgb(187, 213, 219)	hsl(191, 31%, 80%)
Nude Lips	rgb(180, 143, 135)	hsl(11, 23%, 62%)
Money	rgb(112, 152, 121)	hsl(134, 16%, 52%)
Dark Forest	rgb(82, 104, 91)	hsl(145, 12%, 36%)
Nocturnal Expedition	rgb(27, 75, 88)	hsl(193, 53%, 23%)
Melanzane	rgb(52, 39, 50)	hsl(309, 14%, 18%)

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.

Aa9.21:1 Very good#BBD5DB on #342732
Aa9.21:1 Very good#342732 on #BBD5DB
Aa6.22:1 Good#BBD5DB on #1B4B58
Aa6.22:1 Good#1B4B58 on #BBD5DB
Aa4.87:1 Good#B48F87 on #342732
Aa4.87:1 Good#342732 on #B48F87
Aa4.36:1 Poor#709879 on #342732
Aa4.36:1 Poor#342732 on #709879

Color blindness preview

CSS variables

/* Up in the Air to Melanzane — https://swatchly.xyz/palette/bbd5db-b48f87-709879-52685b-1b4b58-342732 */
:root {
  --up-in-the-air: #bbd5db;
  --nude-lips: #b48f87;
  --money: #709879;
  --dark-forest: #52685b;
  --nocturnal-expedition: #1b4b58;
  --melanzane: #342732;
}

Tailwind CSS v4

/* Up in the Air to Melanzane — https://swatchly.xyz/palette/bbd5db-b48f87-709879-52685b-1b4b58-342732 */
@theme {
  --color-up-in-the-air: #bbd5db;
  --color-up-in-the-air-50: #e4f3f7;
  --color-up-in-the-air-100: #d7e8ec;
  --color-up-in-the-air-200: #bbd5db;
  --color-up-in-the-air-300: #a9bfc4;
  --color-up-in-the-air-400: #89a1a7;
  --color-up-in-the-air-500: #6f878d;
  --color-up-in-the-air-600: #576e73;
  --color-up-in-the-air-700: #43585d;
  --color-up-in-the-air-800: #33464a;
  --color-up-in-the-air-900: #263639;
  --color-up-in-the-air-950: #162124;
  --color-nude-lips: #b48f87;
  --color-nude-lips-50: #ffeeea;
  --color-nude-lips-100: #fae0da;
  --color-nude-lips-200: #e8cac3;
  --color-nude-lips-300: #d3b1a9;
  --color-nude-lips-400: #b48f87;
  --color-nude-lips-500: #99766e;
  --color-nude-lips-600: #7f5d56;
  --color-nude-lips-700: #674943;
  --color-nude-lips-800: #523933;
  --color-nude-lips-900: #412b27;
  --color-nude-lips-950: #2b1b17;
  --color-money: #709879;
  --color-money-50: #e6fdeb;
  --color-money-100: #dcf5e1;
  --color-money-200: #c6e4cc;
  --color-money-300: #add0b4;
  --color-money-400: #8cb294;
  --color-money-500: #709879;
  --color-money-600: #557c5e;
  --color-money-700: #3f6348;
  --color-money-800: #2e4e36;
  --color-money-900: #213c28;
  --color-money-950: #122517;
  --color-dark-forest: #52685b;
  --color-dark-forest-50: #ebf9f1;
  --color-dark-forest-100: #deeee4;
  --color-dark-forest-200: #c6d9ce;
  --color-dark-forest-300: #acc1b5;
  --color-dark-forest-400: #8aa193;
  --color-dark-forest-500: #6d8476;
  --color-dark-forest-600: #52685b;
  --color-dark-forest-700: #405347;
  --color-dark-forest-800: #304137;
  --color-dark-forest-900: #24322a;
  --color-dark-forest-950: #151f19;
  --color-nocturnal-expedition: #1b4b58;
  --color-nocturnal-expedition-50: #e6f9ff;
  --color-nocturnal-expedition-100: #d3f1fb;
  --color-nocturnal-expedition-200: #badfea;
  --color-nocturnal-expedition-300: #a0c9d6;
  --color-nocturnal-expedition-400: #7dabb9;
  --color-nocturnal-expedition-500: #608f9e;
  --color-nocturnal-expedition-600: #477582;
  --color-nocturnal-expedition-700: #335e6a;
  --color-nocturnal-expedition-800: #1b4b58;
  --color-nocturnal-expedition-900: #183943;
  --color-nocturnal-expedition-950: #0c242b;
  --color-melanzane: #342732;
  --color-melanzane-50: #fbf2fa;
  --color-melanzane-100: #f2e7f0;
  --color-melanzane-200: #e0d3dd;
  --color-melanzane-300: #cabcc8;
  --color-melanzane-400: #aa9aa7;
  --color-melanzane-500: #8d7e8b;
  --color-melanzane-600: #71626f;
  --color-melanzane-700: #584b56;
  --color-melanzane-800: #433841;
  --color-melanzane-900: #342732;
  --color-melanzane-950: #1e181d;
}