Modern color scales without any libraries or custom algorithms

Color numbers or words according to a linear gradient between two colors

Marian C.
3 min readJun 22, 2024

Why use color scales?

In a web application it can be a good idea to present numerical values not simply by numbers but by colored numbers with the color corresponding to the position of the value in a color scale. It is easier to interpret numerical data when it is colored. When everything is in red it might not be necessary to read the numbers to understand the situation.

Coloring text can also be useful. For example, in text classification tasks users love to see the contribution of each word of the input text to the predicted label. Color scales are an effective means to visualize scores of each word. In an earlier enlightening post about correlation between endings and genders in French nouns I used pink-blue scale to visualise quantitative femininity and masculinity of the endings.

To highlight values with meaningful colors, two tools are required:

  • a function that generates a uniform range of colors visually corresponding to a numeric range
  • a function that returns the color corresponding to a given position within the used range

Many ways to…

--

--

Marian C.

Java, JavaScript and SQL developer. Interested in data collection and visualization.