Valor del atributo HTML: <input type="color">

Pruébalo

<p>Elige tus colores:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Color de primer plano</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Color de fondo</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Valor

Un valor de color CSS.

Atributos adicionales

Además de los atributos globales y de los atributos de input comunes a todos los elementos <input>, la entrada color también admite los siguientes atributos:

alpha

Un atributo booleano que, si está presente, indica que el componente alfa del color puede ser manipulado por el usuario final y que no tiene que ser completamente opaco.

colorspace

Define el espacio de color del color y sugiere la interfaz de usuario deseada para el widget selector de color. Los valores enumerados posibles son:

• "limited-srgb": El color está en el espacio de color sRGB. Esto incluye los valores rgb(), hsl(), hwb() y <hex-color>. El valor de color está limitado a 8 bits por componente r, g y b. Este es el valor predeterminado.
• "display-p3": El espacio de color Display P3, por ejemplo, color(display-p3 1.84 -0.19 0.72 / 0.6)

Uso de las entradas de color

Las entradas de tipo color son sencillas, debido al número limitado de atributos que admiten.

Proporcionar un color predeterminado

Puedes actualizar el ejemplo anterior para definir un valor predeterminado: así, el campo de color aparecerá precargado con ese color, y el selector de color (si lo hay) también se abrirá con ese color preseleccionado.

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Si no especificas un valor, o si el valor no es válido o no es compatible con el navegador, el valor predeterminado será #000000, que es negro opaco.

Llevar un seguimiento de los cambios de color

Al igual que con otros tipos de <input>, hay dos eventos que puedes usar para detectar cambios en el valor de color: input y change. El evento input se dispara en el elemento <input> cada vez que cambia el color. El evento change se dispara cuando se cierra el selector de color. En ambos casos, puedes determinar el nuevo valor del elemento consultando su value.

Aquí tienes un ejemplo que vigila los cambios del valor de color a lo largo del tiempo:

colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", watchColorPicker);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Seleccionar el valor

Cuando un navegador no admite una interfaz de selector de color, su implementación de las entradas de color será un cuadro de texto que valida automáticamente el contenido para asegurarse de que el valor tenga el formato correcto. En este caso, puedes usar el método select() para seleccionar el texto que se encuentra actualmente en el campo de edición.

Si el navegador utiliza en su lugar un selector de color, select() no hace nada. Debes tener en cuenta este comportamiento para que tu código pueda responder adecuadamente en ambos casos.

colorPicker.select();

Validación

El valor de una entrada de color se considera no válido si el agente de usuario no puede convertir la entrada del usuario a la notación hexadecimal de siete caracteres en minúsculas. Cuando esto ocurre, se aplica la pseudoclase :invalid al elemento.

Ejemplo

Vamos a crear un ejemplo que hace un poco más con la entrada de color: rastrea los eventos change y input para tomar el color nuevo y aplicarlo a todos los elementos <p> del documento.

HTML

El HTML es bastante sencillo: un par de párrafos con material descriptivo y un <input> de tipo color con el ID color-picker, que usaremos para cambiar el color del texto de los párrafos.

<p>
  Un ejemplo que muestra el uso del control
  <code>&lt;input type="color"&gt;</code>.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Observa cómo cambian los colores de los párrafos cuando ajustas el selector de
  color. A medida que realizas cambios en el selector, el color del primer
  párrafo cambia como previsualización (esto usa el evento <code>input</code>).
  Cuando cierras el selector, se dispara el evento <code>change</code> y lo
  detectamos para cambiar todos los párrafos al color seleccionado.
</p>

JavaScript

Inicialización

El siguiente código inicializa la entrada de color:

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Esto obtiene una referencia al elemento <input> de color en una variable llamada colorPicker, y luego asigna a la entrada de color el valor de defaultColor. A continuación, se configura el evento input de la entrada de color para llamar a nuestra función updateFirst(), y el evento change se configura para llamar a updateAll(). Ambos se muestran a continuación.

Por último, llamamos a select() para seleccionar el contenido de texto de la entrada de color en caso de que el control esté implementado como un campo de texto (esto no tiene ningún efecto si en su lugar se ofrece una interfaz de selector de color).

Reaccionar a cambios de color

Proporcionamos dos funciones que se encargan de los cambios de color. La función updateFirst() se llama en respuesta al evento input. Esta cambia el color del primer elemento de párrafo del documento para que coincida con el nuevo valor de la entrada de color. Como los eventos input se disparan cada vez que se realiza un ajuste al valor (por ejemplo, si aumenta el brillo del color), esto sucederá repetidamente mientras se usa el selector de color.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Cuando se cierra el selector de color, lo que indica que el valor ya no cambiará más (a menos que se vuelva a abrir el selector), se envía un evento change al elemento. Manejamos ese evento con la función updateAll(), usando Event.target.value para obtener el color final seleccionado:

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Esto define el color de cada bloque <p> para que su propiedad color coincida con el valor actual de la entrada de color, al cual se hace referencia mediante event.target.

Resultado

El resultado final es el siguiente:

Resumen técnico

Especificaciones

Compatibilidad con navegadores

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Véase también

• HTMLInputElement.alpha
• HTMLInputElement.colorspace