Show HN: Colorvote.io – ranking all sRGB web colors by popularity | Hacker News Reader

Show HN: Colorvote.io – ranking all sRGB web colors by popularity

colorvote.io

234 pointsgcuth131 comments

I think that if there is voting, one should sort of do some type of spreading algorithm where the color you vote on, is sort of a much weaker vote for the surrounding colors.

There is just too many colours, especially in this color space, and it is sort of hard for humans to really differentiate them. Thus spread out the vote based on average human visual perception differentiability capabilities.

Also this color space (R x B x G box color space) spends too many bits on low intensity and high intensity colors. When a color is near white or black, we can not easily tell the hues apart.

A much better color space to vote on would be something akin to the Pantone color list or paint swatches. Way less colors but still roughly covering the whole color space.

Also this depends on the color calibration of your computer and monitor chain, so merging adjacent colors would effectively be a good idea.

I think there is probably a bias (to your brain) based on the last two colors shown as well.

Similar to those "these boxes/squares are the same color" illusions.

I believe that illusion is based on our visual processor's reliance on local contrast in order to adjust the perceived true color to the inferred lighting conditions. So local adjacency information here is what is being used, rather than just temporal recently.

> Also this color space (R x B x G box color space) spends too many bits on low intensity and high intensity colors.

Isn’t that what the gamma is for?

Yes! sRGB includes a gamma transform already. You can go much further though.

They’re already about 1/500th of the way through the color space.

Picking a color from a pallet of similar colors is explicitly rejecting the nearby colors on the swatch.

It is exactly the opposite of a weak vote for nearby colors.

Of course, "nearby colors" depends on which axis (or axes) of the color space is/are changing, the rates of change, and what is the criterion for ordering the aspects of color.

Historically, voting on colors is a strong tradition in color science.

Because color is a property of human perception not a property of the external world...turn out the lights and the apple isn't red any more.

> Picking a color from a pallet of similar colors is explicitly rejecting the nearby colors on the swatch.

> It is exactly the opposite of a weak vote for nearby colors.

Surely that is demonstrably false in cases where you could experimentally prove that two adjacent colors are below the voter's threshold of color discrimination.

To riff on Hume, all colors are indistinguishable in total darkness.

Or to be Wittgensteinian, that’s not how “of different colors” is used in ordinary language.

In terms of additive color science, different combinations of RGB (or XYZ) light can produce the same color perception.

In part because the human visual system (green cones) has a negative response to a particular frequency band and additive light can’t have negative green values.

At the edge of current color science is accounting for tetra-chromatic perception…not to be confused with tetra-chromatic response which occurs in about 1% of humans.

Which is all to say that there’s a lot of baggage to a logical argument based on voting.

I'm not sure how any of that contradicts what I said, which is simply that when someone selects one option from among multiple options that they themselves cannot distinguish from one another, that does not constitute explicit rejection of the options which were not selected.

The premises of your position contradict themselves.

The premises that several colors can be different despite humans believing the colors are the same color requires that color is an independent property of external objects.

The premise that voting is a way of studying color requires that color is a property of human perception.

The discipline of color science operates on the second premise because the discipline of color science is scientific.

The first premise has been the road to philosophical skepticism in Western philosophy for more than two millennia.

Although it appears in physics courses everywhere, there is nothing special about the visible spectrum except that it happens to be what we see...which is to say that partitioning the universe into infrared, visible, and ultraviolet is not based on properties independent of humans in the way that mass, force, and frequency are.

Because color only exists in the context of the human visual system from a scientific perspective. Or to put it another way, color is derived from human physiology. And that's why it is scientific to vote on it.

Of course for the same reasons we talk about the sun rising and setting, the tides flowing in and out, and the ancients distinguished between Hesperus and Phospherus, ordinary non-scientific language treats color as a property of things similar to mass because tedious pedants aren't much fun at parties.

In ordinary language it is also the case that choosing a color involves explicit rejection of closely related colors that are a little too warm, I-think-it-will-be-too-dark, or something-a-bit-more-red.

Choosing a color involves high discernment. When you find the right shade of blue, you have condemned all other shades as wrong.

Fortunately, nobody cares.

Based on the title, I imagined crawling all websites and counting how many pixels used each colour.

Yeah me too..

That would have made a lot more sense than what they're doing. I'd really like to see the outcome of that. Not this random comparison.

