Start generating

Wasabi Nori to Green Goddess color palette

363100Wasabi Nori006443Jewel637C2CTopiary GreenB09756KathmanduA9C189Nile77B08BGreen Goddess
Open in generator Export PNG, PDF, ASE…

About this palette

Wasabi Nori to Green Goddess is a 6-color cool, earthy palette: #363100 (Wasabi Nori), #006443 (Jewel), #637C2C (Topiary Green), #B09756 (Kathmandu), #A9C189 (Nile), #77B08B (Green Goddess). It mixes brown, green, yellow tones and feels cool overall. The strongest text pairing is #363100 on #A9C189 with a contrast ratio of 6.69:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Wasabi Norirgb(54, 49, 0)hsl(54, 100%, 11%)
Jewelrgb(0, 100, 67)hsl(160, 100%, 20%)
Topiary Greenrgb(99, 124, 44)hsl(79, 48%, 33%)
Kathmandurgb(176, 151, 86)hsl(43, 36%, 51%)
Nilergb(169, 193, 137)hsl(86, 31%, 65%)
Green Goddessrgb(119, 176, 139)hsl(141, 27%, 58%)

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.

  • Aa6.69:1 Good#363100 on #A9C189
  • Aa6.69:1 Good#A9C189 on #363100
  • Aa5.24:1 Good#363100 on #77B08B
  • Aa5.24:1 Good#77B08B on #363100
  • Aa4.64:1 Good#363100 on #B09756
  • Aa4.64:1 Good#B09756 on #363100
  • Aa3.68:1 Poor#006443 on #A9C189
  • Aa3.68:1 Poor#A9C189 on #006443

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Wasabi Nori to Green Goddess — https://swatchly.xyz/palette/363100-006443-637c2c-b09756-a9c189-77b08b */
:root {
  --wasabi-nori: #363100;
  --jewel: #006443;
  --topiary-green: #637c2c;
  --kathmandu: #b09756;
  --nile: #a9c189;
  --green-goddess: #77b08b;
}

Tailwind CSS v4

/* Wasabi Nori to Green Goddess — https://swatchly.xyz/palette/363100-006443-637c2c-b09756-a9c189-77b08b */
@theme {
  --color-wasabi-nori: #363100;
  --color-wasabi-nori-50: #f9f7dc;
  --color-wasabi-nori-100: #efedce;
  --color-wasabi-nori-200: #dddab5;
  --color-wasabi-nori-300: #c7c39a;
  --color-wasabi-nori-400: #a7a376;
  --color-wasabi-nori-500: #8c8759;
  --color-wasabi-nori-600: #716c3f;
  --color-wasabi-nori-700: #59552c;
  --color-wasabi-nori-800: #45411e;
  --color-wasabi-nori-900: #363100;
  --color-wasabi-nori-950: #201e08;
  --color-jewel: #006443;
  --color-jewel-50: #dcffec;
  --color-jewel-100: #c8f8df;
  --color-jewel-200: #ade7c9;
  --color-jewel-300: #8ed2b0;
  --color-jewel-400: #67b38f;
  --color-jewel-500: #479773;
  --color-jewel-600: #2a7b5a;
  --color-jewel-700: #006443;
  --color-jewel-800: #024e34;
  --color-jewel-900: #003d27;
  --color-jewel-950: #002617;
  --color-topiary-green: #637c2c;
  --color-topiary-green-50: #ecfdd1;
  --color-topiary-green-100: #e2f5c4;
  --color-topiary-green-200: #cee3a9;
  --color-topiary-green-300: #b6cf8c;
  --color-topiary-green-400: #97b166;
  --color-topiary-green-500: #7c9648;
  --color-topiary-green-600: #637c2c;
  --color-topiary-green-700: #4d6316;
  --color-topiary-green-800: #3b4e05;
  --color-topiary-green-900: #2c3c00;
  --color-topiary-green-950: #1a2500;
  --color-kathmandu: #b09756;
  --color-kathmandu-50: #fff1cf;
  --color-kathmandu-100: #f7e6bc;
  --color-kathmandu-200: #e4d09e;
  --color-kathmandu-300: #cfb87f;
  --color-kathmandu-400: #b09756;
  --color-kathmandu-500: #957d3c;
  --color-kathmandu-600: #7b6423;
  --color-kathmandu-700: #644f10;
  --color-kathmandu-800: #503d03;
  --color-kathmandu-900: #3f2f00;
  --color-kathmandu-950: #291e00;
  --color-nile: #a9c189;
  --color-nile-50: #e7f6d5;
  --color-nile-100: #dbecc6;
  --color-nile-200: #c4d7ab;
  --color-nile-300: #a9c189;
  --color-nile-400: #8ca36e;
  --color-nile-500: #738954;
  --color-nile-600: #5b703d;
  --color-nile-700: #475a2b;
  --color-nile-800: #37471e;
  --color-nile-900: #2b3815;
  --color-nile-950: #192309;
  --color-green-goddess: #77b08b;
  --color-green-goddess-50: #defee8;
  --color-green-goddess-100: #d1f5dd;
  --color-green-goddess-200: #b8e3c6;
  --color-green-goddess-300: #9dcead;
  --color-green-goddess-400: #77b08b;
  --color-green-goddess-500: #5c9470;
  --color-green-goddess-600: #427957;
  --color-green-goddess-700: #2f6143;
  --color-green-goddess-800: #204d32;
  --color-green-goddess-900: #153c25;
  --color-green-goddess-950: #092615;
}

Similar palettes