When you’ve visited Martech Zone currently, you might have seen 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 instrument to change HEX to RGB, I needed to really show the colour that the person was making an attempt to calculate. I not solely show the colour, however I additionally added a pleasant characteristic that displayed the identify 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 of learn the textual content that I generate dynamically for the swatch. So… I needed to create a perform that set the font coloration based mostly on background coloration and whether or not or not there was sufficient distinction to view the font.

JavaScript Operate For Mild or Darkish Mode

I wanted to create a perform the place I might move the hex code for the colour, then return whether or not the font ought 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 brink on this perform is used to find out whether or not a selected coloration is gentle or darkish. The perform converts the given hexadecimal coloration code to its purple, inexperienced, and blue (RGB) elements, then makes use of a formulation 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 coloration chosen for the given background coloration has sufficient distinction to be simply readable. A typical rule of thumb is that gentle textual content (e.g. white or yellow) ought to be used on a darkish background, and darkish textual content (e.g. black or blue) ought to be used on a light-weight background. Through the use of a threshold to find out whether or not a coloration is gentle or darkish, the perform can robotically select the suitable textual content coloration for a given background coloration.

Utilizing the above perform, I can programmatically apply the font-color CSS based mostly on the background coloration. Check out the converter and also you’ll see how effectively it really works!