> random comparison

While certainly different individuals are going to vote on colors differently, I doubt that the aggregate results would resemble randomness.

I mean random as in the two colours are selected at random.

I think it's not really relevant to select colours in a void. Colours are good for a purpose. This is especially relevant on websites. I love yellow but I would hate it when it's used for text on a white background. Stuff like that.

I certainly agree that context is important when picking a color. I don't think the conclusion is that whatever color is selected the most should be used for everything because it's the most popular. But when presented with two colors the way the site does, there is generally one I prefer over the other. Whether this preference information is actually useful is a whole other question.

my thoughts too. while this page is interesting, I'd be much more interested to know the results of what you describe

it would be fairly easily to implement, although probably quite expensive in either cost or time

Would be much more interesting indeed.

Could use sampling and still get reliable estimates?

how would you sample reliably though?

I'd imagine you get white and black in one or two, but then what?

I bet some pretty interesting graphs could be drawn with the results

Ultimately, wouldn't that just see which is the most popular background color? Pixel-for-pixel the background takes up the largest percentage of screen space on most websites.

Though I would also be interested to see what the most popular background colors are. My money's on white and off-white.

You could, instead of counting pixel-by-pixel, count once per specified color. Eg count #000000 once per css rule it's specified in, once per image it's used in, etc.

I bet the most popular would be ones where one or more of the RGB are 00 or FF.

I was thinking the same thing. But they could exclude them since they are not real colors.

Why is FF0000 not a real color or FF5687?

People would probably vote more if they had to vote at least 5 times to see the ranks, i.e. say "3 more votes to see ranks" in top center, and then pop up the ranks automatically.

I don't think anyone would be mad.

Here I am clicking color after color like a dunce, wondering when I get to see the ranking. After 20-30 or so clicks I finally notice the ultra-tiny-low-contrast "Ranks" text.

In my defense I'm outside with a ton of glare...

So people with the worst vision have the biggest say in what is the best color.

I didn’t even know I was voting on anything during my first three clicks. “Choose a color” doesn’t equate to “vote on a color” in my mind. I thought I was “choosing a color” to see its rank (and I didn’t get why it was showing me two on the page). I must be the lowest common denominator in this case.

I voted 15 times and no results

Look for "RANKS" on the bottom of the page...

And then click it (even though it's the one area of the page that doesn't have a cursor:pointer (took me some time too, even after coming back here to check comments)).

HN top bar colours by popularity: https://news.ycombinator.com/topcolors

I mean, default is pretty interesting that it's at the top.

Even more bizarre is that 15-25 spots are mostly different hues of orange. A bit improbable to have that many land so close.

What's the story with that green being the second most popular?

Would be nice to see percentages/total users. It might be only used by 5 accounts of the same person.

Green is the official h4xx0r color x)

For me, green is super useful. If the top bar is green, I'm logged in. If it's orange, I'm logged out.

My top bar color is #ccff99.

People log out?

Pro-tip, that also works with all other colors except green.

Fair point, but I do think that given the "traffic-light" connotation, green indicating a "logged-in state" makes sense.

All colors that are sufficiently distinct from the default that is.

Wait, you can change the top bar color? That's news to me.

Only available for premium users

(Joking aside it is behind a karma limit for some reason)

At certain karma thresholds, different things unlock. There's a list somewhere but I'm not sure if it's up-to-date.[0] It looks like top bar color can be changed once you hit 250 karma.

[0] https://news.ycombinator.com/item?id=853964

List of undocumented HN features:

https://github.com/minimaxir/hacker-news-undocumented

That's the one I was thinking of, but couldn't find. Thanks!

Ah cool, thanks! As someone who mostly lurks, I look forward to engaging with some of these features in a few decades time.

I see I'm not the only one to pick c0fefe as a joke...

No, I lied! It's not sorted!

The observations of the other comments would be strange indeed, if it were. Looking back through old discussions, it turns out I'd misremembered a mix of speculating comments as fact. Most conclusively, the order is now completely different to when the page was discussed last month:

https://web.archive.org/web/20220615213203/https://news.ycom...

