Color Picker / Farbauswahl mit Javascript, HTML und CSS

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