Creating a swatch of entire color spectrum
I'm trying to create a swatch every color, which I'll later have to match to the pixels of an image to create a mosaic.
As of now, it doesn't display anything. I'm not sure if I'm running the loop correctly. It's taking every number for $r$g$b then incrementing it and changing it to a hex format to be read and displayed.
Code is here:
$r = 000;
$g = 000;
$b = 000;
for($r = 000; $r <= 155; $r++) {
for($r = 000; $r <= 155; $r++) {
for($r = 000; $r <= 155; $r++) {
echo '<span style="widt开发者_高级运维h: 5px; height: 5px; background-color-color:#'.dechex($r).dechex($g).dechex($b).'">.</span>';
}
}
}
Thanks in advance!
Several issues here:
- I see three loops which are all setting
$r, which should probably be$r,$g, and$b. - You probably want to increase each of the variables by more than 1 at each step. As written (once the r/g/b fix is done), the script you've got will generate about 273 MB of HTML output, which will yield a page about 100 feet tall (on screen, assuming 72 dpi).
- The maximum value for a color is 255, not 155 (unless you don't like bright colors).
- The CSS selector you're looking for is simply
background-color, notbackground-color-color. You need to pad the hex colors with zeroes when they're under 16 (
10hex). Easiest way to do this is:$color = sprintf("#%02x%02x%02x", $r, $g, $b); echo "... background-color:$color ...";
for ($r = 0; $r <= 255; $r++)
{
for ($g = 0; $g <= 255; $g++)
{
for ($b = 0; $b <= 255; $b++)
{
echo sprintf('<span style="width: 5px; height: 5px; background-color: #%02X%02X%02X">.</span>', $r, $g, $b);
}
}
}
You were only using $r in the loops, it's also 255 and not 155.
Bare in mind that this will create 256 * 256 * 256 = 16777216 span tags / swatches, besides making your browser eat a lof of memory it will also take a while to finish.
So, this will be horrendously inefficient due to all the looping (creating 16 million spans), but your logic is correct(ish) so I'll answer the question.
for($r = 000; $r <= 155; $r++) {
for($r = 000; $r <= 155; $r++) {
for($r = 000; $r <= 155; $r++) {
A couple of flaws here:
- These all reference the $r variable
- They go up to 155, you probably meant 255?
- They start at 000, might as well just make that 0 as they equate to the same thing.
As for the next block:
echo '<span style="width: 5px; height: 5px; background-color-color:#'.dechex($r).dechex($g).dechex($b).'">.</span>';
The main flaw here is that you are doing background-color-color instead of background-color.
There were multiple errors in your script, especially when formatting the color value. I opted for sprintf here as it does the job and is useful in other places as well. Then the CSS rule was wrong (-color-color). Additionally I've moved some of the styles into the head section to reduce the HTML output written. Additionally I've introduced a steps variable to not crash your browser (Demo):
<head><style>div {width:5px; height:5px; float:left;}</style></head>
<?php
$min = 0;
$max = 256;
$step = 15;
for ($r = $min; $r < $max; $r+=$step)
{
for ($g = $min; $g < $max; $g+=$step)
{
for ($b = $min; $b < $max; $b+=$step)
{
echo '<div style="background-color:', sprintf('#%02x%02x%02x', $r, $g, $b), '"></div>';
}
}
}
(Just seeing others have found the same issues in the meanwhile I was crashing my browser (and nicely explained), I leave the answer because of the demo.)
加载中,请稍侯......
精彩评论