(https://news.ycombinator.com/item?id=31759722)

I clicked on the right door about 10 times and the left door about 10 times but did not receive any car or a goat in any of them.

This is a perfect example of why we need ranked choice voting. I think #BD60E2 is best, but due to its unpopularity I'm forced to vote #BD60E1 if I want my vote to matter.

What would be a suitable algorithm?

You'd need some algorithm that works on continuous variables, that is, #44E205 should rank closely to #44E106. Somehow you need to learn a function over rgb sampling only some of the points. Maybe you average over votes for colors that are close to a color in rgb space.

16 million collars aren't that many compared to large-scale internet systems. If you got 160 million+ votes you'd start getting meaningful results without any averaging.

Idk if you're serious or not, but this site actually does ranked voting: you don't get to choose your favorite color out of 17M, but you rank pairs. The problem here is that you can vote a variable number of times. I guess it's possible to come up with different algorithms to determine the winner.

Die hard #BD60E2 voters are splitting the vote and giving an advantage to non #BD60E1 voters.

Just a heads up, if you're using any dark mode extension you'll want to disable it for this site. (op, probably worth getting your site added to the global dark mode list)

you'll need to explain why

Dark mode extension adjusts colors. Which... is a bit not great on a website that ranks colors.

it was working fine with android dark mode

> dark mode extensions These change the css colors. It's not referring to the OS color scheme preference

Presumably the text color will distort the preferences? You're not deciding you prefer a color, you're deciding you prefer a background color for a white font.

At the moment it seems to be always white, maybe if it's always the opposite color on the color wheel that might offset it? Or maybe just have the text on a white card on the edge of the screen so you can focus on the color itself?

After a few votes the text hex code disappeared for me so I was only voting on the colors.

I found myself voting against colors more than I was voting for colors. Anything wins against the harshness of chartreuse, except a somehow _worse_ chartreuse.

Why are you specifically capturing the pixel size of the viewport? and likewise the user agent separately from request headers?

What is your comment referring to?

What network requests the site makes, presumably. On mobile though so I can't verify my assumption as easily

Yes. Here's the json for one sample post request:

    {
     "winner": "#e28b20",
     "useragent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49",
     "loser": "#997e79",
     "time": "20220711T161234",
     "inner-width": 3840,
     "uuid": "4f076d53-5d84-4b4d-923e-803db7ca6150",
     "color-a": "#e28b20",
     "color-b": "#997e79",
     "inner-height": 2040
    }

I suspect people are choosing more because of hue and undertones than strictly on RGB colors. It would be more interesting to aggregate the results up into more general conclusions - do people like pastels or earth tones better? How bright of a color is too bright before people stop voting for it? How dark?

I've been into 70's colorscapes recently, so when given the chance I vote for earthy tones, then beyond that I may pick colors I know i like, or based on emotional gut reaction, it depends how hard the gut reaction hits me. I'd be curious to have these stats as well. I'd also be curious to know, how often do I pick the colors I think are my favorite. Purple is my favorite color, but it doesn't appear often in earthy tones and I think I would prefer an earthy or washed out orange or green to a washed out purple.

Reminds me a bit of Colourlovers[0]. That website is unfortunately rather bloated though.

Obviously, the best color is #BADA55

[0] - https://www.colourlovers.com/colors/most-loved/all-time/meta

Voting on all 16 million is a cool concept, but given that this is probably going to be popular for only a day or so, probably not achievable. From your own ranks, only 0.27% of colours have been voted on at all, and most likely the majority of those voted on have a single vote.

Personally I think that's okay. I also think it might make sense for any summary to lump colors together using clustering and averaging the group using a colorspace like Oklab.

There's lots of room for different types of analyses here!

That's a super cool idea! You could have it adapt so that depending on the number of votes the clusters get smaller so it returns the most specific data it can.

I thought this would be a ranking using crawled data on the web… kind of disappointed.

1. White

2. Black

3. Colours (mostly blue)

Still disappointed?

Yep.

1. White

2. Light grey

3. Some other light grey

...

235. dark grey

236. slightly bluish dark grey

237. slightly yellowish dark grey

...

Of course, but you could ignore all the obvious ones.

Keeping track of this would also show interesting trends over time. Do web designers favour 'hard' colours or pastels? Do they favour blue or less melatonin-generating colours. Stuff like that.

note to self

Nice idea, but the name doesn't quite fit the game... I would expect to be able to vote for my favourite color, this is more like a "color election"

…and what would you do in a colour election?

Pick the option that least sucks amongst options selected by someone other than myself.

Vote for the lesser ugly.

That won't give you a ranking in practice - you'd get 90% of colours receiving 0 votes so there's no way to distinguish them. I think the output of this game would be more interesting to analyse.

I felt my vote was very influenced by how many times I had already seen that hue. I probably would have voted more often for certain shades of green if I hadn't seen a slight variation of them three times already, for instance.

This was oddly satisfying and I voted on a bunch of colors. Definitely a bias towards my personal preferences and also what I think would be useable for websites but fun idea! Will be great to see the resulting data.

Huh, stumbled upon a strange visual effect. I got #0cc3bf (sorta cyan) above #acc2e0. When looking at the cyan, the other colour appeared lighter shade of blue/cyan in my peripheral vision. When I then looked straight at the lower colour it turned lilac. Almost pink to begin with. The effect was quite striking initially, to the extent that I suspected the page was varying the colour.

I'm on mobile. The phone was perhaps a little over a foot from my face. It's a sunny day in a room with a South facing window. I have a warmish LED light on (3000K).

Do they strictly increase vote on only the hues shown? Having a weighted multiplier of the vote on nearby hues that decreases the further away you go would reach a conclusion quicker.

I'm more interested in the algorithm behind the pairing. I wonder if it's randomly pairing colours or using something similar to adaptive comparative judgement.

Two comments:

- I don’t think the ordering relation is acyclical if no specific usage scenario is given for the color.

- After grading a dozen of color pairs or so and then looking at the rankings, I noticed that I had Smart Invert Colors turned on and had thus voted on the inverted colors. (I noticed because it seemed unlikely to me that most of the highest-ranking colors would be shades of brown. ;))

