As the title says - I need something I can feed CSS files into and have it output a list of colour values used in it, what the colours are assigned to, and preferably an example of each colour?
There must be something like that out there somewhere, mustn’t there?
These are your CSS files?
I don’t know of any existing tools, but it seems a script with a carefully crafted regex could do the trick.
They’re mine in so far as they’ve been set in the CSS of the skin/theme on my blog - it’s not something I’ve created myself. Regex would take me rather longer than going through the file line at a time, which is what I’m doing right now. Maybe regex is easier…
If they are your own files - and you have written them in consistent format - it would simplify regex a lot. eg
}
.selector {
color: #f00;
background-color: #0ff;
}
something like
/\}[/s]+([^{]+)\{/
could be used to get the selectors
Finding and capturing the rules - values would be a bit trickier and I haven’t had enough coffee to get my head around it yet.
If you post a sample of a CSS block I’ll try throwing together a PHP script after I eat and wake up a bit more.
I wouldn’t worry about doing anything like that. I’ll work my way through it bit by bit - I need a better feel for what’s going on in it anyway. The one thing this CSS isn’t, is consistent; so far, I’ve found seven different shades of brown in it.
There seem to be a number of tools that show the colors, but not the selectors that use them.
I use a little Firefox plugin called “Rainbow” that reads and displays the colors. The Web Developer’s Extension for FF seems to be at least as good. Dunno. Haven’t used either tool to examine an entire CSS file.
EDIT: The Web Dev’s Extension does a more thorough job. No selector’s tho.
This what I’ve got so far - it’s rough, but it shows you what I’m dealing with
I’ll take a look at those later - whilst they may not have the selectors, just a complete list of colour values would be a good start point, I’m now up to 10 shades of brown - feels like a book title, anyone care to suggest a plot? On second thoughts…
The one thing this CSS isn’t, is consistent; so far, I’ve found seven different shades of brown in it.
I have adopted the approach of declaring classes for backgrounds and colours. The idea is DRY:
.bg0 {background-color:#fff;}
.bg1 {background-color:skyblue;}
.bg2 {background-color:pink;}
.cg0 {color:#000;}
.cg1 {color:red;}
.cg2 {color:white;}
.cg3 {color:blue;}
Using this approach considerably reduces the style-sheet size.
Whilst I’m not immediately familiar with working in that way, it does rather sound like what I need to be adopting to clean things up. As you might see in that Codepen, there are multiple individual rules applying the same colour - one colour has 7 separate rules applying it - it’s all a bit of nonsense really.
Yo, Chris, go here: http://stylifyme.com/
Here are the colors used by SitePoint.com: http://stylifyme.com/?stylify=sitepoint.com
Hope this helps 
Here is a fun tool that strips hex colour values from a CSS script and displays them as a colour palette. Just paste your style sheet in the text area provided and click the GO button. It only works for hex, so it won’t pick up RGB or colour names like “red”.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Colours from CSS file</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color: #000000; text-align:left; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:800px; height:550px; margin:20px; border:1px solid #CCCCCC; }
#ff { color:#F0F; background-color:#FFFF00; }
#outer { position:absolute; top:0px; right:0px; width:230px; }
.square { float:left; width:100px; height:100px; border:1px solid #000; margin:5px; overflow:hidden; }
.bgC { background-color:#FFF; padding:0px; color:#000; margin:0px; }
#goB { margin:10px; }
</style>
</head>
<body>
<div id="wrap">
<textarea id="cssData" cols="50" rows="30" onchange="showColours()">copy CSS to here and click GO button</textarea>
<div id="goB"><input type="button" value="GO" name="GO">
<div id="outer">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
function showColours()
{ var tAreaObj=document.getElementById("cssData");
var re=/#[^;]{3}([^;]{3})?[;]/gi;
var getColours=tAreaObj.value.match(re);
var outerObj=document.getElementById("outer");
var build="";
for(var i=0;i<getColours.length;i++)
{ var thisBg=getColours[i].substring(0,getColours[i].length-1);
build+='<div class="square" style="background:'+thisBg+'">';
build+='<span class="bgC">'+getColours[i]+'<\/span><\/div>\n';
}
outerObj.innerHTML=build;
}
</script>
</body>
</html>
Have fun 
@AllanP
I do like your JavaScript and took the liberty to upload to my site in the link below.
I have copied your original scripts, optimised the CSS style sheets and show each style sheet below the table:
Certainly it gave me a good start on what to expect. It seems like it’s limited as to how many colours it will pull out - it looks like 8 text, and 8 background only. Useful on very simple colour schemes though.
This works great for what I need, despite it not indicating what rules are used to apply the colours. Through a combination of the tool as @John_Betong implemented it, and a Google Docs Sheet, I managed to extract everything, sort it, and identify the unique values. I started with 67 separate hex values, which represented 36 unique values, in the one CSS file I ran through it (the main one for my purposes). The unique values are below: It’s fun to just copy these as they are and run them through what John has set up. You very quickly get an idea of what’s going on, and it helps target those values that could be collapsed into a smaller set.
Thanks the help on this one, very educational.
`#000; #2b1a12; #2f2118; #3c2d21; #402416; #444; #4b3528; #4c4c4e; #523a2c; #572d12; #6b4634; #895c46; #908070; #937d55; #964122; #997340; #999; #9e7d55; #a85; #b2916f; #b98b07; #bbb; #bd9f80; #c09261; #c3aa85; #c9ae92; #cfb79c; #d4bea5; #d8c19a; #dac6ad; #dfcdb6; #e5d4be; #e9dac5; #ede0cc; #f7ecda; #fff;
I have always thought that CSS files should separate the positioning elements and colours which is why I have separate colour classes which make it far easier to globally change as shown with the CSS 2nd Pass style sheet:
#container {max-width: 960px; margin: auto auto 2.2em;}
.spacer {width: 10px;}
td {padding: 10px; font-size: 1.3em;}
.fg1 {color: #3c2d21;}
.fg2 {color: #fff;}
.fg3 {color: #000;}
.fg4 {color: #d8c19a;}
.fg5 {color: #4b3528;}
.fg6 {color: #997340;}
.fg7 {color: #c09261;}
.bg0 {background-color: #4c4c4e;}
.bg1 {background-color: #fff;}
.bg2 {background-color: #ccc;}
.new,
.orig,
.bg3 {background-color: #895c46;}
.bg6 {background-color: #2b1a12;}
Only about twenty lines compared with the original 145 line style sheet version!
For the purposes of the Codepen, I was working line by line (or row by row to be more accurate) picking things out - as you can see from my last post, the Codepen is only around a 3rd of the way towards showing everything in there and the rules used to apply them. The original CSS file accounts for 367 lines of the stuff, and shows some rather loose organisation to say the least.
I’m certainly going to be looking at rebuilding the CSS to rationalise it and reduce the number of colours being used. As you were writing, I was just looking at the Paletton.com site - this version of the link has the most prominent background colour set in it. I’m playing around with combinations to see what I like the look of. I like the look of the technique you use there. I can see myself using that. My guess is that the CSS on the site can come down by at least 50% with a bit of a rethink.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.