FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Generating the next shade of a colour.





Dougie1
What I want to do is to make a code that will make text like a colour gradient a bit like this and this.

I would like php to automatically calculate the next colour. Maybe if I said start at #FF0000 and then go towards #0000FF with each letter.

I know this is a bit difficult to describe but if someone could help me calculate the next shades of colours I would probably be able to work out the rest.

Thanks Very Happy
qscomputing
Decide how many steps you want in your gradient.

Start with the first colour and split it up into red, green and blue.
FF 00 00

Do the same for the second colour.
00 00 FF

You may find it helpful to convert from hex to decimal:
255 000 000
000 000 255

Look at each colour that is changing, and work out the amount by which it changes:

-255 0 +255

Now divide by the number of steps you want and add that amount each time. eg for 5 steps:

255/5 = 51
so add 51 to red and subtract 51 from blue each time.

HTH.
bgillingham
Here's some code you could play with -- currently, it makes each div based on the next color, but you could easily change it so that the color applies to a <span style='color: #VVWWXX'>A</span><span style='color: #XXYYZZ'>b</span>...

You could break out the functions and put them into a separate "colorfuncs.php" file and include that in whatever else may need any of these color functions -- that's what I did, but I put all of the code in the same file here.

The form takes COLOR1, COLOR2, and STEPS -- and outputs all of the intermediate colors as divs. If you want to check out my testing form - it is here. Since it is a testing form, don't expect this form to be here in March or April.... I will delete it sometime soon.

Code:
<?php
global $colornames;
if (!isset($colornames))
  $colornames = getcolornames();

function blend2hexcolors($color1, $color2, $amount_of_2) {
  $color1 = str_replace('#', '', getcolorofname($color1));
  $color2 = str_replace('#', '', getcolorofname($color2));

  $c1R = hexdec(substr($color1,0,2));
  $c1G = hexdec(substr($color1,2,2));
  $c1B = hexdec(substr($color1,4,2));

  $c2R = hexdec(substr($color2,0,2));
  $c2G = hexdec(substr($color2,2,2));
  $c2B = hexdec(substr($color2,4,2));
  $R = str_pad(dechex(round(((($amount_of_2 * $c2R) + (100 - $amount_of_2) * $c1R)/100), 0)), 2, "0", STR_PAD_LEFT);
  $G = str_pad(dechex(round(((($amount_of_2 * $c2G) + (100 - $amount_of_2) * $c1G)/100), 0)), 2, "0", STR_PAD_LEFT);
  $B = str_pad(dechex(round(((($amount_of_2 * $c2B) + (100 - $amount_of_2) * $c1B)/100), 0)), 2, "0", STR_PAD_LEFT);
 
  return $R.$G.$B; 
}

function getcolorofname($colorname) {
  global $colornames;
  $re = $colorname;
  foreach ($colornames as $key=>$value) {
    if (strtolower($key) == strtolower($colorname)) {
      $re = $value;
      break;
    }
  }
  return $re;
}

