Created
March 6, 2011 19:06
-
-
Save phillipoertel/857551 to your computer and use it in GitHub Desktop.
Get the colors from a CSS file, sorted by how often they occurr.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require 'open-uri' | |
#uri = "http://www.zeldman.com/wp-content/themes/zeldman-v2/style.css?0111110710" | |
#uri = "http://asset2.betterplace.org/stylesheets/screen.css?1299172234" | |
uri = 'http://www.xing.com/css/v/144/general.min.css' | |
def parse_css_colors(uri) | |
file = open(uri).read | |
hex_colors = file.scan(/#[a-f0-9]{3,6}/i) | |
rgb_colors = file.scan(/rgba?\(.+?\)/i) | |
hsl_colors = file.scan(/hsla?\(.+?\)/i) | |
keyword_colors = file.scan(/\:\s*(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)/).map { |c| c.first} | |
colors = hex_colors + rgb_colors + hsl_colors + keyword_colors | |
# normalize hexcodes, i.e. downcase and extend shortened ones | |
# example: #F90 => #ff9900 | |
colors.map! do |color| | |
color.downcase! | |
if (color[0,1] == '#' && color.length == 4) | |
color = "#" + color[1..-1].chars.map { |c| c * 2 }.join | |
end | |
color | |
end | |
# count usages | |
colors = colors.reduce({}) do |hash, color| | |
hash[color] ||= 0 | |
hash[color] += 1 | |
hash | |
end | |
colors.sort { |h1, h2| h2[1] <=> h1[1] } | |
end | |
colors = parse_css_colors(uri) | |
# | |
# show the colors | |
# | |
tempfile_path = "/tmp/css_colors_#{Time.now.to_i}.html" | |
File.open(tempfile_path, "w") do |f| | |
f << <<-EOS | |
<style type="text/css"> | |
div.container { | |
width:220px; | |
height:60px; | |
padding:10px; | |
border-bottom:1px dotted #666; | |
float:left; | |
} | |
div.color-swatch { | |
border: 1px solid #999; | |
margin-right: 10px; | |
width: 50px; | |
height: 50px; | |
float:left; | |
} | |
h3 { | |
font-size:16px; | |
padding:0; | |
margin:0 | |
} | |
</style> | |
EOS | |
colors.each do |color, count| | |
f << '<div class="container">' | |
f << %(<div class="color-swatch" style="background-color:#{color}"></div>) | |
f << %(<div class="label"><h3>#{color}</h3><i>occurred #{count} times</i></div>) | |
f << '</div>' | |
end | |
end | |
`open #{tempfile_path}` |
Danke. Aber, ooochh, wer braucht denn noch mehr Keywords, liebes W3C? Nimmt doch eh keiner
ich wollte es ja nur gesagt haben! habe nicht erwartet dass du das einbaust :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great! Thx for sharing.
Just in case you ever want to support all color keywords that work in modern browsers: http://www.w3.org/TR/css3-color/#svg-color