Html color code with php

Question

This query is rather strange - I searched, but cannot find anything like it.

I need a way in PHP / html to create a list from 1 to 100 colors (hexadecimal codes). Zero is red, and 100 is green, and each intermediate is a shadow that flows smoothly between them. (e.g. red to orange to yellow to green).

Let's say I can throw a number on it, for example, the number 50, and it returns the hexadecimal code from the list (50 will be yellow).

Is the only way to manually assign each color in an array? Or is there some simpler method?

Thanks.

Answer 1

try:

function rgb($val){ if($val<0 || $val>100)return;//error! $r=(100-$val)*255/50; if((100-$val)>50)$r=255; $rr=dechex($r); if($r<16)$rr='0'.$rr; $g=($val)*255/50; if((100-$val)<50)$g=255; $gg=dechex($g); if($g<16)$gg='0'.$gg; $bb='00'; return $rr.$gg.$bb; } 

Below are output values ​​from 0-100, lasting for 10 seconds:

 ff0000 ff3300 ff6600 ff9900 ffcc00 ffff00 ccff00 99ff00 66ff00 33ff00 00ff00 

Answer 2

If you pre-create a table or each time you calculate a value or something in between, the real difficulty is calculating the RGB color.

You need a linear interpolator between 2 RGB codes and 1 card on pure red, and 100 on pure green. Maybe something like:

 function interpolateRGB($from, $to, $at) { $col = array(0.0, 0.0, 0.0); for ($i=0;$i<3;++$i) $col[$i] = $from[$i]*(1.0-$at) + $to[i]*$at; return $col; } function convertToHexCol($col) { $ret = '#'; foreach ($col as $comp) $ret .= dechex(max(255,round(255.0*$comp))); return $ret; } function getColor($index) { $at = (float)($index-1)/99.0; $from = array(1.0, 0.0, 0.0); // red $to = array(0.0, 1.0, 0.0); // green $color = interpolateRGB($from, $to, $at); return convertToHexCol($col); } 

Answer 3

Yes, there is a simpler method. It can be calculated directly by normalizing in a range of values ​​from 0 to 255. Since you can select a number from 0 to 100, you can scale it to a range from 0 to 255 using the formula (n * 255) / 100 . As soon as you do this, you will determine the appropriate values ​​for red, green, blue, convert to hexadecimal and combine the result into the final hexagon:

• Enter from 0 to 100 from the user in n .
• Calculate the normalized value norm = (n * 255) / 100 .
• Set red to 255 - norm because it decreases from n .
• Set green to norm because it is incremented with n .
• Set blue to 0.
• Convert red , green , blue to hexadecimal and combine into one line.

Here is a JavaScript implementation example that shows the hexadecimal color output as well as the text color in that color to demonstrate: http://jsfiddle.net/zEB4J/

Image Samples:

The gradient generation is demonstrated here: http://jsfiddle.net/XMTcb/

Answer 4

I don't know much about php, but you can solve it without arrays using simple math. Let's say x is a number from 0 to 100. Each color in our RGB should be between 0 and 0xFF (256 possible values), so we should look at x / 100 and round it to a fraction with a denominator of 256.

In other words, the fraction: round ((x / 100) * 256) / 256

This is the amount of green (00FF00). The amount of red (FF0000) is obvious:

1 - round ((x / 100) * 256) / 256

Together we get the value:

0xFF0000 + round ((x / 100) * 256) / 256 * (0x00FF00 - 0xFF0000)

and if x is an integer, and we want to avoid rounding with integer division, we must evaluate the multiplications before the divisions:

0xFF0000 + (round ((x * 256) / 100) * (0x00FF00 - 0xFF0000)) / 256

and what's the coolest estimate.

Answer 5

The easiest and most universal way to do this is with two functions: one for creating the hexadecimal HTML value from RGB arrays and one for crowding out RGB arrays ...

 // Creates an HTML HEX color from an array of color integers array(r,g,b)... function rgb($rgb) { $ret = ''; foreach ($rgb as $x) { // Make sure the RGB values are 0-255... $x = max(0, min(255, $x)); // create a 2 digit hex value for this color component... $ret .= ($x < 16 ? '0'.dechex($x) : dechex($x)); } return '#'.$ret; } // Returns a fade of $from into $to by $amount ($from and $to are RGB arrays)... function fade($from, $to, $amount) { $rgb = array(); // Go through the RGB values and adjust the values by $amount... for ($i = 0; $i <= 2; $i++) { $rgb[$i] = (($to[$i] - $from[$i]) * $amount) + $from[$i]; } return $rgb; } 

Then you can extrude any color with any other color for any amount, for example, this example, which disappears from red to green with 100 steps ...

 for ($fadeAmount = 0; $fadeAmount < 1; $fadeAmount += 0.01) { $color = rgb(fade(array(255,0,0), array(0,255,0), $fadeAmount)); echo "<div style='color:$color'>$fadeAmount</div>"; }