FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

PHP code for gradients.... (HEX) Color1, Color2, steps

   Frihost Forum Index -> Scripting -> Php and MySQL
 


bgillingham
I've seen a couple recent posts here looking for how to create a color gradient in PHP. I can say that I've created that wheel - and you can modify it to suit your needs.

This code is implemented (with a little bit more style - but essentially the same code) at my website. "gradienttesting.php" - Demo.

I wrote a PHP routine to create a gradient between two colors - taking however many steps. I initially wrote this so that I could create two shades of a color to use as a matte border for a series of screenshots, but this could easily be used to populate an array of color values or create a block of CSS code to assign colors for various dynamic classes that are used in an HTML doc. You can see the colors being used behind the scrolling screenshots "Screenshots from Games and Entertainment::Casino and Gambling" on this page: Software: Games and Entertainment::Casino and Gambling; it is a little hard to see the second color's usage, but there is a 2px border that is darker than the image's average color and the remaining background is lighter than the image's color.

The first block of code is a php test page - and is referred to by the name "gradienttesting.php". Once you're done testing, you can move whatever code you need to its rightful place.
Code:
<?php
// save as "gradienttesting.php"
include("colorfuncs.php");

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;

echo "<html><head><title>Gradient Color Tool Testing</title></head><body>";
echo "<div id='content'><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>
 </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 "</div></body></html>";

?>


The second block of code is the "colorfuncs.php" unit. Based on the first block of code, both of these units must be saved in the same directory on your server. This unit should be able to handle colors by name as well as hex values.
Code:
<?php
// save as "colorfuncs.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;
}
?>
alalex
really nice and easy to implement in webpages and then use for other things!
You could some kind of html-css-code-maker to create for example different gradients of colors for each heading (<h1>,<h2>...)

Arrow really good scrip, keep working on it, you can make it really good!
Dougie1
I remember a while ago you helped me with a script to create a text gradient by giving me this code Smile

Thanks very much for it it is a great code and here is my text gradient tool which has been created from that code as a basis:

http://www.randomredirection.com/Text%20Gradient%20Tool.php

I also recently created one which creates a gradient between RGB colours which I wrote my own code for but is quite useful sometimes:

http://www.dougs-site.frih.net/Gradient.php?colour1=123123123&colour2=255255255

Colour one being the one on the left and 2 being the one on the right. It is not flawless though. It sometimes breaks


And also made a random gradient code:



Thanks for your help bgillingham.
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

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