|
@@ -0,0 +1,170 @@
|
|
|
|
|
+<?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>
|
