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;
}