homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
tool to sort out colors used in CSS
Sarah Atkinson




msg:4052329
 9:04 pm on Dec 31, 2009 (gmt 0)

I always run into the problem of not knowing all the CSS colors I use. So today I wrote up a little tool to help me. It's written in PHP and pulls all the hex#s from your CSS and displays them in a browser window.
to run just save the file on a php enabled server and in the window enter in you CSS file's url(can be localhost)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
function cmp($a, $b) {
//if equal
if ($a == $b) {
return 0;
}
//remove the '#' and convert the hex number to another number to a decimal
return (hexdec(rtrim($a,'#')) < hexdec(rtrim($b,'#'))) ? -1 : 1;
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label>Enter URL of stylesheet:
<input name="css" type="text" size="50" />
</label>
<br />
<input name="submit" type="submit" value="submit" /></form>
<div style="clear:both;">
<?php
if(isset($_POST['css']))
{
$stylesheetURL=$_POST['css'];
$cssFile= file_get_contents($stylesheetURL);
//match and store all the hex numbers in Array $matches
$cssbool= preg_match_all('/(#[0-9abcdefABCDEF]{3,})/',$cssFile,$matches);
//par it down from a multi-demntial array
$colorArray=$matches[0];
//get rid of duplicates
$smallColorArray=array_unique($colorArray);
//sort array
uasort($smallColorArray, 'cmp');
foreach($smallColorArray as $thisColor)
{
echo "<div style=\"margin:20px;float:left;border:#000 solid 1px;\" ><div style=\"background-color:$thisColor; width:100px; height:100px; margin:5px;></div><div style=\"clear:both;\"></div><h3 style=\"text-align:center;\">$thisColor</h3></div> ";
}
}
?>
</body>
</html>

 

lavazza




msg:4053563
 7:44 am on Jan 4, 2010 (gmt 0)

Very, very useful!

Thanks Sarah!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved