
<?php

    function makewebsafe($colour) {
        $cols['r'] = hexdec(substr($colour, 0, 2));
        $cols['g'] = hexdec(substr($colour, 2, 2));
        $cols['b'] = hexdec(substr($colour, 4, 2));
        $return = "";
        foreach($cols as $col)
        {
            $col = (round($col / 51) * 51);
            $return .= str_pad(dechex($col), 2, '0', STR_PAD_LEFT);
        }
        return $return;
    }

    if (isset($_GET['colour']) && (preg_match("/^([#]?)([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/", $_GET['colour']) > 0)) {
        $colour = $_GET['colour'];
        if ($colour{0} == "#") {
            $colour = substr($colour, 1);
        }
        if (strlen($colour) == 6) {
            $safecolour = makewebsafe($colour);
        } else {
            $safecolour = $colour;
        }
        $comment = "<p>Colour entered: #" . $colour . ".</p>\n";
    } else {
        $colour = "fff";
        $safecolour = "fff";
        $comment = "<p>Invalid colour entered, defaulting to: #" . $colour. ".</p>\n";
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>Colour: #<?php echo $colour; ?></title>
    <style type="text/css" media="screen">
    <!--
        html, body, * {
            margin: 0px;
            padding: 0px;
            font-family: verdana, tahoma, sans-serif;
            font-size: 12px;
            font-weight: normal;
        }

        body {
            background: #aaa;
            margin: 10px;
        }

        h1 {
            font-weight: bold;
            font-size: 14px;
            text-decoration: overline;
            margin-bottom: 10px;
        }

        p {
            margin-bottom: 10px;
        }

        form {
            width: 378px;
            border: 1px solid #000;
            background: #fff;
            padding: 10px;
            margin-bottom: 10px;
        }

        img {
            margin-bottom: 10px;
        }

        label {
            position: relative;
            width: 200px;
            display: block;
            margin: 0px;
            line-height: 30px;
            vertical-align: top;
        }

        label input {
            position: absolute;
            left: 100%;
            top: 5px;
            width: 175px;
        }

        .input {
            border: 1px solid #000;
            background: #aaa;
        }
    -->
    </style>
</head>
<body>
    <h1>Colour Viewer</h1>
    <?php echo $comment; ?>
    <div><img src="colour.php?colour=<?php echo $colour; ?>" alt="specified colour image" /></div>
    <?php
        if ($colour != $safecolour) {
            echo "<p>Nearest web safe colour: " . $safecolour . ".</p>\n";
            echo "<div><img src=\"colour.php?colour=" . $safecolour . "\" alt=\"safe colour\" /></div>\n";
        } else {
            echo "<p>Colour is 'web safe'.</p>\n";
        }
    ?>
    <form method="get">
        <label for="colour">Colour: <input type="text" class="input" id="colour" name="colour" value="#<?php echo $colour; ?>" /></label>
        <input type="submit" value="Change Colour" class="input" />
    </form>
    <p><a href="index.phps" title="view PHP source">View PHP source</a></p>
    <p><a href="colour.phps" title="view colour generator source">View colour generator source</a></p>
    <p><strong>Note:</strong> The PNG image format is only partially supported by Internet Explorer so results may not be entirely accurate when using that browser.</p>
</body>
</html>