En Game Maker Studio no sé qué necesitarás para poder hacer un selector de color pero en HTML tienes muchas posibilidades. De hecho hay un tipo de campo input type="color"
que te lo implementa directamente.
Funciona en todos los navegadores excepto el desaparecido Internet Explorer. Te paso un ejemplo para que lo implementes.
<!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>
<style>
body {
margin: 1rem;
text-align: center;
background-color: #f0f0f0;
}
#colorBox {
display: inline-block;
width: 100px;
height: 100px;
margin-top: 20px;
border: 2px solid #000;
}
</style>
</head>
<body>
<input type="color" id="colorPicker">
<br>
<span id="colorBox"></span>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorPicker = document.getElementById('colorPicker');
const colorBox = document.getElementById('colorBox');
colorPicker.addEventListener('input', (event) => {
const selectedColor = event.target.value;
colorBox.style.backgroundColor = selectedColor;
});
});
</script>
</body>
</html>
En este ejemplo, encuentras un elemento de entrada input de tipo "color
" que permite al usuario seleccionar un color. También verás un div
llamado colorBox
que mostrará el color seleccionado. El código JavaScript escucha el evento input
en el elemento de entrada del color y una vez recuperado el color seleccionado actualiza el color del fondo del elemento colorBox
.
Copia y pega el ejemplo en un archivo html y verás como se cambia el color del div con el color seleccionado por el usuario.