function getcolornames() {
  $r = array();
  $r["Aliceblue"]="#F0F8FF";
  $r["Antiquewhite"]="#FAEBD7";
  $r["Aqua"]="#00FFFF";
  $r["Aquamarine"]="#7FFFD4";
  $r["Azure"]="#F0FFFF";
  $r["Beige"]="#F5F5DC";
  $r["Bisque"]="#FFE4C4";
  $r["Black"]="#000000";
  $r["Blanchedalmond"]="#FFEBCD";
  $r["Blue"]="#0000FF";
  $r["Blueviolet"]="#8A2BE2";
  $r["Brown"]="#A52A2A";
  $r["Burlywood"]="#DEB887";
  $r["Cadetblue"]="#5F9EA0";
  $r["Chartreuse"]="#7FFF00";
  $r["Chocolate"]="#D2691E";
  $r["Coral"]="#FF7F50";
  $r["Cornflowerblue"]="#6495ED";
  $r["Cornsilk"]="#FFF8DC";
  $r["Crimson"]="#DC143C";
  $r["Cyan"]="#00FFFF";
  $r["Darkblue"]="#00008B";
  $r["Darkcyan"]="#008B8B";
  $r["Darkgoldenrod"]="#B8860B";
  $r["Darkgray"]="#A9A9A9";
  $r["Darkgreen"]="#006400";
  $r["Darkkhaki"]="#BDB76B";
  $r["Darkmagenta"]="#8B008B";
  $r["Darkolivegreen"]="#556B2F";
  $r["Darkorange"]="#FF8C00";
  $r["Darkorchid"]="#9932CC";
  $r["Darkred"]="#8B0000";
  $r["Darksalmon"]="#E9967A";
  $r["Darkseagreen"]="#8DBC8F";
  $r["Darkslateblue"]="#483D8B";
  $r["Darkslategray"]="#2F4F4F";
  $r["Darkturquoise"]="#00DED1";
  $r["Darkviolet"]="#9400D3";
  $r["Deeppink"]="#FF1493";
  $r["Deepskyblue"]="#00BFFF";
  $r["Dimgray"]="#696969";
  $r["Dodgerblue"]="#1E90FF";
  $r["Firebrick"]="#B22222";
  $r["Floralwhite"]="#FFFAF0";
  $r["Forestgreen"]="#228B22";
  $r["Fuchsia"]="#FF00FF";
  $r["Gainsboro"]="#DCDCDC";
  $r["Ghostwhite"]="#F8F8FF";
  $r["Gold"]="#FFD700";
  $r["Goldenrod"]="#DAA520";
  $r["Gray"]="#808080";
  $r["Green"]="#008000";
  $r["Greenyellow"]="#ADFF2F";
  $r["Honeydew"]="#F0FFF0";
  $r["Hotpink"]="#FF69B4";
  $r["Indianred"]="#CD5C5C";
  $r["Indigo"]="#4B0082";
  $r["Ivory"]="#FFFFF0";
  $r["Khaki"]="#F0E68C";
  $r["Lavender"]="#E6E6FA";
  $r["Lavenderblush"]="#FFF0F5";
  $r["Lawngreen"]="#7CFC00";
  $r["Lemonchiffon"]="#FFFACD";
  $r["Lightblue"]="#ADD8E6";
  $r["Lightcoral"]="#F08080";
  $r["Lightcyan"]="#E0FFFF";
  $r["Lightgoldenrodyellow"]="#FAFAD2";
  $r["Lightgreen"]="#90EE90";
  $r["Lightgrey"]="#D3D3D3";
  $r["Lightpink"]="#FFB6C1";
  $r["Lightsalmon"]="#FFA07A";
  $r["Lightseagreen"]="#20B2AA";
  $r["Lightskyblue"]="#87CEFA";
  $r["Lightslategray"]="#778899";
  $r["Lightsteelblue"]="#B0C4DE";
  $r["Lightyellow"]="#FFFFE0";
  $r["Lime"]="#00FF00";
  $r["Limegreen"]="#32CD32";
  $r["Linen"]="#FAF0E6";
  $r["Magenta"]="#FF00FF";
  $r["Maroon"]="#800000";
  $r["Mediumaquamarine"]="#66CDAA";
  $r["Mediumblue"]="#0000CD";
  $r["Mediumorchid"]="#BA55D3";
  $r["Mediumpurple"]="#9370DB";
  $r["Mediumseagreen"]="#3CB371";
  $r["Mediumslateblue"]="#7B68EE";
  $r["Mediumspringgreen"]="#00FA9A";
  $r["Mediumturquoise"]="#48D1CC";
  $r["Mediumvioletred"]="#C71585";
  $r["Midnightblue"]="#191970";
  $r["Mintcream"]="#F5FFFA";
  $r["Mistyrose"]="#FFE4E1";
  $r["Moccasin"]="#FFE4B5";
  $r["Navajowhite"]="#FFDEAD";
  $r["Navy"]="#000080";
  $r["Oldlace"]="#FDF5E6";
  $r["Olivedrab"]="#6B8E23";
  $r["Orange"]="#FFA500";
  $r["Orangered"]="#FF4500";
  $r["Orchid"]="#DA70D6";
  $r["Palegoldenrod"]="#EEE8AA";
  $r["Palegreen"]="#98FB98";
  $r["Paleturquoise"]="#AFEEEE";
  $r["Palevioletred"]="#DB7093";
  $r["Papayawhip"]="#FFEFD5";
  $r["Peachpuff"]="#FFDAB9";
  $r["Peru"]="#CD853F";
  $r["Pink"]="#FFC8CB";
  $r["Plum"]="#DDA0DD";
  $r["Powderblue"]="#B0E0E6";
  $r["Purple"]="#800080";
  $r["Red"]="#FF0000";
  $r["Rosybrown"]="#BC8F8F";
  $r["Royalblue"]="#4169E1";
  $r["Saddlebrown"]="#8B4513";
  $r["Salmon"]="#FA8072";
  $r["Sandybrown"]="#F4A460";
  $r["Seagreen"]="#2E8B57";
  $r["Seashell"]="#FFF5EE";
  $r["Sienna"]="#A0522D";
  $r["Silver"]="#C0C0C0";
  $r["Skyblue"]="#87CEEB";
  $r["Slateblue"]="#6A5ACD";
  $r["Snow"]="#FFFAFA";
  $r["Springgreen"]="#00FF7F";
  $r["Steelblue"]="#4682B4";
  $r["Tan"]="#D2B48C";
  $r["Teal"]="#008080";
  $r["Thistle"]="#D8BFD8";
  $r["Tomato"]="#FF6347";
  $r["Turquoise"]="#40E0D0";
  $r["Violet"]="#EE82EE";
  $r["Wheat"]="#F5DEB3";
  $r["White"]="#FFFFFF";
  $r["Whitesmoke"]="#F5F5F5";
  $r["Yellow"]="#FFFF00";
  $r["Yellowgreen"]="#9ACD32";
 
  return $r;
}

