Wasabi Nori to Water Color Palette

About this palette

Wasabi Nori to Water is a 4-color warm, vintage palette: #3A3100 (Wasabi Nori), #885574 (Plum Highness), #CA9FC2 (Novel Lilac), #CEF2FF (Water). It mixes brown, red, pink, blue tones and feels warm overall. The strongest text pairing is #3A3100 on #CEF2FF with a contrast ratio of 10.97:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(58, 49, 0)	hsl(51, 100%, 11%)
Plum Highness	rgb(136, 85, 116)	hsl(324, 23%, 43%)
Novel Lilac	rgb(202, 159, 194)	hsl(311, 29%, 71%)
Water	rgb(206, 242, 255)	hsl(196, 100%, 90%)

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.97:1 Very good#3A3100 on #CEF2FF
Aa10.97:1 Very good#CEF2FF on #3A3100
Aa5.71:1 Good#3A3100 on #CA9FC2
Aa5.71:1 Good#CA9FC2 on #3A3100
Aa4.94:1 Good#885574 on #CEF2FF
Aa4.94:1 Good#CEF2FF on #885574

Color blindness preview

CSS variables

/* Wasabi Nori to Water — https://swatchly.xyz/palette/3a3100-885574-ca9fc2-cef2ff */
:root {
  --wasabi-nori: #3a3100;
  --plum-highness: #885574;
  --novel-lilac: #ca9fc2;
  --water: #cef2ff;
}

Tailwind CSS v4

/* Wasabi Nori to Water — https://swatchly.xyz/palette/3a3100-885574-ca9fc2-cef2ff */
@theme {
  --color-wasabi-nori: #3a3100;
  --color-wasabi-nori-50: #fbf6db;
  --color-wasabi-nori-100: #f2ecce;
  --color-wasabi-nori-200: #dfd8b5;
  --color-wasabi-nori-300: #cac299;
  --color-wasabi-nori-400: #aba275;
  --color-wasabi-nori-500: #908658;
  --color-wasabi-nori-600: #746b3f;
  --color-wasabi-nori-700: #5d542c;
  --color-wasabi-nori-800: #48411e;
  --color-wasabi-nori-900: #3a3100;
  --color-wasabi-nori-950: #221e08;
  --color-plum-highness: #885574;
  --color-plum-highness-50: #fff0f8;
  --color-plum-highness-100: #ffe0f2;
  --color-plum-highness-200: #f3c7e0;
  --color-plum-highness-300: #dfaeca;
  --color-plum-highness-400: #c18cab;
  --color-plum-highness-500: #a5708f;
  --color-plum-highness-600: #885574;
  --color-plum-highness-700: #6e415d;
  --color-plum-highness-800: #583149;
  --color-plum-highness-900: #452539;
  --color-plum-highness-950: #2d1524;
  --color-novel-lilac: #ca9fc2;
  --color-novel-lilac-50: #fff7fd;
  --color-novel-lilac-100: #ffebfb;
  --color-novel-lilac-200: #f5d6ef;
  --color-novel-lilac-300: #e3c0dc;
  --color-novel-lilac-400: #ca9fc2;
  --color-novel-lilac-500: #ab82a3;
  --color-novel-lilac-600: #8d6586;
  --color-novel-lilac-700: #714d6b;
  --color-novel-lilac-800: #593a54;
  --color-novel-lilac-900: #452a40;
  --color-novel-lilac-950: #2a1827;
  --color-water: #cef2ff;
  --color-water-50: #e7f9ff;
  --color-water-100: #cef2ff;
  --color-water-200: #c2dce6;
  --color-water-300: #a9c7d1;
  --color-water-400: #87a8b3;
  --color-water-500: #6b8c98;
  --color-water-600: #52717d;
  --color-water-700: #3d5a65;
  --color-water-800: #2d4750;
  --color-water-900: #21373e;
  --color-water-950: #122227;
}