Show HN: Explore Websites by Chosen Color
I crawled lots of websites and extracted their color palettes (primary, secondary, etc) to build a searchable collection of website colors!
It was a fun side-project and I learned a lot about color theory. Let me know what you think and what features you would like to see :)
If you have any questions about the tech behind it, feel free to ask in the comments. Feedback is also greatly appreciated.
(
24 comments
| 2 points
| on HN
)
I've also collected what fonts and typography styles different websites use so I'm looking to create a visual for that as well, thanks for the feedback!
Weird parts though. Does not ever seem to return a website I have ever heard of. And (although it may have nothing to do with you, and everything to do with the modern web) a lot look rather algorithmically designed.
Plus, there's sites like these people: https://www.beltnbags.com.au/ that register on every pure tone and near pure-tone search because they're listed as (#0000ff, 24.9%, #f7f7ff, 13.0%, #f7f7f7, 13.0%, #00ff00, 24.2%, #ff0000, 24.9%)
However, if you go to their website, I don't know what you're scraping, cause it sure does not "look" like its 1/4 red, 1/4 green, 1/4 blue, and 1/4 of dueling eggshell white. It looks white, black, teeny red labels, and lots of brown clothes.
The crawler also blocks image loading (to not take image colors into account because it's screenshotting the entire page and creating a frequency of each color from the screenshot, pixel-wise) so it's possible that some fallback CSS was displayed instead of the images.
I definitely have to refine it more and it's far from perfect. There are only ~25k websites indexed and I used a list of 1M most popular websites created by the developers of a Chrome extension, based on what most people were visiting.
I tried my best to sort by popularity but I'm sure that the list is not perfect. Plus, some websites are really unfriendly to crawlers and, as much as you try to hide it (by faking user agents, using realistic window dimensions, proxies, etc.), some will still detect you.
Just playing devil's advocate, there are a LOT of domains out there. A quick search says there's still well over a billion websites on the internet.
Google as example: Current logo: #4086F4 (blue), #EB4132 (red), #FBBD00 (yellow), #31AA52 (green). Google (at least on my search) only shows up as a leftover of somebody else's search. Of course, there's also only 9 results.
Have you explored that much at all?
Cool project!
One filter I added to make the palette a bit more relevant is that I try to find out which is the background color (the most used color) and only pick colors that are at least somewhat contrasting with the background (assuming that websites would follow somewhat basic color contrast rules).
When I tried extracting the palettes from CSS rules, what I ran into is that each website uses lots of vendors that render stuff (cookie consents, promotional pop-ups, etc.) and it's hard to distinguish what's rendered and what's not with pure CSS selectors, so I resorted to decomposing the website's theme from the perspective of a user. (through a screenshot)
It's a great idea nonetheless, I'm sure I would have some good results with it if I manage to filter out the noise, thanks a lot!
Allowing to chose proportions of colors could be even better.
Hypothetical example: Lets suppose that I'm a policeman. How much percentage of black, white and red is in a classical svastika?. Then browse the dark web for finding all webs that contain this particular white, black and red in such combination
Other possibilities: I want to know if my [bank/company/chess club] web is being cloned and used to criminal purposes without my knowledge. My logo contains magenta, lime green and burnt orange. Find me webs with this combination that aren't in a list of official webs from my company. Even better, check it at real time on email to spot scammers impersonating me on real time.
The applications are endless: I want to detect webs that sell fake clones of my products; or find photos of pills of a particular shade of blue. Or don't show me webs with a high content in warm tones associated with porno images...
Yep, that could be a really revolutionary startup.
I also have a lot more content (i.e.: the full HTML code of the website, the fonts and typography options) that I extracted for each website but it's tricky to come up with an easy to use UI/UX for this as a search filter, given that there's not many other websites that do this.
millionfollowersbootcamp[.]com
The first version of it, I didn't take any screenshots and it felt very empty. It's a bit hard to manage the images and deliver them rapidly, in an optimized form, but I think it's worth it.
There's definitely a middle-ground approach here, I just haven't found a good enough heuristic. It's true that images are part of the branding and they impact the color palette, like banners and logos, so they should be considered in some quantity. I thought of maybe averaging the results of image/no image but I don't have enough test data to validate it yet.
Let's chat and discuss more! I'll also add you on Twitter/X