76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
|
/**
|
||
|
|
* 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());
|
||
|
|
}
|