Web Colors Previewer

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:

$current = '000000';
$previous = '000000';
$viewPrev = 'none';
$panel = '180px';
$current = $_POST['color'];
$previous = $_POST['prev'];
$viewPrev = 'block';
$panel = '360px';
<title>Color Previewer</title>
<style type="text/css">
clear: both;
form {
margin: 0 auto;
width: <?php echo $panel;?>;
width: 180px;
float: left;
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;
background-color: #<?php echo $current;?>;
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;?>;
<div id="panel">
<div id="previous">
<h1>#<?php echo $previous; ?></h1>
<div id="col2"></div>
<div id="current">
<h1>#<?php echo $current; ?></h1>
<div id="col"></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" />


  1. 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?


  2. thanks, should be fixed now


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.