Wasabi Nori to Frozen Forest Color Palette

About this palette

Wasabi Nori to Frozen Forest is a 5-color cool palette: #2C330A (Wasabi Nori), #005E4A (Evergreen), #9F719D (Drama Queen), #BF92B2 (Mauve Magic), #D1EAB2 (Frozen Forest). It mixes green, turquoise, pink tones and feels cool overall. The strongest text pairing is #2C330A on #D1EAB2 with a contrast ratio of 10.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(44, 51, 10)	hsl(70, 67%, 12%)
Evergreen	rgb(0, 94, 74)	hsl(167, 100%, 18%)
Drama Queen	rgb(159, 113, 157)	hsl(303, 19%, 53%)
Mauve Magic	rgb(191, 146, 178)	hsl(317, 26%, 66%)
Frozen Forest	rgb(209, 234, 178)	hsl(87, 57%, 81%)

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.

Aa10.17:1 Very good#2C330A on #D1EAB2
Aa10.17:1 Very good#D1EAB2 on #2C330A
Aa5.97:1 Good#005E4A on #D1EAB2
Aa5.97:1 Good#D1EAB2 on #005E4A
Aa5.03:1 Good#2C330A on #BF92B2
Aa5.03:1 Good#BF92B2 on #2C330A
Aa3.36:1 Poor#2C330A on #9F719D
Aa3.36:1 Poor#9F719D on #2C330A

Color blindness preview

CSS variables

/* Wasabi Nori to Frozen Forest — https://swatchly.xyz/palette/2c330a-005e4a-9f719d-bf92b2-d1eab2 */
:root {
  --wasabi-nori: #2c330a;
  --evergreen: #005e4a;
  --drama-queen: #9f719d;
  --mauve-magic: #bf92b2;
  --frozen-forest: #d1eab2;
}

Tailwind CSS v4

/* Wasabi Nori to Frozen Forest — https://swatchly.xyz/palette/2c330a-005e4a-9f719d-bf92b2-d1eab2 */
@theme {
  --color-wasabi-nori: #2c330a;
  --color-wasabi-nori-50: #f2f9e0;
  --color-wasabi-nori-100: #e8efd3;
  --color-wasabi-nori-200: #d4dcbb;
  --color-wasabi-nori-300: #bdc6a0;
  --color-wasabi-nori-400: #9da67d;
  --color-wasabi-nori-500: #818a60;
  --color-wasabi-nori-600: #666f47;
  --color-wasabi-nori-700: #4f5733;
  --color-wasabi-nori-800: #3c4323;
  --color-wasabi-nori-900: #2c330a;
  --color-wasabi-nori-950: #1b1e0c;
  --color-evergreen: #005e4a;
  --color-evergreen-50: #dafff2;
  --color-evergreen-100: #c9f7e7;
  --color-evergreen-200: #ade4d1;
  --color-evergreen-300: #8eceb9;
  --color-evergreen-400: #67af98;
  --color-evergreen-500: #47927c;
  --color-evergreen-600: #2b7661;
  --color-evergreen-700: #005e4a;
  --color-evergreen-800: #054939;
  --color-evergreen-900: #00392c;
  --color-evergreen-950: #00231a;
  --color-drama-queen: #9f719d;
  --color-drama-queen-50: #ffeffe;
  --color-drama-queen-100: #fedefc;
  --color-drama-queen-200: #eec8eb;
  --color-drama-queen-300: #d9afd7;
  --color-drama-queen-400: #bb8db9;
  --color-drama-queen-500: #9f719d;
  --color-drama-queen-600: #835882;
  --color-drama-queen-700: #6b4369;
  --color-drama-queen-800: #553354;
  --color-drama-queen-900: #432642;
  --color-drama-queen-950: #2b162a;
  --color-mauve-magic: #bf92b2;
  --color-mauve-magic-50: #fff0fa;
  --color-mauve-magic-100: #ffe1f6;
  --color-mauve-magic-200: #efcce4;
  --color-mauve-magic-300: #dbb4cf;
  --color-mauve-magic-400: #bf92b2;
  --color-mauve-magic-500: #a27796;
  --color-mauve-magic-600: #865d7b;
  --color-mauve-magic-700: #6d4863;
  --color-mauve-magic-800: #56364e;
  --color-mauve-magic-900: #44283c;
  --color-mauve-magic-950: #2b1826;
  --color-frozen-forest: #d1eab2;
  --color-frozen-forest-50: #f5ffe9;
  --color-frozen-forest-100: #eaf8d8;
  --color-frozen-forest-200: #d1eab2;
  --color-frozen-forest-300: #bcd0a3;
  --color-frozen-forest-400: #9ab07d;
  --color-frozen-forest-500: #7d935f;
  --color-frozen-forest-600: #627744;
  --color-frozen-forest-700: #4b5e30;
  --color-frozen-forest-800: #384920;
  --color-frozen-forest-900: #2a3816;
  --color-frozen-forest-950: #19230a;
}