Skip to content

Instantly share code, notes, and snippets.

@phillipoertel
Created March 6, 2011 19:06
Show Gist options
  • Save phillipoertel/857551 to your computer and use it in GitHub Desktop.
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.
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}`
@tiff
Copy link

tiff commented Mar 6, 2011

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

@phillipoertel
Copy link
Author

Danke. Aber, ooochh, wer braucht denn noch mehr Keywords, liebes W3C? Nimmt doch eh keiner

@tiff
Copy link

tiff commented Mar 7, 2011

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