Recentemente, precisei obter uma paleta de cores para um site, então escrevi um script ruby simples que atravessa as folhas de estilo de um site para construir sua paleta de cores.
Antes de ver essas paletas geradas, presumi que veria cerca de 20 cores. Mas, para minha surpresa, o número de cores diferentes para a paleta de um site variou de 5 a 331. uau!
Aqui estão alguns sites e suas cores / frequências:
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 |1Amazonas
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 |1Acho que você entendeu agora. Para evitar que você leia centenas de outras cores hexadecimais, listarei apenas os sites e o número de cores diferentes que eles usam (você pode regenerar essas tabelas usando o script vinculado na parte inferior).
techcrunch.com : 33 heroku.com: 44
twitter.com: 112
codeacademy.com: 176
github.com: 331
Vamos dar uma olhada rápida na Amazon, que tem uma paleta de 5 cores bastante sólida (laranja, branco, preto, azul e cinza), para tentar ter uma ideia de por que eles têm 75 cores. Para simplificar, vamos apenas dar uma olhada na cor mais usada: laranja.
Variações laranja da Amazon:
e47911, usado 30 vezes
f87500, usado duas vezes
f47629, usado uma vez
f58540, usado uma vez
f8981d, usado uma vez
Parece que muitos sites geralmente usam cerca de 10-20 cores (estimativa aproximada), mas variam muito (ou seja, escolha manualmente uma cor que pareça “próxima o suficiente”). Por causa disso, em vez de ter uma paleta sólida de 20 cores, eles têm uma paleta de cores sobreposta, se você quiser, com 100 e alguma coisa.
Depois de examinar todas essas paletas diferentes, comecei a imaginar a quantas cores diferentes um site deve limitar sua paleta de cores. 100 é desagradável e devido à escolha de cores de maneira preguiçosa (“oh, isso se parece com a laranja que usamos em nossa página inicial. Vamos usar isso.”)? 5 é muito simples? Apenas algo que venho pensando.
=================================================
você pode baixar e executar o script aqui: https://github.com/alyssa/color-palette
Se você quiser ver cores hexadecimais, achei este site útil: http://www.colorhexa.com