Sort array with rgb color on Javascript [duplicate]

Question

I am having an array in my javascript with rgb colors. Let's say it looks like this:

  colors = ['(133,10,22)', '(33,33,33)', '(255,255,255)', '(1,1,1)'];

How can I sort this array so as to get the lightest color first and the darkest last? So at the end my array to look like this for example:

 colors = ['(255,255,255)', '(133,10,22)', '(33,33,33)', '(1,1,1)'];

Is there any particular library someone needs to use, or it is like the biggest sum of r+g+b the lightest the color? Thanks in advance.

For a very simple algorithm it can be just the sum. Each number represents the amount of light in each channel, so more light in total = brighter color. — pawel
– pawel, Commented Jan 15, 2015 at 9:55

Bas Dirks · Accepted Answer · 2015-01-15 10:21:42Z

1

As @Juhuna pointed out, brightness is not the sum of the channels.

var colors = ['(133,10,22)', '(33,33,33)', '(255,255,255)', '(1,1,1)'];

function sumColor (str) {
  var rgb = str.replace(/[()]/g, "").split(",").map(Number);

  // Summing the channels does not calculate brightness, so this is incorrect:
  // return rgb[0] + rgb[1] + rgb[2];

  // To calculate relative luminance under sRGB and RGB colorspaces that use Rec. 709:
  return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2];
}

colors.sort(function (a, b) {
  return sumColor(a) > sumColor(b);
}).reverse();

edited Jan 15, 2015 at 10:21

answered Jan 15, 2015 at 10:13

Bas Dirks

4113 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JJJ Over a year ago

Brightness is not the sum of the channels.

novellino Over a year ago

tack I used this sum instead and then just sort. And I think works fine.

Collectives™ on Stack Overflow

Sort array with rgb color on Javascript [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related