function _GetParamG($Name, $Default = "") { if ( isset($_GET[$Name]) ) return
$_GET[$Name]; else if ( isset($_POST[$Name]) ) return $_POST[$Name]; else
return $Default; }

  $color1 = _GetParamG("color1"); 
  $color2 = _GetParamG("color2"); 
  $steps = _GetParamG("steps"); 
  if (empty($steps) || ($steps == 0))
    $steps = 5;

  $form = "<form action='gradienttesting.php' method='post'>
    <blockquote><h1>Gradient Color Tool</h1>
    <div style='width: 120px'><b>Color 1:</b></div> <input maxlength='55' size='30' type='text' name='color1' value='$color1'><br>
    <div style='width: 120px'><b>Color 2:</b></div> <input maxlength='55' size='30' type='text' name='color2' value='$color2'><br>
    <div style='width: 120px'><b>Steps:</b></div> <input maxlength='55' size='30' type='text' name='steps' value='$steps'><br>
    <center><input type='submit' value='Create Gradient Steps'></center></blockquote>
    <p>&nbsp;</p></form>
    <form action='#' method='post'>";
   
    echo "<html><head><title>Gradient Testing</title></head>
      <body><div id='content'>$form";

  if (isset($color1) && isset($color2)) {
    $clr_style = "style='background-color: #".$color1."'";
    echo $color1."&nbsp;&raquo;&nbsp;<input size='6' type='text' $clr_style><br style='clear: both; font-size: 1%'>";
    $clr_style = "style='background-color: #".$color2."'";
    echo $color2."&nbsp;&raquo;&nbsp;<input size='6' type='text' $clr_style><br style='clear: both; font-size: 1%'><hr>";

    $blendpct = 0;
    $step_size = 100 / (1+$steps);
    for ($i=0;$i<$steps;$i++) {
      $blendpct = $blendpct + $step_size;
      $color_val = blend2hexcolors($color1, $color2, round($blendpct, 0));
      $clr_style = "style='font-family: Courier; background-color: #".$color_val."'";
      $h = 1+$i;
      echo "<div style='width: 120px'> Step: ".$h."  HEX: </div><input type='text' size='6' readonly value='".$color_val."'>&nbsp;&raquo;&nbsp;<input size='6' type='text' $clr_style><br style='clear: both; font-size: 1%'>";
    }
  }

  echo "</form></div></body></html>";
?>
Dougie1
Wow! Thanks for the help bgillingham and qscomputing that was really helpful!! I was wondering how to make the colours appear around letters. I thought about wordwrap so you could have the colours around every letter but then I wasn't sure as you can't really have a variable as easily. Could someone give me an idea for doing this. Thanks.
bgillingham
To get each letter to be individually colored, you must know that the size of the HTML document will be much larger. I guess that for each letter, you'd need to add at least 35 characters, so it will multiply the size of your rainbow text by 35x. There may be better styles to use.

Code:
ABC

ABC - 3 bytes - unformatted with any colors (or maybe each letter is two bytes - whatever)

Code:
<span style='color: #112233'>A</span><span style='color: #224455'>B</span><span style='color: #336677'>C</span>

112 bytes!- each formatted with its own "<span style='color:#405070'>" ... "</span>"

Another option to consider might be to create the CSS file with as many step colors as you'd need - each with a short class name like "c1"..."c99". In your html, you could reference the class rather than have a inline styles added. The result would look more like:

CSS color class definitions:
Code:
.c1 {color:#112233}
.c2 {color:#224455}
.c3 {color:#336677}

Code:
<span class='c1'>A</span><span class='c2'>B</span><span class='c3'>C</span>
only 75 bytes!

The best choice would probably be the CSS with all of the color classes defined. Not sure if your begin and end colors are always going to be different, or if you only need one "rainbow".
Dougie1
That is a good idea for html. I might use that in the html version as it will be easier. But I was also going to make a programme that output bb code for rainbow text for use on forums. For this I would need it to go around each letter.
bgillingham
I hope you're talking about phpBB! That may be a cool bit of code to have.

I found that there is a way of supporting gradients in IE only, but that is proprietary crap that you don't want to depend on - besides, it doesn't include the majority of surfers.
Dougie1
bgillingham wrote:
I hope you're talking about phpBB! That may be a cool bit of code to have.

I found that there is a way of supporting gradients in IE only, but that is proprietary crap that you don't want to depend on - besides, it doesn't include the majority of surfers.
Thanks anyway. You have been really helpful! I think I have a way to do it. It may not be the best way to do it but I think I have it using two php codes.

And yes I was talking about phpBB!
Related topics
Unified Next-Gen DVD Format Unlikely
Colour Contrast Analyser
funny joke
your favorite song's lyrics
Resources are about to run out. What are we to do?..
Azkabanweb.tk
What's your favourite colour?
Legendary Creatures
This day in Scottish History.
What would you like to see in the next X360 dashboard update
Megaman Phoenix
The Problem of Evil
Art of water colour PAINTING
Wingnut Deputy Att. General fired for anti-protester comment
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.