JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<div id="xffffff">
 ffffff
</div>
<div id="x000000">
 000000
</div>
<div id="xface21">
 face21
</div>

<div id="navwrapper">
TEXT
</div>

CSS

div {
  height: 128px;
  width: 100%;
}
#xffffff {
    background: #ffffff;
}
#x000000 {
    background: #000000;
}
#xface21 {
    background: #face21;
}

#navwrapper {
  background: linear-gradient(250deg, #0061ff, #60efff);
  background-size: 400% 400%;

  -webkit-animation: AnimationName 10s ease infinite;
  -moz-animation: AnimationName 10s ease infinite;
  animation: AnimationName 10s ease infinite;
  height: 50vh;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 7%
  }

  50% {
    background-position: 100% 94%
  }

  100% {
    background-position: 0% 7%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 7%
  }

  50% {
    background-position: 100% 94%
  }

  100% {
    background-position: 0% 7%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 7%
  }

  50% {
    background-position: 100% 94%
  }

  100% {
    background-position: 0% 7%
  }
}

TypeScript

// This function will use the given hex color and determine which of the provided light or dark colors
 // gives maximum contrast, and return that color
 function getContrastYIQ(hexcolor: string, light: string = '#ffffff', dark: string = '#000000'): string {
    hexcolor = (hexcolor) ? hexcolor.replace('#', '') : '';
    const foreground = getContrastYIQDiff(hexcolor);
    const darkBackground = (Math.abs(foreground - getContrastYIQDiff(dark)));
    const lightBackground = (Math.abs(foreground - getContrastYIQDiff(light)));
    return (darkBackground > lightBackground) ? dark : light;
  }

 function getContrastYIQDiff(hexcolor: string): number {
    hexcolor = (hexcolor) ? hexcolor.replace('#', '') : '';
    const r = parseInt(hexcolor.substr(0, 2), 16);
    const g = parseInt(hexcolor.substr(2, 2), 16);
    const b = parseInt(hexcolor.substr(4, 2), 16);
    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    return yiq;
  }
  
  
  
  

function setElem(elem: string, light, dark) {
document.getElementById('x' + elem).style.color = getContrastYIQ(elem, light, dark);
}
setElem('ffffff', '#cccccc', '#888888');
setElem('000000', '#bada55', '#656565');
setElem('face21', '#00ff00', '#ff0000');