How to check if hex color is “too black”?

by

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)

More Related Contents:

  1. How to read with JavaScript [closed]
  2. Javascript Commenting not working. Cannot comment out a comment?
  3. RGB to hex and hex to RGB
  4. jQuery animate backgroundColor
  5. Random color generator
  6. How to get hex color value rather than RGB value?
  7. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  8. Javascript function to convert color names to hex codes
  9. JavaScript eyedropper (tell color of pixel under mouse cursor)
  10. JS function to calculate complementary colour?
  11. How do you get the hue of a #xxxxxx colour?
  12. Javascript color gradient
  13. convert Hsl to rgb and hex
  14. Convert RGB to RGBA over white
  15. Why doesn’t this Javascript RGB to HSL code work?
  16. How can I generate the opposite color according to current color?
  17. How to check if a string is a valid hex color representation?
  18. Convert Hex to RGBA
  19. Mixing two colors “naturally” in javascript
  20. RGB to HSV color in javascript? [closed]
  21. Is canvas getImageData method machine/browser dependent?
  22. Convert HSB/HSV color to HSL
  23. Create a hexadecimal colour based on a string with JavaScript
  24. Generate colors between red and green for an input range [duplicate]
  25. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  26. How to programmatically calculate the contrast ratio between two colors?
  27. Chart.js Line, different fill color for negative point
  28. Change text color with Javascript?
  29. Recurring Events in FullCalendar
  30. How to load local script files as fallback in cases where CDN are blocked/unavailable? [duplicate]

Leave a Comment