Wasabi Nori to Black-Hearted Color Palette

About this palette

Wasabi Nori to Black-Hearted is a 5-color dark, warm, earthy palette: #3E3000 (Wasabi Nori), #74580D (Coffee Adept), #290007 (Belladonna), #5E454A (Plum Intended), #381A2C (Black-Hearted). It mixes brown, red tones and feels warm overall. The strongest text pairing is #74580D on #290007 with a contrast ratio of 2.87:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(62, 48, 0)	hsl(46, 100%, 12%)
Coffee Adept	rgb(116, 88, 13)	hsl(44, 80%, 25%)
Belladonna	rgb(41, 0, 7)	hsl(350, 100%, 8%)
Plum Intended	rgb(94, 69, 74)	hsl(348, 15%, 32%)
Black-Hearted	rgb(56, 26, 44)	hsl(324, 37%, 16%)

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

/* Wasabi Nori to Black-Hearted — https://swatchly.xyz/palette/3e3000-74580d-290007-5e454a-381a2c */
:root {
  --wasabi-nori: #3e3000;
  --coffee-adept: #74580d;
  --belladonna: #290007;
  --plum-intended: #5e454a;
  --black-hearted: #381a2c;
}

Tailwind CSS v4

/* Wasabi Nori to Black-Hearted — https://swatchly.xyz/palette/3e3000-74580d-290007-5e454a-381a2c */
@theme {
  --color-wasabi-nori: #3e3000;
  --color-wasabi-nori-50: #fef5db;
  --color-wasabi-nori-100: #f5ebce;
  --color-wasabi-nori-200: #e3d7b4;
  --color-wasabi-nori-300: #cec099;
  --color-wasabi-nori-400: #b0a075;
  --color-wasabi-nori-500: #948558;
  --color-wasabi-nori-600: #796a3f;
  --color-wasabi-nori-700: #61532c;
  --color-wasabi-nori-800: #4c401d;
  --color-wasabi-nori-900: #3e3000;
  --color-wasabi-nori-950: #251e08;
  --color-coffee-adept: #74580d;
  --color-coffee-adept-50: #fff4dd;
  --color-coffee-adept-100: #fde9c0;
  --color-coffee-adept-200: #edd6a6;
  --color-coffee-adept-300: #dbc189;
  --color-coffee-adept-400: #bea263;
  --color-coffee-adept-500: #a58745;
  --color-coffee-adept-600: #8a6e2b;
  --color-coffee-adept-700: #74580d;
  --color-coffee-adept-800: #5c4403;
  --color-coffee-adept-900: #473400;
  --color-coffee-adept-950: #2e2000;
  --color-belladonna: #290007;
  --color-belladonna-50: #fff1f2;
  --color-belladonna-100: #ffe3e5;
  --color-belladonna-200: #f9cacc;
  --color-belladonna-300: #e6b1b4;
  --color-belladonna-400: #c99094;
  --color-belladonna-500: #aa7175;
  --color-belladonna-600: #895559;
  --color-belladonna-700: #6b3e42;
  --color-belladonna-800: #502b2e;
  --color-belladonna-900: #391c1f;
  --color-belladonna-950: #290007;
  --color-plum-intended: #5e454a;
  --color-plum-intended-50: #fff1f4;
  --color-plum-intended-100: #f9e6e9;
  --color-plum-intended-200: #e6cfd3;
  --color-plum-intended-300: #d0b6bb;
  --color-plum-intended-400: #b0949a;
  --color-plum-intended-500: #93787d;
  --color-plum-intended-600: #765d62;
  --color-plum-intended-700: #5e454a;
  --color-plum-intended-800: #493639;
  --color-plum-intended-900: #39292c;
  --color-plum-intended-950: #23181a;
  --color-black-hearted: #381a2c;
  --color-black-hearted-50: #fff0f8;
  --color-black-hearted-100: #fde3f1;
  --color-black-hearted-200: #eccdde;
  --color-black-hearted-300: #d8b5c8;
  --color-black-hearted-400: #ba95a9;
  --color-black-hearted-500: #a07b8f;
  --color-black-hearted-600: #866276;
  --color-black-hearted-700: #6e4e60;
  --color-black-hearted-800: #5a3d4d;
  --color-black-hearted-900: #49303e;
  --color-black-hearted-950: #381a2c;
}