How to check if hex color is "too black"?
I found this WooCommerce Wordpress PHP function (wc_hex_is_light) and I converted to JavaScript. Works fine!
function wc_hex_is_light(color) {
const hex = color.replace('#', '');
const c_r = parseInt(hex.substr(0, 2), 16);
const c_g = parseInt(hex.substr(2, 2), 16);
const c_b = parseInt(hex.substr(4, 2), 16);
const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
return brightness > 155;
}
@Sliffcak, thanks for comment... To use substring
, because substr
was deprecated:
function wc_hex_is_light(color) {
const hex = color.replace('#', '');
const c_r = parseInt(hex.substring(0, 0 + 2), 16);
const c_g = parseInt(hex.substring(2, 2 + 2), 16);
const c_b = parseInt(hex.substring(4, 4 + 2), 16);
const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
return brightness > 155;
}
You have to extract the three RGB components individually, and then use a standard formula to convert the resulting RGB values into their perceived brightness.
Assuming a six character colour:
var c = c.substring(1); // strip #
var rgb = parseInt(c, 16); // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff; // extract red
var g = (rgb >> 8) & 0xff; // extract green
var b = (rgb >> 0) & 0xff; // extract blue
var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
if (luma < 40) {
// pick a different colour
}
EDIT
Since May 2014 tinycolor
now has a getBrightness()
function, albeit using the CCIR601 weighting factors instead of the ITU-R ones above.
EDIT
The resulting luma value range is 0..255, where 0 is the darkest and 255 is the lightest. Values greater than 128 are considered light by tinycolor
. (shamelessly copied from the comments by @pau.moreno and @Alnitak)