<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bitmatic &#187; chart</title>
	<atom:link href="http://bitmatic.com/tag/chart/feed" rel="self" type="application/rss+xml" />
	<link>http://bitmatic.com</link>
	<description>Lean IT-solutions in .NET/C#</description>
	<lastBuildDate>Tue, 11 Jan 2011 09:37:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Printing a HTML color chart with php</title>
		<link>http://bitmatic.com/php/printing-a-html-color-chart-with-php</link>
		<comments>http://bitmatic.com/php/printing-a-html-color-chart-with-php#comments</comments>
		<pubDate>Thu, 19 Mar 2009 12:26:01 +0000</pubDate>
		<dc:creator>Jakob</dc:creator>
				<category><![CDATA[php]]></category>
		<category><![CDATA[chart]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[color chart]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://bitmatic.com/?p=195</guid>
		<description><![CDATA[As a web-designer you have probably seen the tables of web-safe colors a million times on different sites. They are all over the web, and a google search for the term &#8220;web-safe color chart&#8221; yields about 2.5 million results. But how are they actually made ? An easy version On the website codecharts i made [...]]]></description>
			<content:encoded><![CDATA[<p>As a web-designer you have probably seen the tables of <a href="http://bitmatic.com/web/html-colors-and-color-chart">web-safe colors</a> a million times on different sites. They are all over the web, and a google search for the term &#8220;web-safe color chart&#8221; yields about 2.5 million results. But how are they actually made ?</p>
<h3>An easy version</h3>
<p>On the website <a href="http://www.codecharts.com">codecharts</a> i made a while ago to learn a bit of php, i implemented the <a href="http://www.codecharts.com/htmlcolors.php">web-safe color chart</a> using only 10 lines of php code. It is surprisingly easy.</p>
<p>Here is how it is done:<br />
<!-- code formatted by http://manoli.net/csharpformat/ --></p>
<pre class="csharpcode">
&lt;table width="100%" margin="0" padding="0" cellspacing="0"
  style="border:solid black 1px;"&gt;

&lt;?php
$steps = array(<span class="str">"00"</span>, <span class="str">"33"</span>, <span class="str">"66"</span>, <span class="str">"99"</span>, <span class="str">"CC"</span>, <span class="str">"FF"</span>);

<span class="kwrd">for</span>($x=0;$x&lt;6;$x++)
{
  <span class="kwrd">for</span>($y=0;$y&lt;6;$y++)
  {
    echo <span class="str">'&lt;tr&gt;'</span> . PHP_EOL;
    <span class="kwrd">for</span>($z=0;$z&lt;6;$z++)
    {
      $color = $steps[$x] . $steps[$z] . $steps[$y];
      echo <span class="str">'&lt;td style="line-height:10px;background:#'</span> . $color . <span class="str">';" title="#'</span>
                . $color . <span class="str">'"&gt;&amp;nbsp;&lt;/td&gt;'</span> . PHP_EOL;
    }
    echo <span class="str">'&lt;/tr&gt;'</span> . PHP_EOL;
  }
}
?&gt;

&lt;/table&gt;
</pre>
<p>It is implemented as a table. The table has a start and end tag, but the actual table rows and columns are generated with three nested php loops, that build the colors one b one using the array of possible hex-values for each color.</p>
<h3>How does it look ?</h3>
<p>The actual color chart generated by the above code looks like this:</p>
<table width="100%" margin="0" padding="0" cellspacing="0" style="border:solid black 1px;">
<?php<br />
$steps = array("00", "33", "66", "99", "CC", "FF");</p>
<p>for($r=0;$r<6;$r++)<br />
{<br />
  for($g=0;$g<6;$g++)<br />
  {<br />
    echo '<br />
<tr>&#8216; . PHP_EOL;<br />
    for($b=0;$b<6;$b++)<br />
    {<br />
	  $color = $steps[$r] . $steps[$b] . $steps[$g];<br />
	  echo '
<td style="line-height:10px;background:#' . $color . ';" title="#'<br />
                . $color . '">&nbsp;</td>
<p>&#8216; . PHP_EOL;<br />
    }<br />
	echo &#8216;</tr>
<p>&#8216; . PHP_EOL;<br />
  }<br />
}<br />
?><br />
</table>
<p>Clever use of title tags in every cell of the table means that you can hover the mouse over the color and get the value of the color.</p>
]]></content:encoded>
			<wfw:commentRss>http://bitmatic.com/php/printing-a-html-color-chart-with-php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

