Color Picker: selector de color

Cómo usar el selector de color

Arrastra el círculo por el cuadrado grande para elegir el tono. En horizontal, la izquierda es más gris y la derecha más viva. En vertical, arriba es más claro y abajo más oscuro. La barra de colores de abajo cambia el tono, que es el color base: rojo, amarillo, verde, azul y otra vez rojo. En cada movimiento se actualizan los cinco códigos de al lado.

Si ya tienes el código, escríbelo en el campo HEX, con 3, 4, 6 u 8 dígitos y con o sin #. El círculo salta a la posición de ese color. Para copiar, haz clic en el icono junto al formato que necesites. Con el teclado, las flechas mueven el círculo de 1 en 1 y, con Shift, de 10 en 10.

Tomar el color de una imagen

Haz clic en Tomar de una imagen, elige un archivo (PNG, JPEG, WebP, GIF o lo que abra tu navegador) y haz clic o arrastra sobre la imagen. El píxel bajo el cursor pasa a ser el color actual, con todos sus códigos. Sirve para averiguar el HEX del azul de un logotipo, de una captura de Figma o de una foto de referencia.

Dos detalles cambian el resultado. En JPEG, la compresión mezcla píxeles vecinos, así que el color puede salir uno o dos puntos distinto del original, y conviene usar PNG cuando lo tengas. Y en una foto cada píxel es un punto aislado: el color de una pared varía de un píxel a otro por la luz y el ruido. Haz clic en varios puntos de la misma zona y quédate con el valor del medio. Las imágenes de más de 1.600 píxeles en el lado largo se reducen antes de mostrarse, lo que también suaviza el detalle fino.

Cuentagotas para el color de cualquier punto de la pantalla

El botón Cuentagotas usa la API EyeDropper: la página abre la lupa del navegador y recibe el HEX del píxel en el que hagas clic, incluso fuera de la pestaña, en otro sitio, en una app de diseño o en el escritorio. Según MDN (datos comprobados el 5 de noviembre de 2026), funciona en Chrome 95, Edge 95 y Opera 81 en escritorio, y no existe en Firefox, Safari ni en los navegadores móviles. Esc cancela.

Donde la API no existe, el botón ni aparece, y quedan las otras dos formas: el cuadrado de color y la imagen. Un atajo que funciona en cualquier navegador es hacer una captura de lo que quieres medir y abrir el archivo en Tomar de una imagen.

Los cinco formatos de color

Todos describen el mismo color. Lo que cambia es lo que cada uno facilita ajustar.

HSL y HSV parecen hermanos, pero se comportan distinto. En HSV, un brillo del 100% es el color más vivo y 0% es negro. En HSL, una luminosidad del 50% es el color puro, 100% es blanco y 0% es negro. Por eso el mismo azul aparece como hsl(229 100% 66%) y como hsv(229, 68%, 100%).

El CMYK de aquí es la conversión matemática directa desde el RGB. Una imprenta de verdad trabaja con un perfil de color (como FOGRA39 o SWOP), y el resultado cambia según el papel y la tinta. Usa el valor como punto de partida y confírmalo con la imprenta.

Usar un selector de color en tu código

Si necesitas un selector dentro de una página tuya, HTML ya trae uno. El input type=color abre el selector del sistema y devuelve el valor en HEX en minúsculas, con el formato #rrggbb y sin transparencia. El evento input se dispara en cada movimiento, y change solo cuando la persona cierra el selector.

<input type="color" id="cor" value="#5271ff" />

<script>
  const input = document.getElementById("cor");
  input.addEventListener("input", () => {
    document.body.style.backgroundColor = input.value; // "#5271ff"
  });
</script>

Para tomar un color de fuera de la página, EyeDropper cabe en pocas líneas. open() tiene que llamarse desde un clic y rechaza la promesa cuando la persona pulsa Esc, por eso el try/catch:

if ("EyeDropper" in window) {
  button.addEventListener("click", async () => {
    try {
      const { sRGBHex } = await new EyeDropper().open();
      console.log(sRGBHex); // "#5271ff"
    } catch {
      // a pessoa apertou Esc
    }
  });
}

La sintaxis de todos estos formatos en CSS está en la especificación CSS Color 4 del W3C.

Para convertir e ir más allá

¿Necesitas el valor en otra sintaxis, con transparencia o con la cuenta explicada? Usa el conversor de HEX a RGB o el conversor de RGB a HEX. Los dos se abren con el color que elegiste aquí.