Simple PHP form for selecting web-safe colors

by Klaus Graefensteiner 1. March 2010 16:00

PHP Color Attribute Picker

In this blog post I am showing a simple PHP form that lets the user enter a name and color attribute values for the foreground and background color of an html element.

Figure 1: Resulting web page of the web-safe color attribute value picker

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php
	$name = ''; 
	if (isset($_GET['name'])) 
	{ 
		$name = filter_input(INPUT_GET, 'name', FILTER_SANITIZE_SPECIAL_CHARS); 
		if ($name === false) 
		{
			$name = "Not a valid name!\n"; 
		} 
	}
	
	$backgroundcolor = ''; 
	if (isset($_GET['backgroundcolor'])) 
	{ 
		$backgroundcolor = filter_input(INPUT_GET, 'backgroundcolor',FILTER_VALIDATE_INT); 
		if ($backgroundcolor === false) 
		{
			$backgroundcolor = "Not a valid background color!\n"; 
		} 
	}
	
	$foregroundcolor = ''; 
	if (isset($_GET['foregroundcolor'])) 
	{ 
		$foregroundcolor = filter_input(INPUT_GET, 'foregroundcolor',FILTER_VALIDATE_INT); 
		if ($foregroundcolor === false) 
		{
			$foregroundcolor = "Not a valid foregroundcolor color!\n"; 
		} 
	}
	
	
	function GetWebSafeColors()
	{
		$WebSaveColors = array();
		$ArrayIndex = 0;
		for($red = 0x0; $red <= 0xff; $red += 0x33)
		{
			for($green = 0x0; $green <= 0xff; $green += 0x33)	
			{
				for($blue = 0x0; $blue <= 0xff; $blue += 0x33)
				{
					$WebSaveColors[$ArrayIndex++] = sprintf("#%02x%02x%02x", $red, $green, $blue);
				}
			}
		}
		return $WebSaveColors;
	}
	
	function RenderColorOptions($WebSafeColors)
	{
		while(list($value, $color) = each($WebSafeColors))
		{
			echo "<option value=\"$value\">$color</option>";
		}
	}
	
	function RenderNameSpan($backgroundcolor, $foregroundcolor, $name)
	{
		$WebSafeColors = GetWebSafeColors();
		echo "<p style=\"color:$WebSafeColors[$foregroundcolor]; background-color:$WebSafeColors[$backgroundcolor];  font-size:72px\">Hello $name, Welcome to my Great Site</p>";
	}
	
?>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>webcolors.php</title>
</head>
<body>
<form method="GET" action="">
<label>Enter your name:</label>
<input type="text" name="name"></input>
<br />
<label>Select your background color:</label>
<select name="backgroundcolor" id="backgroundcolor">
<?php 
	RenderColorOptions(GetWebSafeColors());
?>	
</select>
<br />
<label>Select your foreground color:</label>
<select name="foregroundcolor" id="foregroundcolor">
<?php 
	RenderColorOptions(GetWebSafeColors());
?>
</select>
<br />
<input type="submit" value="Submit">
</form>
<?php 
	if(isset($_GET['name']))
	{
		RenderNameSpan($backgroundcolor, $foregroundcolor, $name);
	}
?>
</body>
</html>