/** * Calculate light or darker color based on the luminance arg. * * @param {String} hex Color hex string to calculate on. * @param {Number} lum Luminance. * @return {String} The new color hex string. */ export const colorLuminance = (hex, lum) => { // validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } lum = lum || 0; // convert to decimal and change luminosity let rgb = '#'; let c; let i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i * 2, 2), 16); c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); rgb += ('00' + c).substr(c.length); } return rgb; } /** * Calculate an appropriate contrast color. * * @param {String} hex Hex string of the color we're searching for the right contrast. * @param {String} dark Dark color to return. Defaults to #000000. * @param {String} light Light color to return. Defaults to #ffffff. * @return {String} Hex color string with the appropriate contrast color. */ export const contrastTextColor = (hex, dark, light) => { dark = dark || '#000000'; light = light || '#ffffff'; const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); if (!result) { return dark; } const red = parseInt(result[1], 16); const green = parseInt(result[2], 16); const blue = parseInt(result[3], 16); let brightness; brightness = (red * 299) + (green * 587) + (blue * 114); brightness /= 255000; // values range from 0 to 1 // anything greater than 0.6 should be bright enough for dark text if (brightness >= 0.6) { return dark; } return light; } /** * Convert rgb(r, g, b) to hex. * * @param {String} rgb Rgb string to convert. * @return {String} The hex string. */ export const rgbToHex = rgb => { const matches = rgb.match(/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/); if (matches.length !== 4) { return ''; } // From https://gist.github.com/lrvick/2080648. const bin = matches[1] << 16 | matches[2] << 8 | matches[3]; return (function(h) { return '#' + new Array(7 - h.length).join('0') + h; })(bin.toString(16).toLowerCase()); }