The hex codes cannot be selected/copied out which was disappointing, but perhaps worse is that the hex codes slowly fade away completely!

I only noticed the first time because there was a gorgeous gold/purple combination that I wanted to save, which makes me think there might be another layer of combination that can be saved which is worst/best combinations of colour.

This ranking is not useful. Color is appreciated or not depending on context. This ranking has no context.

Fun idea, but I agree. I was greeted with a shade of cyan and a shade of lavender. Apples and oranges.

I was going to comment that it's a joke project, so there is no need for usefulness, but then I realized your comment might be a joke comment and I'm lost in confusion now

awesome. Maybe make the ranks and wtf buttons more visible.

Thanks, I clicked about 50 to 100 times and waiting for a final result...

I think nearly 17 million colours is too many! Maybe grouping close colours could be better.

The “best” colours also seem really bad, I wonder if what they appear next to gives false results. Still, interesting idea!

2 colors appear on both best and worst. Each lists a maximum of 5 colors. That should be enough to stop the experiment right there, unless your goal is to find the most controversial colors.

The takeaway seems to be that color preferences are highly subjective to the point that you might just be getting noise.

Also how is it that people are even seeing the same colors for this to have happened? Even with birthday problem seems unlikely that two of the exact same hex colors would end up on the two very short lists. Are you sure you're shuffling these?

Currently #d8e3a8 is the 4th best but also the second worst. Likewise #cce0c9 is the 5th best and 3rd worst. Has there been fewer than 10 colors voted on or what gives?

It is more likely that votes are very thinly spread out that any color with some votes would surface

https://colornames.org/ Has 17.9% colors named already.

Might work as a joke but several of those colors will be indistinguishable to human eye, yet have completely different crowd-sourced names.

