Sticky Header Change Font Colour

Site URL: http://www.elizabeth-curtis.com/overview

Hello everyone

I have a sticky header that changes from transparent to a neutral colour perfectly, however I was wondering if it is possible for the text to change from white to black on scroll as the background colour appears?

www.elizabeth-curtis.com/overview

The code I am using is

// FIXED HEADER CHANGE COLOUR //
.Header{
  background-color: transparent important;
  position: fixed!important;
  transition: 0.1s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: 
#f6f3ef!important;
  }

.Site-inner{padding-top: 0px;}

Thank you so much for your help. 

Would you not just add color: black !important to the .on-scroll selector? So it would be: 

.on-scroll{
  background-color: #f6f3ef!important;
  color: black !important; 
  }