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

Question

I\'m trying to evaluate the darkness of a color chosen by a color picker to see if it\'s \"too black\", and if so, set it to white. I thought I could use the first character

Answer 1

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(); // true
  tinycolor("#000").isLight(); // false
  

• isDark

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

  tinycolor("#fff").isDark(); // false
  tinycolor("#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