Dwarf Fortress to Wasabi Nori Color Palette

About this palette

Dwarf Fortress to Wasabi Nori is a 5-color dark, warm, earthy palette: #210001 (Dwarf Fortress), #281600 (Shadow Play), #606C00 (Serrano Pepper), #6B2845 (Siren), #313600 (Wasabi Nori). It mixes brown, green, red tones and feels warm overall. The strongest text pairing is #210001 on #606C00 with a contrast ratio of 3.42:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(33, 0, 1)	hsl(358, 100%, 6%)
Shadow Play	rgb(40, 22, 0)	hsl(33, 100%, 8%)
Serrano Pepper	rgb(96, 108, 0)	hsl(67, 100%, 21%)
Siren	rgb(107, 40, 69)	hsl(334, 46%, 29%)
Wasabi Nori	rgb(49, 54, 0)	hsl(66, 100%, 11%)

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.

Aa3.42:1 Poor#210001 on #606C00
Aa3.42:1 Poor#606C00 on #210001
Aa3.02:1 Poor#281600 on #606C00
Aa3.02:1 Poor#606C00 on #281600

Color blindness preview

CSS variables

/* Dwarf Fortress to Wasabi Nori — https://swatchly.xyz/palette/210001-281600-606c00-6b2845-313600 */
:root {
  --dwarf-fortress: #210001;
  --shadow-play: #281600;
  --serrano-pepper: #606c00;
  --siren: #6b2845;
  --wasabi-nori: #313600;
}

Tailwind CSS v4

/* Dwarf Fortress to Wasabi Nori — https://swatchly.xyz/palette/210001-281600-606c00-6b2845-313600 */
@theme {
  --color-dwarf-fortress: #210001;
  --color-dwarf-fortress-50: #fff2f0;
  --color-dwarf-fortress-100: #ffe4e1;
  --color-dwarf-fortress-200: #f5ccc8;
  --color-dwarf-fortress-300: #e2b4af;
  --color-dwarf-fortress-400: #c5938e;
  --color-dwarf-fortress-500: #a5736e;
  --color-dwarf-fortress-600: #835652;
  --color-dwarf-fortress-700: #653e3a;
  --color-dwarf-fortress-800: #492a27;
  --color-dwarf-fortress-900: #321a18;
  --color-dwarf-fortress-950: #210001;
  --color-shadow-play: #281600;
  --color-shadow-play-50: #fff3e6;
  --color-shadow-play-100: #f8e8d7;
  --color-shadow-play-200: #e7d4bf;
  --color-shadow-play-300: #d2bda5;
  --color-shadow-play-400: #b49d83;
  --color-shadow-play-500: #988166;
  --color-shadow-play-600: #7b664c;
  --color-shadow-play-700: #624f38;
  --color-shadow-play-800: #4c3b28;
  --color-shadow-play-900: #392c1c;
  --color-shadow-play-950: #281600;
  --color-serrano-pepper: #606c00;
  --color-serrano-pepper-50: #f1fccb;
  --color-serrano-pepper-100: #e6f1b9;
  --color-serrano-pepper-200: #d0dd9a;
  --color-serrano-pepper-300: #b8c679;
  --color-serrano-pepper-400: #97a54f;
  --color-serrano-pepper-500: #7b882d;
  --color-serrano-pepper-600: #606c00;
  --color-serrano-pepper-700: #4c5600;
  --color-serrano-pepper-800: #3b4300;
  --color-serrano-pepper-900: #2d3400;
  --color-serrano-pepper-950: #1c2000;
  --color-siren: #6b2845;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe2ec;
  --color-siren-200: #ffc5d9;
  --color-siren-300: #efaac3;
  --color-siren-400: #d288a4;
  --color-siren-500: #b76c89;
  --color-siren-600: #99526e;
  --color-siren-700: #7e3e58;
  --color-siren-800: #6b2845;
  --color-siren-900: #502135;
  --color-siren-950: #351221;
  --color-wasabi-nori: #313600;
  --color-wasabi-nori-50: #f4f9db;
  --color-wasabi-nori-100: #e9efce;
  --color-wasabi-nori-200: #d6dcb5;
  --color-wasabi-nori-300: #bfc699;
  --color-wasabi-nori-400: #9fa775;
  --color-wasabi-nori-500: #848b58;
  --color-wasabi-nori-600: #6a703f;
  --color-wasabi-nori-700: #53592c;
  --color-wasabi-nori-800: #40461e;
  --color-wasabi-nori-900: #313600;
  --color-wasabi-nori-950: #1e2108;
}