I've made a command which will list all colours in a CSS file as a list of swatches.
At the minute it only does Hex colours also I would like it if you could click colours and it would jump to them in your document but I lack the ruby skills as I'm sure you will notice from the shoddy "colourArrayToTrim.each" bit.
Anyway some people might find it useful input:entire document output:show as HTML activation:Key cmd+shift+opt+ctrl+c (ALL modifiers + C, to show ALL colours ;) ) scope: source.css Code as follows:
#!/usr/bin/env ruby
file = STDIN.read fileName = ENV['TM_FILENAME']
hex = Regexp.new(/(#(\d|[a-f]|[A-F]){3,6})/)
colourArrayToTrim = file.scan(hex) colourArray = [] colourArrayToTrim.each { |colour| colourArray.push colour.shift }
puts '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Colours</title>
<style type="text/css" media="screen"> a { color: #000; text-decoration: none; line-height: 22px; border: 1px solid #fff; padding: 2px; }
a:hover { background-color: #EFEFEF; border: 1px solid #999; }
.colourRow { display: block; margin-top: 5px; margin-bottom: 5px; width:160px; margin-right: 10px; float:left; }
.swatch { width: 20px; height: 20px; display: block; border: 1px solid #666; margin-right: 10px; float: left; }
.swatch div { width: 18px; height: 18px; border: 1px solid #fff; }
</style>
</head>
<body>'
puts "<h2>Colours used #{fileName}</h2>"
colourArray.each { |colour| puts " <a href='' class='colourRow'> <div class='swatch'> <div style='background-color:#{colour};'></div> </div> #{colour} </a> " }
puts " </body> </html> "