es
/
color


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<?php
function hexToRgb($hex) {
    $hex = ltrim($hex, '#');
    if (strlen($hex) === 3) {
        $r = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
        $g = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
        $b = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1));
    } else {
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
    }
    return array('r' => $r, 'g' => $g, 'b' => $b);
}

function rgbToHex($r, $g, $b) {
    $hex = sprintf("#%02X%02X%02X", $r, $g, $b);
    return $hex;
}

function getComplementHex($hex) {
    $rgb = hexToRgb($hex);
    $compR = 255 - $rgb['r'];
    $compG = 255 - $rgb['g'];
    $compB = 255 - $rgb['b'];
    return rgbToHex($compR, $compG, $compB);
}

$original_hex = "#000000";
$complement_hex = "#FFFFFF";

if (isset($_POST['calculate'])) {
    if (!empty($_POST['hex_color']) && preg_match('/^#([0-9A-F]{3}|[0-9A-F]{6})$/i', $_POST['hex_color'])) {
        $original_hex = strtoupper($_POST['hex_color']);
        $complement_hex = getComplementHex($original_hex);
    } else if (isset($_POST['r'], $_POST['g'], $_POST['b'])) {
        $r = max(0, min(255, intval($_POST['r'])));
        $g = max(0, min(255, intval($_POST['g'])));
        $b = max(0, min(255, intval($_POST['b'])));
        $original_hex = rgbToHex($r, $g, $b);
        $complement_hex = getComplementHex($original_hex);
    }
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Komplementärfarbe berechnen</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.color-box {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
    border: 1px solid #000;
}
.input-group {
    margin-bottom: 20px;
}
.result {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>
</head>
<body>
<h1>Komplementärfarbe berechnen</h1>

<form method="post">
<div class="input-group">
<label for="hex_color">HEX Farbcode:</label>
<input type="text" id="hex_color" name="hex_color" maxlength="7" placeholder="#000000" value="<?= htmlspecialchars($original_hex) ?>" oninput="updateColor()">
</div>

<div class="input-group">
<label>RGB Schieberegler:</label>
<div>
<label for="r">Rot: <span id="red-value"><?= hexdec(substr($original_hex, 1, 2)) ?></span></label>
<input type="range" id="r" name="r" min="0" max="255" value="<?= hexdec(substr($original_hex, 1, 2)) ?>" oninput="updateFromSliders()">
</div>
<div>
<label for="g">Grün: <span id="green-value"><?= hexdec(substr($original_hex, 3, 2)) ?></span></label>
<input type="range" id="g" name="g" min="0" max="255" value="<?= hexdec(substr($original_hex, 3, 2)) ?>" oninput="updateFromSliders()">
</div>
<div>
<label for="b">Blau: <span id="blue-value"><?= hexdec(substr($original_hex, 5, 2)) ?></span></label>
<input type="range" id="b" name="b" min="0" max="255" value="<?= hexdec(substr($original_hex, 5, 2)) ?>" oninput="updateFromSliders()">
</div>
</div>

<div class="input-group">
<label for="color_picker">Farbwähler:</label>
<input type="color" id="color_picker" name="color_picker" value="<?= $original_hex ?>" oninput="updateColorPicker()">
</div>

<div class="input-group">
<button type="submit" name="calculate">Berechnen</button>
</div>
</form>

<div class="result">
<h3>Originalfarbe:</h3>
<div class="color-box" style="background-color: <?= $original_hex; ?>;"></div>
<p>HEX: <?= htmlspecialchars($original_hex); ?></p>

<h3>Komplementärfarbe:</h3>
<div class="color-box" style="background-color: <?= $complement_hex; ?>;"></div>
<p>HEX: <?= htmlspecialchars($complement_hex); ?></p>
</div>

<script>
function updateColor() {
    const hexInput = document.getElementById('hex_color').value;
    if (/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(hexInput)) {
        const r = parseInt(hexInput.substr(1, 2), 16);
        const g = parseInt(hexInput.substr(3, 2), 16);
        const b = parseInt(hexInput.substr(5, 2), 16);

        document.getElementById('r').value = r;
        document.getElementById('g').value = g;
        document.getElementById('b').value = b;
        document.getElementById('red-value').textContent = r;
        document.getElementById('green-value').textContent = g;
        document.getElementById('blue-value').textContent = b;
        document.getElementById('color_picker').value = hexInput.toLowerCase();
    }
}

function updateFromSliders() {
    const r = document.getElementById('r').value;
    const g = document.getElementById('g').value;
    const b = document.getElementById('b').value;

    let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    if (hex.length === 4) {
        hex = "#" + [hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]].join("");
    }

    document.getElementById('hex_color').value = hex.toUpperCase();
    document.getElementById('color_picker').value = hex.toLowerCase();
    document.getElementById('red-value').textContent = r;
    document.getElementById('green-value').textContent = g;
    document.getElementById('blue-value').textContent = b;
}

function updateColorPicker() {
    const color = document.getElementById('color_picker').value;
    const r = Math.round(parseInt(color.substr(1, 2), 16));
    const g = Math.round(parseInt(color.substr(3, 2), 16));
    const b = Math.round(parseInt(color.substr(5, 2), 16));

    document.getElementById('hex_color').value = color.toUpperCase();
    document.getElementById('r').value = r;
    document.getElementById('g').value = g;
    document.getElementById('b').value = b;
    document.getElementById('red-value').textContent = r;
    document.getElementById('green-value').textContent = g;
    document.getElementById('blue-value').textContent = b;
}
</script>
</body>
</html>