> Faqs > ¿Como crear un selector de color en HTML?

¿Como crear un selector de color en HTML?

¿Como puedo crear un selector de color como el de Photoshop en el programa Game Maker Studio o en el lenguaje html y me envian el codigo ?

Respuestas

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.

Santiago
571 18 45 21

Si te valen soluciones basadas en Javascript y ya que mencionas Photoshop, los mismos de Adobe han hecho una rueda de color en un web component que puedes usar para implementar el selector de color.

Puedes verlo en marcha y encontrar la documentación en:

https://opensource.adobe.com/spectrum-web-components/components/color-wheel/
Camila
680 29 46 6

Si vale Javascript (que ya hemos visto que no es realmente necesario en absoluto con el input type="color") hay decenas de plugins. Solo es hacer una búsqueda en Google por "color picker javascript" y encontrarás muchas alternativas.

Miguel Angel
3280 145 214 17