Wasabi Nori to Natural Orchestra color palette

3F3000Wasabi Nori DCD788Gold Winged 506C00Over the Hills A2B662Around the Gills 379F78Natural Orchestra

Open in generator Export PNG, PDF, ASE…

About this palette

Wasabi Nori to Natural Orchestra is a 5-color cool, earthy palette: #3F3000 (Wasabi Nori), #DCD788 (Gold Winged), #506C00 (Over the Hills), #A2B662 (Around the Gills), #379F78 (Natural Orchestra). It mixes brown, yellow, green tones and feels cool overall. The strongest text pairing is #3F3000 on #DCD788 with a contrast ratio of 8.64:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wasabi Nori	rgb(63, 48, 0)	hsl(46, 100%, 12%)
Gold Winged	rgb(220, 215, 136)	hsl(56, 55%, 70%)
Over the Hills	rgb(80, 108, 0)	hsl(76, 100%, 21%)
Around the Gills	rgb(162, 182, 98)	hsl(74, 37%, 55%)
Natural Orchestra	rgb(55, 159, 120)	hsl(158, 49%, 42%)

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.

Aa8.64:1 Very good#3F3000 on #DCD788
Aa8.64:1 Very good#DCD788 on #3F3000
Aa5.75:1 Good#3F3000 on #A2B662
Aa5.75:1 Good#A2B662 on #3F3000
Aa4.05:1 Poor#DCD788 on #506C00
Aa4.05:1 Poor#506C00 on #DCD788
Aa3.91:1 Poor#3F3000 on #379F78
Aa3.91:1 Poor#379F78 on #3F3000

Color blindness preview

CSS variables

/* Wasabi Nori to Natural Orchestra — https://swatchly.xyz/palette/3f3000-dcd788-506c00-a2b662-379f78 */
:root {
  --wasabi-nori: #3f3000;
  --gold-winged: #dcd788;
  --over-the-hills: #506c00;
  --around-the-gills: #a2b662;
  --natural-orchestra: #379f78;
}

Tailwind CSS v4

/* Wasabi Nori to Natural Orchestra — https://swatchly.xyz/palette/3f3000-dcd788-506c00-a2b662-379f78 */
@theme {
  --color-wasabi-nori: #3f3000;
  --color-wasabi-nori-50: #fef5db;
  --color-wasabi-nori-100: #f6ebcd;
  --color-wasabi-nori-200: #e4d7b4;
  --color-wasabi-nori-300: #cfc099;
  --color-wasabi-nori-400: #b1a075;
  --color-wasabi-nori-500: #958458;
  --color-wasabi-nori-600: #7a6a3f;
  --color-wasabi-nori-700: #62532c;
  --color-wasabi-nori-800: #4d401d;
  --color-wasabi-nori-900: #3f3000;
  --color-wasabi-nori-950: #251e08;
  --color-gold-winged: #dcd788;
  --color-gold-winged-50: #f7f5c9;
  --color-gold-winged-100: #edeab9;
  --color-gold-winged-200: #dcd788;
  --color-gold-winged-300: #c5c17e;
  --color-gold-winged-400: #a7a257;
  --color-gold-winged-500: #8d8739;
  --color-gold-winged-600: #736d1d;
  --color-gold-winged-700: #5c5705;
  --color-gold-winged-800: #494400;
  --color-gold-winged-900: #383400;
  --color-gold-winged-950: #232000;
  --color-over-the-hills: #506c00;
  --color-over-the-hills-50: #eafecc;
  --color-over-the-hills-100: #dcf3ba;
  --color-over-the-hills-200: #c4df9a;
  --color-over-the-hills-300: #aac778;
  --color-over-the-hills-400: #88a64e;
  --color-over-the-hills-500: #6b892c;
  --color-over-the-hills-600: #506c00;
  --color-over-the-hills-700: #3f5600;
  --color-over-the-hills-800: #304300;
  --color-over-the-hills-900: #253400;
  --color-over-the-hills-950: #162100;
  --color-around-the-gills: #a2b662;
  --color-around-the-gills-50: #f3ffd5;
  --color-around-the-gills-100: #eaf8c7;
  --color-around-the-gills-200: #d7e7ac;
  --color-around-the-gills-300: #c1d38f;
  --color-around-the-gills-400: #a2b662;
  --color-around-the-gills-500: #859845;
  --color-around-the-gills-600: #6a7b26;
  --color-around-the-gills-700: #52620c;
  --color-around-the-gills-800: #3f4c00;
  --color-around-the-gills-900: #2f3a00;
  --color-around-the-gills-950: #1c2300;
  --color-natural-orchestra: #379f78;
  --color-natural-orchestra-50: #deffef;
  --color-natural-orchestra-100: #c2fce1;
  --color-natural-orchestra-200: #a6ebcc;
  --color-natural-orchestra-300: #86d7b4;
  --color-natural-orchestra-400: #5cba93;
  --color-natural-orchestra-500: #379f78;
  --color-natural-orchestra-600: #0d825e;
  --color-natural-orchestra-700: #006849;
  --color-natural-orchestra-800: #005138;
  --color-natural-orchestra-900: #003f2b;
  --color-natural-orchestra-950: #002719;
}