Narwhal Grey to Black Cherry Color Palette

About this palette

Narwhal Grey to Black Cherry is a 5-color dark, warm palette: #0F0819 (Narwhal Grey), #664534 (Buckeye), #5E0C18 (Cherry Picking), #89475E (Liaison), #28131D (Black Cherry). It mixes black, brown, red tones and feels warm overall. The strongest text pairing is #0F0819 on #89475E with a contrast ratio of 2.92:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Narwhal Grey	rgb(15, 8, 25)	hsl(265, 52%, 6%)
Buckeye	rgb(102, 69, 52)	hsl(20, 32%, 30%)
Cherry Picking	rgb(94, 12, 24)	hsl(351, 77%, 21%)
Liaison	rgb(137, 71, 94)	hsl(339, 32%, 41%)
Black Cherry	rgb(40, 19, 29)	hsl(331, 36%, 12%)

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.

Color blindness preview

CSS variables

/* Narwhal Grey to Black Cherry — https://swatchly.xyz/palette/0f0819-664534-5e0c18-89475e-28131d */
:root {
  --narwhal-grey: #0f0819;
  --buckeye: #664534;
  --cherry-picking: #5e0c18;
  --liaison: #89475e;
  --black-cherry: #28131d;
}

Tailwind CSS v4

/* Narwhal Grey to Black Cherry — https://swatchly.xyz/palette/0f0819-664534-5e0c18-89475e-28131d */
@theme {
  --color-narwhal-grey: #0f0819;
  --color-narwhal-grey-50: #f7f3ff;
  --color-narwhal-grey-100: #eee8f8;
  --color-narwhal-grey-200: #dad4e7;
  --color-narwhal-grey-300: #c4bdd2;
  --color-narwhal-grey-400: #a59db4;
  --color-narwhal-grey-500: #867d95;
  --color-narwhal-grey-600: #675f75;
  --color-narwhal-grey-700: #4d4659;
  --color-narwhal-grey-800: #363140;
  --color-narwhal-grey-900: #231f2a;
  --color-narwhal-grey-950: #0f0819;
  --color-buckeye: #664534;
  --color-buckeye-50: #fff2ec;
  --color-buckeye-100: #ffe5d9;
  --color-buckeye-200: #edcfc0;
  --color-buckeye-300: #d8b6a5;
  --color-buckeye-400: #b99482;
  --color-buckeye-500: #9c7865;
  --color-buckeye-600: #7e5d4c;
  --color-buckeye-700: #664534;
  --color-buckeye-800: #4f3629;
  --color-buckeye-900: #3e291e;
  --color-buckeye-950: #271810;
  --color-cherry-picking: #5e0c18;
  --color-cherry-picking-50: #fff1f1;
  --color-cherry-picking-100: #ffe4e3;
  --color-cherry-picking-200: #ffc7c6;
  --color-cherry-picking-300: #f9a8a7;
  --color-cherry-picking-400: #dd8585;
  --color-cherry-picking-500: #c06869;
  --color-cherry-picking-600: #a14e50;
  --color-cherry-picking-700: #84393c;
  --color-cherry-picking-800: #6a292c;
  --color-cherry-picking-900: #5e0c18;
  --color-cherry-picking-950: #370f11;
  --color-liaison: #89475e;
  --color-liaison-50: #fff1f5;
  --color-liaison-100: #ffe3eb;
  --color-liaison-200: #ffc8d8;
  --color-liaison-300: #f0b0c3;
  --color-liaison-400: #d590a6;
  --color-liaison-500: #bc758c;
  --color-liaison-600: #a05c73;
  --color-liaison-700: #89475e;
  --color-liaison-800: #6d3649;
  --color-liaison-900: #562738;
  --color-liaison-950: #391623;
  --color-black-cherry: #28131d;
  --color-black-cherry-50: #fff1f6;
  --color-black-cherry-100: #f9e5ed;
  --color-black-cherry-200: #e7d0da;
  --color-black-cherry-300: #d2b9c3;
  --color-black-cherry-400: #b499a4;
  --color-black-cherry-500: #987c88;
  --color-black-cherry-600: #7b616d;
  --color-black-cherry-700: #624b55;
  --color-black-cherry-800: #4c3841;
  --color-black-cherry-900: #3a2931;
  --color-black-cherry-950: #28131d;
}