Have you ever needed to see what a web color like #2a3f43 looks like?
So did i that is why I made this page Web color previewer
just type the number in the preview box and you will get a box with the color you typed.
If you input a new value the previous one is saved and displayed in a second box labeled previous
just make sure not to type the ‘#’ all you need is the hex values
if you are curious about the code here it is:
<?php
$current = '000000';
$previous = '000000';
$viewPrev = 'none';
$panel = '180px';
if(isset($_POST['color']))
{
$current = $_POST['color'];
}
if(isset($_POST['prev']))
{
$previous = $_POST['prev'];
$viewPrev = 'block';
$panel = '360px';
}
?>
<html>
<head>
<title>Color Previewer</title>
<style type="text/css">
.clear{
clear: both;
}
form {
text-align:center;
}
#panel{
margin: 0 auto;
width: <?php echo $panel;?>;
}
#current,#previous{
width: 180px;
float: left;
}
#previous{
display: <?php echo $viewPrev;?>;
}
label, input, div, h1 {
font-family: Arial, Helvetica, sans-serif;
}
#col, #col2{
margin: 10px;
width: 150px;
height: 150px;
border: 5px solid #000000;
}
#col{
background-color: #<?php echo $current;?>;
}
#col2{
background-color: #<?php echo $previous;?>;
}
h1, p{
text-align: center;
width: 180px;
font-size: 14pt;
text-shadow: #cccccc 2px 2px 2px;
}
#previous h1{
color: #<?php echo $previous;?>;
}
#current h1{
color: #<?php echo $current;?>;
}
</style>
</head>
<body>
<div id="panel">
<div id="previous">
<h1>#<?php echo $previous; ?></h1>
<div id="col2"></div>
<p>previous</p>
</div>
<div id="current">
<h1>#<?php echo $current; ?></h1>
<div id="col"></div>
<p>current</p>
</div>
<div></div>
</div>
<form action="color.php" method="POST">
<label for="color">Type a web color:</label>
<input type="text" name="color" value="" />
<input type="hidden" name="prev" value="<?php echo $current; ?>" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Leave a Reply