Or - could you ever tell the difference between "Amateur Rockstar Bright Pink" (#ff1aab) and "Pink Soul Of Heart" (#ff1bab) even if your life depended on it?

The fact that 24-bit RGB can represent 16 million colors does not mean our vision is capable of telling such number of colors apart from each other. Creating a coherent and concise naming system for all them could be an interesting (and perhaps quite challenging) technical task, but I don't believe crowd-sourcing those will yield any usable results. Or - how many colors with "poop" in their name do you think is acceptable? https://colornames.org/search/results/?type=partial&query=po...

And how about "asdf" (the first four letters on the home row of a QWERTY keyboard - an age-old internet troll version of "foobar")? https://colornames.org/search/results/?type=partial&query=as...

The non-joke use case could be memorizing / communicating bunch of colors. Those human readable names are lot easier to remember than hex values.

Not sure if "Asdfgtyuhijokl'" is easier to memorize than #33-51-B5 .. :) https://colornames.org/color/3351b5

The problem with anything crowd-sourced is always that without moderation the results are garbage, and moderation is generally expensive or at least requires passionate volunteers. Crowd-sourcing 16 million unique color names is bound to be problematic and very difficult to moderate.

I actually gave this a second thought as a technical problem. The CSS defines 140 color names. It would probably not be infeasible to crowd-source / invent 4,096 base color names spread out exactly evenly across the 3-dimensional RGB space (e.g. "maroon", "deep sky blue", "slate gray" and so on.) If we could then further name 64 "tints" (like "reddish", "dark bluish", "purple hazed"), one could express about 250,000 colors with base color + tint pairs (like "reddish deep sky blue" or "purple hazed maroon"). This should be already sufficient for expressing almost all colors normally needed for UI designs etc.

If even more fidelity was somehow desired, one could then add one more of the 64 tints from the same vocabulary with some qualifier, like 'slightly'. So e.g. "slighly purple hazed dark bluish slate gray". This system could express the full RGB space, and there would be always possibility to find a closeby very similar color with shorter name - e.g. "slight dark bluish reddish deep sky blue" => "reddish deep sky blue" => "deep sky blue".

You mean ”Easy To Remeber Blue”?

Joking aside I agree with you that it is useless to name 16 million colors but I appreciate the futile effort.

Look at the bigger picture: given the data is open, if you wanted a solid depiction of what colour best represents "poop" you could average those results.

I wrote this blog post many many moons ago, but it'll give you the optimal color (black or white) for any given color/background. Should be quick and easy conversion from c# to javascript.

http://blog.nitriq.com/BlackvsWhiteText.aspx

I wonder how context sensitive these are. Will votes be different depending on pairings?

Now I'm imagining a site where you have a standard format(Like a page with body, borders, headers, links, banners, etc, or just an abstract arrangement of 2-5 colors), and people make pallets and vote on them.

Every one was easy to pick my preferred color until I got to 824268 and 199989. I honestly couldn’t choose which I preferred. I sat there for awhile trying to decide when the colors changed. Is it on a timer or did I accidentally choose one of the colors, even though I don’t think I did?

It's a nice toy, but I doubt its practical value as in design you deal with color palettes, not standalone colors. I might be wrong, but my gut feeling is that "the most popular" color wouldn't necessarily end up as a part of the most popular palette, or even in top 5.

I don’t think the goal is to provide practical value.

Look, guy. Okay? Listen up here.

> But which one of these motherfuckers is the best color?

> Together, we've voted on 0.27834177017211914% of all colors.

> (Don't worry, we'll get there.)

Good news is, you are completely right and the author agrees. It is a joke. Which brings us to the bad news — but it's a monday which is hard enough so I'll let it slide.

Where is the results?

The contrast with the text that shows the hex code seems to interfere with my judgement. Perhaps leaving out the text, or showing it in smaller text on the bottom could help a tiny bit. But I suspect monitor quality/calibration has a larger effect.

They should create a little "status map" which shows the entire palette of all available sRGB colors and fills out those who have been voted on.

That would at least make it interesting to keep voting and seeing the map fill out.

Excited to see some results from this. I was disappointed that there was no real payoff as an end user who voted. Any way to see the current overall status of like the top 100?

My votes are based on which colours burn my retinas the least.

I'm voting nearly the exact opposite. Hadn't thought of it this "burning" way (on mobile it's smaller, maybe that's why?) but bright colors are fun colors for me.

Mobile vs desktop, OLED votes vs. LCD votes, indoors vs sunlight etc. would also be interesting to compare.

#988edc Appears as fifth best and as third worst

https://imgur.com/a/jZRQyt3

Colors is where X > Y > Z doesn’t mean X > Z.

It' a fun idea, but colors are so contextual that putting them next to each other for votes gives a pretty useless data set.

Curious to understand why are you capturing inner width/height and the user-agent as part of JSON payload to server?

Cool idea, horrible implementation. I have no better suggestions other than to reduce the color space however...

Whoops! Left Dark Reader on which has caused my votes to be based on the wrong colours

Huh, #987fb1 is in both Best and Worst lists (at the time I viewed the ranks).

There are colors our eyes can see that no monitor can output.

What am I looking on? How to see the rank of the colors?

qq: How are the initial color codes getting generated? Is it from app.js? Please clarify. Thanks!

this makes me feel like I am at the eye doctor.

takes too long to vote.

Reply on news.ycombinator.com