Inconsistent Color Palettes
I recently needed to get a color palette for a site, so I wrote a simple ruby script that traverses a site's stylesheets to build their color palette.
Before seeing these generated palettes, I assumed I would see a around 20 colors. But to my surprise, the number of different colors for a site's palette ranged from 5 to 331. wow!
Here are a few sites and their colors/frequencies:
Hacker News
Palette for http://news.ycombinator.com
number of unique colors: 5
--------|-----------
Color |Frequency
--------|-----------
#828282 |12
#000000 |6
#dddddd |2
#222222 |1
#ffffff |1NY Times
Palette for http://nytimes.com
number of unique colors: 22
--------|-----------
Color |Frequency
--------|-----------
#000000 |25
#333333 |18
#ffffff |13
#808080 |13
#004276 |12
#999999 |12
#666666 |10
#f0f4f5 |7
#efefef |3
#a81817 |2
#909090 |2
#f8f8d4 |1
#808285 |1
#bababa |1
#cccccc |1
#c33338 |1
#eeeeee |1
#666699 |1
#3c8a37 |1
#aaaaaa |1
#939393 |1
#f2f2f2 |1Coderwall
Palette for http://coderwall.com
number of unique colors: 44
--------|-----------
Color |Frequency
--------|-----------
#000000 |102
#ffffff |83
#3e8dcc |53
#343131 |38
#48494e |12
#a1a1a1 |11
#191919 |10
#393939 |7
#69879c |6
#d75959 |4
#667d8d |4
#555555 |4
#cfcdb8 |3
#6d7174 |3
#008000 |2
#2d2d2d |2
#a3a4a6 |2
#52b327 |2
#205a87 |2
#c4c4c4 |2
#bfceda |2
#c7ced1 |1
#0000ff |1
#8c8c8c |1
#b3b29f |1
#efefef |1
#115f8b |1
#c8d4d8 |1
#4e4f53 |1
#687275 |1
#8ea4af |1
#9da4a8 |1
#a5a5a5 |1
#94d9ff |1
#fc7365 |1
#e1e1e1 |1
#8bcced |1
#8bc682 |1
#141414 |1
#a0a4a5 |1
#61a1aa |1
#6eaac9 |1
#ffff00 |1
#616161 |1Amazon
Palette for http://amazon.com
number of unique colors: 75
--------|-----------
Color |Frequency
--------|-----------
#e47911 |30
#ffffff |19
#000000 |14
#666666 |12
#004b91 |10
#333333 |8
#3c7736 |7
#999999 |7
#990000 |5
#4296b8 |4
#b51a1a |4
#106eb8 |3
#f87500 |2
#111111 |2
#efefef |2
#cf210f |2
#5f5461 |2
#f15a29 |2
#faad31 |2
#af72ac |1
#a5c132 |1
#3d8dd6 |1
#62c8c9 |1
#c30909 |1
#681c0a |1
#eaf3fe |1
#3f4c58 |1
#fdce1c |1
#e3300f |1
#f47629 |1
#009e29 |1
#efedd4 |1
#d62628 |1
#86875d |1
#502f54 |1
#faa61a |1
#777777 |1
#f3e021 |1
#5c5c5c |1
#f58540 |1
#0057b2 |1
#2e314c |1
#661d1d |1
#7d7d7d |1
#799824 |1
#2468c1 |1
#f8981d |1
#922a8b |1
#e3549e |1
#a9cb57 |1
#8e7768 |1
#a89f9b |1
#6c9c31 |1
#a7c742 |1
#ffd000 |1
#e5add1 |1
#0bafbc |1
#b6edff |1
#599041 |1
#276823 |1
#4aa3c6 |1
#991b37 |1
#f4a9b7 |1
#ed1b69 |1
#2e3741 |1
#ededed |1
#101419 |1
#009900 |1
#930015 |1
#996633 |1
#1c673c |1
#ab8e53 |1
#eeeeee |1
#146eb4 |1
#888888 |1I think you get the idea now. Saving you from reading through hundreds of more hex colors, I'll just list the sites and the number of different colors they use (you can regenerate these tables using the script linked at bottom).
techcrunch.com: 33
heroku.com: 44
twitter.com: 112
codeacademy.com: 176
github.com: 331
Let's briefly look at Amazon, who has a pretty solid 5-color palette (orange, white, black, blue and gray), to try to get an idea of why they have 75 colors. For simplicity, let's just look at their most used color: orange.
Amazon's Orange Variations:
e47911, used 30 times
f87500, used twice
f47629, used once
f58540, used once
f8981d, used once
It seems as if a lot of sites generally use about 10-20 colors (ballpark estimate) but heavily vary them (i.e. hand pick a color that looks "close enough"). Because of this, instead of having a solid 20-color palette, they have an overlapping, if you will, 100-something color palette.
After looking at all these different palettes, I started wondering how many different colors a site should limit their color palette to. Is 100 obnoxious and due to choosing colors in a lazy manner ("oh, that looks like the orange we use on our homepage. let's use that.")? Is 5 too simple? Just something I've been pondering.
=============================================
you can download and run the script from here: https://github.com/alyssa/color-palette
If you want to see hex colors, i found this site useful: http://www.colorhexa.com
Written by Alyssa Pohahau
Related protips
7 Responses
Jesus Christ, interesting information and code, thanks =)
Very interesting, thanks.
Nice work!
And yes, I'm going to express the opinion that 100 colors is a noxious code smell.
If I find my site has more than, say, 25 colors, I should probably be defining all my colors in one place and then referring to them semantically in the CSS selector definitions.
In other words, I should be using SASS or something similar:
http://sass-lang.com/
This could be used to create a colour cleaning scripts.
The pipeline would be get the colours with your script and then simply use a k-means algorithm to identify the principal colours.
Easily avoided problem with SASS (or LESS).
Color is not absolute; a single color feels different in different contexts. The fact that they're not copy/pasting hex codes everywhere probably means their designers are paying close attention to detail.
Thanks for the code!
I just improved your script to search every <style> tag and style attribute :)
Also added support to urls without www, because the script abort with some urls.
Check it out at: https://github.com/tiagojsalmeida/color-palette
Thanks!
Have a fresh tip? Share with Coderwall community!
