What Is The Color Of The Moderator User Groups?:

Determine If A Color Is Brilliant Or Dark Using JavaScript

August 7, 2018 by Andreas Wik

Finding out whether a color is low-cal or dark can be really handy when working with dynamic content. Allow'due south say you have a profile page and the user tin set their ain page background color. You could then set the color of the text on top depending on the groundwork colour's brightness.

The JavaScript function below speaks for itself with the comments. It takes a color as the argument, calculates the color'southward HSP value, and uses that to determine whether the color is light or dark.

Ofcourse you lot can tweak this to modify the threshold then information technology fits your needs.

The role lightOrDark:

                      function lightOrDark(color) {      // Variables for red, green, blue values     var r, g, b, hsp;          // Bank check the format of the color, HEX or RGB?     if (color.friction match(/^rgb/)) {          // If RGB --> shop the red, green, blue values in separate variables         color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);                  r = colour[one];         yard = color[2];         b = color[3];     }      else {                  // If hex --> Catechumen it to RGB: http://gist.github.com/983661         color = +("0x" + color.slice(1).replace(          color.length < 5 && /./k, '$&$&'));          r = color >> 16;         g = color >> 8 & 255;         b = color & 255;     }          // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html     hsp = Math.sqrt(     0.299 * (r * r) +     0.587 * (one thousand * yard) +     0.114 * (b * b)     );      // Using the HSP value, decide whether the color is light or nighttime     if (hsp>127.5) {          return 'light';     }      else {          return 'nighttime';     } }

Play with it using the CodePen below. Change the groundwork-color of #profile-bio and hit the button to encounter it in action.

See the Pen YjJqpK past Andreas Wik (@andreaswik) on CodePen.

Stay condom out there!