4000+ hexademical colors using for statements

4000+ hexademical colors using for statements

Posted in: css by musiitwa joseph 2014-11-28 at 10:09:44

image for 4000+ hexademical colors using for statements The colors start from #000 to #FFF, the numbers 0 - F are taken as hexadecimal numbers which are incremented by 1 to produce to 4096 color combinations. This shows the 3-digit hexadecimal color codes of the form #RGB, all the colors are generated through mixing red, green and blue which are the primary colors

/*
*display the (16*16*16)=4096 colors
*/
for($a=0; $a<16; $a++){
for ($b=0; $b<16; $b++){
for ($c=0; $c<16; $c++){
$color = hex($c).''.hex($b).''.hex($a);//hex() converts decimal to hex
echo '<div class="color-section" style="color:#'.text_color($a, $b, $c).'; background-color:#'.$color.';">
#'.$color.
'</div>';
}
echo '
';
}
}


The hex function is used to convert the decimal numbers that is 10 - 15 to hexadecimal

function hex($x){
if($x == 10)
$x = 'A';
else if($x == 11)
$x = 'B';
else if($x == 12)
$x = 'C';
else if($x == 13)
$x = 'D';
else if($x == 14)
$x = 'E';
else if($x == 15)
$x = 'F';

return $x;
}

The color of the codes is white, so it has to change when the color code background is white to any color. This just makes the code within to be visible. 15 = F, it brings in white in the color.

function text_color($x, $y, $z){
if($x == 15 || $y == 15 || $z == 15)
return '000';
else
return 'FFF';
}


This just gives height, width and border to the color section

<style type="text/css">

div.color-section{
float:left;
height:20px;
width:80px;
box-shadow:0px 0px 1px #000;
text-align:center;
font-size:12px;
}

</style>




Colors can also be specified by: Names, 6-digit hexadecimal codes, HSL / HSLA, RGB / RGBA


6-digit hexadecimal color codes, are like 3-digit hexadecimal color codes but you can more color combinations. Forexample #F12358 may not have its equivalent in 3-digit yet #060 has #006600.




HSL, you must select Hue value which is between 0 to 359, next you select the saturation level value between 0 to 100% and lastly you select luminance which is also between 0 to 100%. Forexample yellow background color is HSL(60, 100%, 40%);



HSLA, is like HSL but with A-Alpha representing opacity which is between 0 to 1. forexample the yellow background color making is opacity 50% it becomes HSL(60, 100%, 40%, 0.5);




RGB, color values are between 0 to 255 used to represent the amount of Red, Green, Blue that make up each color, also precentages may be used that is 0 - 100%. Forexample blue is RGB(0, 0, 255); or RGB(0%, 0%, 100%);




RGBA, its like RGB but with A-Alpha representing opacity. Forexample blue with 50% opacity is RGBA(0, 0, 255, 0.5); or RGBA(0%, 0%, 100%, .5);



Apart from specifying colors by names, you can use the concept in 3-digit hexadecimal color codes to write code that generates all the color combinations. Try it my friend.



Note: colors with alpha may not show in all browsers most especially internet explorer



Search

Leave a comment

Fields with * are required
Your email address will not be displayed
1 + 3 =