how to get the lightest color from a list of hex values using javascript

Question

I have a list of hex colors #000000 values. How can I get the lightest color from a list of hex colors using javascript?

Any help will be appreciated

What do you consider the lightest between #FF0000 and #00FF00 ? — Kaiido, Apr 20 '17 at 00:30
@Kaiido Well, between #FF0000 and #0000FF, the lightest must be #00FF00 :) — bvj, Apr 20 '17 at 00:33
consider converting the colour to HSL colour space - https://gist.github.com/mjackson/5311256 - the highest `l` wins :p — Jaromanda X, Apr 20 '17 at 00:35
`but he considers #FF0000 as brighter than #00FF00` - who does? the OP certainly has made no such declaration @Kaiido — Jaromanda X, Apr 20 '17 at 00:40
@Kaiido - `between #FF0000 and #0000FF, the lightest must be #00FF00` is clearly tongue in cheek ... — Jaromanda X, Apr 20 '17 at 00:41
see [this answer](http://stackoverflow.com/a/596243/5053002) — Jaromanda X, Apr 20 '17 at 00:43
there's a comment on that answer with a link to a nice fiddle - https://jsfiddle.net/sbrexep0/ — Jaromanda X, Apr 20 '17 at 00:46

score 2 · Answer 1 · edited May 23 '17 at 11:54

According to this formula, you can calculate the luminance (brightness) of an RGB color like this:

L = 0.2126*R + 0.7152*G + 0.0722*B;

you can apply this on hex which won't be hard, then get the color with the maximum brightness:

function lum(hex) {
  var r = parseInt(hex.substr(1, 2), 16),
      g = parseInt(hex.substr(3, 2), 16),
      b = parseInt(hex.substr(5, 2), 16);
      
  return 0.2126*r + 0.7152*g + 0.0722*b;;
}

function lightest(colors) {
  var maxIndex = 0,
      maxLum = lum(colors[0]);
      
  for(var i = 1; i < colors.length; i++) {
    var iLum = lum(colors[i]);
    if(maxLum < iLum) {
      maxLum = iLum;
      maxIndex = i;
    }
  }
  
  return colors[maxIndex];
}

console.log(lightest(["#ff0000", "#ffcd00", "#000000"]));

how to get the lightest color from a list of hex values using javascript

1 Answers1