Luminance

Published 27 October, 2008; last updated on 15 July, 2020; originally posted at blog.craiga.id.au.

I’ve looked for this formula, on average, once a year for the past five or so years. It’s useful for determining what colour text to display over a colour.

Hopefully by posting it here, I’ll be able to find it a bit easier next time.

// r, g and b = the red, green and blue components of a colour
luminance = 0.3r + 0.59g + 0.11b
// if luminance > 0.5, display black; otherwise, display white.

Update: In 2020—almost 12 years after I originally wrote it—I’m still referring back to this post. Here’s a simple Sass function to calculate this value for any colour:

@function luminance($color) {
  @return 0.3 * (red($color) / 255) + 0.59 * (green($color) / 255) + 0.11 * (blue($color) / 255)
}