Nude Lips to Black Forest Color Palette

About this palette

Nude Lips to Black Forest is a 4-color muted palette: #B4988E (Nude Lips), #EDFBFF (Cold White), #1E1A21 (Night Demons), #576153 (Black Forest). It mixes orange, white, gray tones and feels warm overall. The strongest text pairing is #EDFBFF on #1E1A21 with a contrast ratio of 16.20:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nude Lips	rgb(180, 152, 142)	hsl(16, 20%, 63%)
Cold White	rgb(237, 251, 255)	hsl(193, 100%, 96%)
Night Demons	rgb(30, 26, 33)	hsl(274, 12%, 12%)
Black Forest	rgb(87, 97, 83)	hsl(103, 8%, 35%)

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.

Aa16.20:1 Super#EDFBFF on #1E1A21
Aa16.20:1 Super#1E1A21 on #EDFBFF
Aa6.39:1 Good#B4988E on #1E1A21
Aa6.39:1 Good#1E1A21 on #B4988E
Aa6.12:1 Good#EDFBFF on #576153
Aa6.12:1 Good#576153 on #EDFBFF

Color blindness preview

CSS variables

/* Nude Lips to Black Forest — https://swatchly.xyz/palette/b4988e-edfbff-1e1a21-576153 */
:root {
  --nude-lips: #b4988e;
  --cold-white: #edfbff;
  --night-demons: #1e1a21;
  --black-forest: #576153;
}

Tailwind CSS v4

/* Nude Lips to Black Forest — https://swatchly.xyz/palette/b4988e-edfbff-1e1a21-576153 */
@theme {
  --color-nude-lips: #b4988e;
  --color-nude-lips-50: #fff1ec;
  --color-nude-lips-100: #f8e5de;
  --color-nude-lips-200: #e7d0c8;
  --color-nude-lips-300: #d2b9b0;
  --color-nude-lips-400: #b4988e;
  --color-nude-lips-500: #987d74;
  --color-nude-lips-600: #7d645b;
  --color-nude-lips-700: #654e46;
  --color-nude-lips-800: #503c35;
  --color-nude-lips-900: #3f2e28;
  --color-nude-lips-950: #281c18;
  --color-cold-white: #edfbff;
  --color-cold-white-50: #edfbff;
  --color-cold-white-100: #e7eff2;
  --color-cold-white-200: #d1dbde;
  --color-cold-white-300: #b9c5c8;
  --color-cold-white-400: #98a5a8;
  --color-cold-white-500: #7d898d;
  --color-cold-white-600: #626e72;
  --color-cold-white-700: #4d575b;
  --color-cold-white-800: #3b4447;
  --color-cold-white-900: #2c3437;
  --color-cold-white-950: #1b2022;
  --color-night-demons: #1e1a21;
  --color-night-demons-50: #f7f4f9;
  --color-night-demons-100: #edeaf0;
  --color-night-demons-200: #dad6dd;
  --color-night-demons-300: #c3bfc7;
  --color-night-demons-400: #a49fa8;
  --color-night-demons-500: #88838c;
  --color-night-demons-600: #6d6871;
  --color-night-demons-700: #565159;
  --color-night-demons-800: #423e45;
  --color-night-demons-900: #312e34;
  --color-night-demons-950: #1e1a21;
  --color-black-forest: #576153;
  --color-black-forest-50: #f1f7ee;
  --color-black-forest-100: #e6eee4;
  --color-black-forest-200: #d4dcd0;
  --color-black-forest-300: #bec7ba;
  --color-black-forest-400: #9faa9b;
  --color-black-forest-500: #859081;
  --color-black-forest-600: #6c7768;
  --color-black-forest-700: #576153;
  --color-black-forest-800: #434c40;
  --color-black-forest-900: #333a30;
  --color-black-forest-950: #1f251d;
}