Wasabi Nori to Foundation White Color Palette

About this palette

Wasabi Nori to Foundation White is a 5-color vintage palette: #313000 (Wasabi Nori), #A73259 (Royal Flush), #00A793 (Hobgoblin), #C0CE76 (Alligator Alley), #F0ECFF (Foundation White). It mixes brown, red, turquoise, green, white tones and feels balanced overall. The strongest text pairing is #313000 on #F0ECFF with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(49, 48, 0)	hsl(59, 100%, 10%)
Royal Flush	rgb(167, 50, 89)	hsl(340, 54%, 43%)
Hobgoblin	rgb(0, 167, 147)	hsl(173, 100%, 33%)
Alligator Alley	rgb(192, 206, 118)	hsl(70, 47%, 64%)
Foundation White	rgb(240, 236, 255)	hsl(253, 100%, 96%)

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.

Aa11.68:1 Very good#313000 on #F0ECFF
Aa11.68:1 Very good#F0ECFF on #313000
Aa7.94:1 Very good#313000 on #C0CE76
Aa7.94:1 Very good#C0CE76 on #313000
Aa5.59:1 Good#A73259 on #F0ECFF
Aa5.59:1 Good#F0ECFF on #A73259
Aa4.47:1 Poor#313000 on #00A793
Aa4.47:1 Poor#00A793 on #313000

Color blindness preview

CSS variables

/* Wasabi Nori to Foundation White — https://swatchly.xyz/palette/313000-a73259-00a793-c0ce76-f0ecff */
:root {
  --wasabi-nori: #313000;
  --royal-flush: #a73259;
  --hobgoblin: #00a793;
  --alligator-alley: #c0ce76;
  --foundation-white: #f0ecff;
}

Tailwind CSS v4

/* Wasabi Nori to Foundation White — https://swatchly.xyz/palette/313000-a73259-00a793-c0ce76-f0ecff */
@theme {
  --color-wasabi-nori: #313000;
  --color-wasabi-nori-50: #f7f8dc;
  --color-wasabi-nori-100: #edeecf;
  --color-wasabi-nori-200: #dadbb6;
  --color-wasabi-nori-300: #c3c49b;
  --color-wasabi-nori-400: #a3a477;
  --color-wasabi-nori-500: #878859;
  --color-wasabi-nori-600: #6c6c40;
  --color-wasabi-nori-700: #54542c;
  --color-wasabi-nori-800: #40401d;
  --color-wasabi-nori-900: #313000;
  --color-wasabi-nori-950: #1d1d08;
  --color-royal-flush: #a73259;
  --color-royal-flush-50: #fff1f4;
  --color-royal-flush-100: #ffe1e7;
  --color-royal-flush-200: #ffc1ce;
  --color-royal-flush-300: #ff9ab3;
  --color-royal-flush-400: #e76f90;
  --color-royal-flush-500: #c75074;
  --color-royal-flush-600: #a73259;
  --color-royal-flush-700: #882246;
  --color-royal-flush-800: #6f1435;
  --color-royal-flush-900: #590a28;
  --color-royal-flush-950: #3a0418;
  --color-hobgoblin: #00a793;
  --color-hobgoblin-50: #dffff8;
  --color-hobgoblin-100: #bbfff1;
  --color-hobgoblin-200: #9df0df;
  --color-hobgoblin-300: #7bddca;
  --color-hobgoblin-400: #48c1ad;
  --color-hobgoblin-500: #00a793;
  --color-hobgoblin-600: #008776;
  --color-hobgoblin-700: #006b5d;
  --color-hobgoblin-800: #005348;
  --color-hobgoblin-900: #003f37;
  --color-hobgoblin-950: #002721;
  --color-alligator-alley: #c0ce76;
  --color-alligator-alley-50: #f4fdcf;
  --color-alligator-alley-100: #eaf4c0;
  --color-alligator-alley-200: #d7e2a4;
  --color-alligator-alley-300: #c0ce76;
  --color-alligator-alley-400: #a0ad5b;
  --color-alligator-alley-500: #859139;
  --color-alligator-alley-600: #6a7519;
  --color-alligator-alley-700: #535d00;
  --color-alligator-alley-800: #414800;
  --color-alligator-alley-900: #313700;
  --color-alligator-alley-950: #1e2200;
  --color-foundation-white: #f0ecff;
  --color-foundation-white-50: #f9f7ff;
  --color-foundation-white-100: #f0ecff;
  --color-foundation-white-200: #dbd8e6;
  --color-foundation-white-300: #c4c1d0;
  --color-foundation-white-400: #a4a1b1;
  --color-foundation-white-500: #888596;
  --color-foundation-white-600: #6d6a7a;
  --color-foundation-white-700: #565361;
  --color-foundation-white-800: #43404d;
  --color-foundation-white-900: #33313c;
  --color-foundation-white-950: #201e26;
}