How Can You Programmatically Change Font Colour Primarily based on the Background? (Gentle/Darkish Mode)

In case you’ve visited Martech Zone recently, you will have observed that we now supply the power to view the positioning in both gentle or darkish mode. Simply seek for the moon or solar icon subsequent to the date within the prime left navigation bar on the positioning.

It’s a reasonably cool characteristic and it really works very well. After I launched a brand new conversion software to change HEX to RGB, I needed to really show the colour that the consumer was making an attempt to calculate. I not solely show the colour, however I additionally added a pleasant characteristic that displayed the title of the colour. However that launched a difficulty…

If the swatch that displayed the colour had a light-weight background, you wouldn’t be capable to learn the textual content that I generate dynamically for the swatch. So… I needed to create a perform that set the font colour based mostly on background colour and whether or not or not there was sufficient distinction to view the font.

JavaScript Perform For Gentle or Darkish Mode

I wanted to create a perform the place I may cross the hex code for the colour, then return whether or not the font needs to be white or black based mostly on the distinction. This Javascript perform did the trick…

perform distinction(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.size == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.size == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

The edge on this perform is used to find out whether or not a selected colour is gentle or darkish. The perform converts the given hexadecimal colour code to its pink, inexperienced, and blue (RGB) parts, then makes use of a system to calculate the perceived brightness of the colour. If the brightness is above the edge, the perform returns #000000, which is the hex code for black. If the brightness is under the edge, the perform returns #ffffff, which is the hex code for white.

The aim of this threshold is to make sure that the textual content colour chosen for the given background colour has sufficient distinction to be simply readable. A standard rule of thumb is that gentle textual content (e.g. white or yellow) needs to be used on a darkish background, and darkish textual content (e.g. black or blue) needs to be used on a light-weight background. Through the use of a threshold to find out whether or not a colour is gentle or darkish, the perform can robotically select the suitable textual content colour for a given background colour.

Utilizing the above perform, I can programmatically apply the font-color CSS based mostly on the background colour. Take a look at out the converter and also you’ll see how nicely it really works!