Eye-Catching Hue Rotation with Javascript in Webflow

In this lesson we will look at how to change the color of an HTML element based on its numeric value. We will write a javascript function that varies the hue from 0 to 120 (red to yellow to green) based on a score value that ranges form 0 to 100. This is a great beginner example to learn javascript and a bit of color theory - I'll show a neat little trick to prevent flash of unstyled content at the end as well! This could also be used to set the color of an element based on progress, heatmap indices, or even time of day!

I'll supply links to the video on YouTube in addition to a cloneable, but here's a little CodePen and full explanation if that's more your style.

See the Pen Untitled by Web Bae (@webisbae) on CodePen.

First, the code selects all the elements with an attribute name of wb-element and value of hue-rotate-score. This means that it will look for any HTML elements (like divs or spans) that have the attribute wb-element with a value of hue-rotate-score. It stores all of those elements in a variable called scoreElements. In Webflow, we can just give one of our collection items this custom attribute, and it will apply to all of them.

Then, the code goes through each element in the scoreElements list using a forEach loop. For each element, it calls a function called setElementColor and passes in the element as an argument.

The setElementColor function takes in the element that was passed to it and then gets the text content of that element (which should be a number between 0 and 100). It stores that number in a variable called score.

Next, it calculates the hue for that element by multiplying the score by 120 and dividing by 100. This means that if the score is 0, the hue will be 0 (which is red), and if the score is 100, the hue will be 120 (which is green). Hue value actually ranges from 0 (red) to 360 (red again!) - remember ROYGBIV from second grade? It then stores that hue in a variable called hue. How convenient!

After that, our code creates a string for the background color of the element using the hsl format, which stands for hue, saturation, and lightness. The hue variable is used for the hue value, 100% is used for saturation (which means the color is fully saturated), and 50% is used for lightness (which means the color is halfway between black and white).

If you publish the project now, you'll notice that the rating background color starts with a flash of white (or whatever is set by default in CSS i.e. Webflow designer). This effect is called Flash of "Unstyled Content", and we don't like it, so let's fix it.

If we go in to page settings and set visibility to hidden inside some <style> tags, then we can prevent the element from showing on load, and not make it visible until we have set the proper color in our javascript. After that, we can just set visibility to visible, and the element will show now!

Overall, this code is pretty cool because it changes the color of elements on a webpage based on their content, which can make the page more interesting and engaging for users.

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

<style>
.rating-text {
	visibility: hidden;
}
</style>

Inside </body> tag

<script>
const scoreElements = document.querySelectorAll(
  '[wb-element="hue-rotate-score"]'
);

scoreElements.forEach((scoreElement) => {
  setElementColor(scoreElement);
});

function setElementColor(scoreElement) {
  const score = Number(scoreElement.textContent);
  const hue = (score * 120) / 100; // 0 (red) to 120 (green)
  const backgroundColor = `hsl(${hue}, 100%, 50%)`;
  scoreElement.style.backgroundColor = backgroundColor;
  scoreElement.style.visibility = "visible";
}
</script>