Einen Colorpicker kannst du dir ganz einfach und schnell selbst erstellen, gehe dazu wie folgt vor:
Erstelle die folgenden 3 Dateien und speichere sie im selben Ordner.
- index.html
- script.js
- style.css
Inhalt der Datei „index.html“
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Picker</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div id="colorPicker"> <input type="color" id="colorInput"> </div> </body> </html>
Inhalt der Datei „script.js“
const colorInput = document.getElementById('colorInput'); const hexInput = document.getElementById('hexInput'); const colorDisplay = document.getElementById('colorDisplay'); colorInput.addEventListener('input', () => { const hexColor = colorInput.value; hexInput.value = hexColor; colorDisplay.style.backgroundColor = hexColor; }); hexInput.addEventListener('input', () => { const hexColor = hexInput.value; if (isValidHexColor(hexColor)) { colorInput.value = hexColor; colorDisplay.style.backgroundColor = hexColor; } }); function isValidHexColor(hexColor) { const regex = /^#(?:[0-9a-fA-F]{3}){1,2}$/; return regex.test(hexColor); }
Inhalt der Datei „style.css“
#colorPicker { display: flex; align-items: center; justify-content: space-between; width: 300px; } #colorInput { cursor: pointer; } #hexInput { width: 100px; } #colorDisplay { width: 50px; height: 50px; border: 1px solid #000; }