Nile to Forestial Outpost color palette

About this palette

Nile to Forestial Outpost is a 5-color warm, earthy, vintage, monochromatic palette: #AEB67E (Nile), #CBCF96 (Court-Bouillon), #7F7F33 (Green Commando), #2E3104 (Wasabi Nori), #5B6400 (Forestial Outpost). It mixes green, yellow tones and feels warm overall. The strongest text pairing is #CBCF96 on #2E3104 with a contrast ratio of 8.29:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nilergb(174, 182, 126)hsl(69, 28%, 60%)
Court-Bouillonrgb(203, 207, 150)hsl(64, 37%, 70%)
Green Commandorgb(127, 127, 51)hsl(60, 43%, 35%)
Wasabi Norirgb(46, 49, 4)hsl(64, 85%, 10%)
Forestial Outpostrgb(91, 100, 0)hsl(65, 100%, 20%)

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.29:1 Very good#CBCF96 on #2E3104
  • Aa8.29:1 Very good#2E3104 on #CBCF96
  • Aa6.29:1 Good#AEB67E on #2E3104
  • Aa6.29:1 Good#2E3104 on #AEB67E
  • Aa3.95:1 Poor#CBCF96 on #5B6400
  • Aa3.95:1 Poor#5B6400 on #CBCF96
  • Aa3.20:1 Poor#7F7F33 on #2E3104
  • Aa3.20:1 Poor#2E3104 on #7F7F33

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nile to Forestial Outpost — https://swatchly.xyz/palette/aeb67e-cbcf96-7f7f33-2e3104-5b6400 */
:root {
  --nile: #aeb67e;
  --court-bouillon: #cbcf96;
  --green-commando: #7f7f33;
  --wasabi-nori: #2e3104;
  --forestial-outpost: #5b6400;
}

Tailwind CSS v4

/* Nile to Forestial Outpost — https://swatchly.xyz/palette/aeb67e-cbcf96-7f7f33-2e3104-5b6400 */
@theme {
  --color-nile: #aeb67e;
  --color-nile-50: #f9fee0;
  --color-nile-100: #f1f7d6;
  --color-nile-200: #e0e6bf;
  --color-nile-300: #ccd2a5;
  --color-nile-400: #aeb67e;
  --color-nile-500: #909761;
  --color-nile-600: #737a45;
  --color-nile-700: #5a602f;
  --color-nile-800: #454a1e;
  --color-nile-900: #343812;
  --color-nile-950: #1f2207;
  --color-court-bouillon: #cbcf96;
  --color-court-bouillon-50: #fafddf;
  --color-court-bouillon-100: #f2f5d4;
  --color-court-bouillon-200: #e0e3bb;
  --color-court-bouillon-300: #cbcf96;
  --color-court-bouillon-400: #aaad79;
  --color-court-bouillon-500: #8d905a;
  --color-court-bouillon-600: #71743f;
  --color-court-bouillon-700: #595c2a;
  --color-court-bouillon-800: #45471b;
  --color-court-bouillon-900: #343510;
  --color-court-bouillon-950: #202106;
  --color-green-commando: #7f7f33;
  --color-green-commando-50: #f5f7cc;
  --color-green-commando-100: #e9ebba;
  --color-green-commando-200: #d4d69b;
  --color-green-commando-300: #bcbe7b;
  --color-green-commando-400: #9c9c53;
  --color-green-commando-500: #7f7f33;
  --color-green-commando-600: #67661b;
  --color-green-commando-700: #525107;
  --color-green-commando-800: #414000;
  --color-green-commando-900: #323200;
  --color-green-commando-950: #201f00;
  --color-wasabi-nori: #2e3104;
  --color-wasabi-nori-50: #f5f8de;
  --color-wasabi-nori-100: #ebefd1;
  --color-wasabi-nori-200: #d7dbb9;
  --color-wasabi-nori-300: #c0c59e;
  --color-wasabi-nori-400: #a0a579;
  --color-wasabi-nori-500: #84895c;
  --color-wasabi-nori-600: #696d43;
  --color-wasabi-nori-700: #51552f;
  --color-wasabi-nori-800: #3e4120;
  --color-wasabi-nori-900: #2e3104;
  --color-wasabi-nori-950: #1b1d0a;
  --color-forestial-outpost: #5b6400;
  --color-forestial-outpost-50: #f3fbcd;
  --color-forestial-outpost-100: #e9f1be;
  --color-forestial-outpost-200: #d6e0a4;
  --color-forestial-outpost-300: #c1cc86;
  --color-forestial-outpost-400: #a3ae60;
  --color-forestial-outpost-500: #899441;
  --color-forestial-outpost-600: #707a25;
  --color-forestial-outpost-700: #5b6400;
  --color-forestial-outpost-800: #474e00;
  --color-forestial-outpost-900: #363c00;
  --color-forestial-outpost-950: #222600;
}

Similar palettes