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>
2 responses to “Web Colors Previewer”
FYI, the link is broken if you try to click it in the actual article. If you click it from your home page it works. Maybe a problem with relative links?
thanks, should be fixed now