How to check if hex color is "too black"?

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 decimalvar r = (rgb >> 16) & 0xff;  // extract redvar g = (rgb >>  8) & 0xff;  // extract greenvar b = (rgb >>  0) & 0xff;  // extract bluevar luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709if (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)

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;}

The TinyColor library (you've already mentioned it) provides several functions for inspecting and manipulating colors, among them:

• getBrightness

  Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).

  tinycolor("#fff").getBrightness(); // 255

• isLight

  Return a boolean indicating whether the color's perceived brightness is light.

  tinycolor("#fff").isLight(); // truetinycolor("#000").isLight(); // false

• isDark

  Return a boolean indicating whether the color's perceived brightness is dark.

  tinycolor("#fff").isDark(); // falsetinycolor("#000").isDark(); // true

• getLuminance

  Returns the perceived luminance of a color, from 0-1 as defined by Web Content Accessibility Guidelines (Version 2.0).

  tinycolor("#fff").getLuminance(); // 1