Midnight Pines to Foundation White color palette

1F1F01Midnight Pines 5F5000Ayahuasca Vine 7D72BFVenus Violet C4BC73Savannah Grass EFEEFFFoundation White

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to Foundation White is a 5-color warm, earthy, vintage palette: #1F1F01 (Midnight Pines), #5F5000 (Ayahuasca Vine), #7D72BF (Venus Violet), #C4BC73 (Savannah Grass), #EFEEFF (Foundation White). It mixes brown, purple, yellow, white tones and feels warm overall. The strongest text pairing is #1F1F01 on #EFEEFF with a contrast ratio of 14.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(31, 31, 1)	hsl(60, 94%, 6%)
Ayahuasca Vine	rgb(95, 80, 0)	hsl(51, 100%, 19%)
Venus Violet	rgb(125, 114, 191)	hsl(249, 38%, 60%)
Savannah Grass	rgb(196, 188, 115)	hsl(54, 41%, 61%)
Foundation White	rgb(239, 238, 255)	hsl(244, 100%, 97%)

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.

Aa14.62:1 Super#1F1F01 on #EFEEFF
Aa14.62:1 Super#EFEEFF on #1F1F01
Aa8.60:1 Very good#1F1F01 on #C4BC73
Aa8.60:1 Very good#C4BC73 on #1F1F01
Aa6.96:1 Good#5F5000 on #EFEEFF
Aa6.96:1 Good#EFEEFF on #5F5000
Aa4.10:1 Poor#5F5000 on #C4BC73
Aa4.10:1 Poor#C4BC73 on #5F5000

Color blindness preview

CSS variables

/* Midnight Pines to Foundation White — https://swatchly.xyz/palette/1f1f01-5f5000-7d72bf-c4bc73-efeeff */
:root {
  --midnight-pines: #1f1f01;
  --ayahuasca-vine: #5f5000;
  --venus-violet: #7d72bf;
  --savannah-grass: #c4bc73;
  --foundation-white: #efeeff;
}

Tailwind CSS v4

/* Midnight Pines to Foundation White — https://swatchly.xyz/palette/1f1f01-5f5000-7d72bf-c4bc73-efeeff */
@theme {
  --color-midnight-pines: #1f1f01;
  --color-midnight-pines-50: #f6f7e3;
  --color-midnight-pines-100: #ecedd7;
  --color-midnight-pines-200: #d9dabf;
  --color-midnight-pines-300: #c2c4a5;
  --color-midnight-pines-400: #a3a483;
  --color-midnight-pines-500: #878967;
  --color-midnight-pines-600: #6d6e4d;
  --color-midnight-pines-700: #565639;
  --color-midnight-pines-800: #424329;
  --color-midnight-pines-900: #32331d;
  --color-midnight-pines-950: #1f1f01;
  --color-ayahuasca-vine: #5f5000;
  --color-ayahuasca-vine-50: #fef6d1;
  --color-ayahuasca-vine-100: #f5ecc2;
  --color-ayahuasca-vine-200: #e3d7a5;
  --color-ayahuasca-vine-300: #cdc086;
  --color-ayahuasca-vine-400: #ae9f5f;
  --color-ayahuasca-vine-500: #928340;
  --color-ayahuasca-vine-600: #766825;
  --color-ayahuasca-vine-700: #5f5000;
  --color-ayahuasca-vine-800: #4a3e04;
  --color-ayahuasca-vine-900: #393000;
  --color-ayahuasca-vine-950: #241d00;
  --color-venus-violet: #7d72bf;
  --color-venus-violet-50: #f3f2ff;
  --color-venus-violet-100: #e7e5ff;
  --color-venus-violet-200: #d1cdff;
  --color-venus-violet-300: #b9b1f9;
  --color-venus-violet-400: #998fdc;
  --color-venus-violet-500: #7d72bf;
  --color-venus-violet-600: #6559a2;
  --color-venus-violet-700: #504586;
  --color-venus-violet-800: #3e346d;
  --color-venus-violet-900: #302858;
  --color-venus-violet-950: #1e183a;
  --color-savannah-grass: #c4bc73;
  --color-savannah-grass-50: #f7f3c9;
  --color-savannah-grass-100: #ede8b9;
  --color-savannah-grass-200: #d9d49b;
  --color-savannah-grass-300: #c4bc73;
  --color-savannah-grass-400: #a69e58;
  --color-savannah-grass-500: #8c843b;
  --color-savannah-grass-600: #726a22;
  --color-savannah-grass-700: #5c550d;
  --color-savannah-grass-800: #494200;
  --color-savannah-grass-900: #393400;
  --color-savannah-grass-950: #242000;
  --color-foundation-white: #efeeff;
  --color-foundation-white-50: #f9f8ff;
  --color-foundation-white-100: #efeeff;
  --color-foundation-white-200: #dbdae6;
  --color-foundation-white-300: #c3c2d0;
  --color-foundation-white-400: #a3a2b1;
  --color-foundation-white-500: #878695;
  --color-foundation-white-600: #6c6b79;
  --color-foundation-white-700: #545461;
  --color-foundation-white-800: #42414c;
  --color-foundation-white-900: #32323b;
  --color-foundation-white-950: #1f1e25;
}