/* JSColors.js - Javascript Functions for color evaluation and changing 2022 by mercury0x0d, Creative Commons Attribution 4.0 International License Revision history: 2022-07-25 - Initial release */ function ColorAdjustText(element, classLight, classDark) { /* Calls ColorEvaluate() on the background color of the specified element and sets its color attribute to contrast nicely against it. Based upon code found at https://awik.io/determine-color-bright-dark-using-javascript. Input: element The element whose background color will be evaluated and whose color will be altered classLight The name of the class to be applied if the element's background color is a "light" color classDark The name of the class to be applied if the element's background color is a "dark" color Output: n/a */ // Get the element's background color var bgColor = window.getComputedStyle(element, null).getPropertyValue('background-color'); // If the background color is dark, add the textLight class to it if(ColorEvaluate(bgColor) == 'dark') { element.classList.remove(classDark); element.classList.add(classLight); } else { element.classList.remove(classLight); element.classList.add(classDark); } } function ColorAlter(hexColor, magnitude) { /* Alters a given color by a percentage of magnitude. Based upon code found at https://natclark.com/tutorials/javascript-lighten-darken-hex-color. Input: color The color to be evaluated magnitude The magnitude percentage by which to lighten or darken the color Output: n/a */ var hexColor = hexColor.replace(`#`, ``); if (hexColor.length === 6) { const decimalColor = parseInt(hexColor, 16); var r = (decimalColor >> 16) + magnitude; r > 255 && (r = 255); r < 0 && (r = 0); var g = (decimalColor & 0x0000ff) + magnitude; g > 255 && (g = 255); g < 0 && (g = 0); var b = ((decimalColor >> 8) & 0x00ff) + magnitude; b > 255 && (b = 255); b < 0 && (b = 0); return `#${(g | (b << 8) | (r << 16)).toString(16)}`; } else { return hexColor; } } function ColorEvaluate(color) { /* Evaluates the given color to determine whether it is a "light" or "dark" color. Based upon code found at https://awik.io/determine-color-bright-dark-using-javascript. Input: color The color to be evaluated Output: 'light' The color is classified as a "light" color 'dark' The color is classified as a "dark" color */ // Check the format of the color, HEX or RGB? if (color.match(/^rgb/)) { // If HEX --> store the red, green, blue values in separate variables var color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); var r = color[1]; var g = color[2]; var b = color[3]; } else { // If RGB --> Convert it to HEX: http://gist.github.com/983661 color = +("0x" + color.slice(1).replace( color.length < 5 && /./g, '$&$&' ) ); r = color >> 16; g = color >> 8 & 255; b = color & 255; } // Use the Hue Saturation and Perceived Brightness equation from http://alienryderflex.com/hsp.html var hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)); // Using the HSP value, determine whether the color is light or dark if (hsp > 127.5) { return 'light'; } else { return 'dark'; } }