u7kzua
Last Updated: August 04, 2017
·
19.9K
· alyssa
Thumb alyssa pohahau

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 |1

NY 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 |1

Coderwall

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 |1

Amazon

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 |1

I 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

Say Thanks
Respond

7 Responses
Add your response

241
Diamond logo

Jesus Christ, interesting information and code, thanks =)

over 1 year ago ·
1285
Yo

Very interesting, thanks.

over 1 year ago ·
2079
95ac4011d0e657db0c3be18000eaeb36

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/

over 1 year ago ·
2473
396bbe134b2e2b88957ba767695ec809

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.

over 1 year ago ·
2511
C104c0724758cd86c79205032b8bc528

Easily avoided problem with SASS (or LESS).

over 1 year ago ·
4115
44d05cf62687c3489b863e4677414ca6

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.

over 1 year ago ·
10552
Profile

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!

over 1 year ago ·