El Selector de Color proporciona una herramienta de cuentagotas precisa al píxel para elegir colores de cualquier elemento en una página web — texto, fondos, imágenes, gradientes o cualquier píxel visible. Obtén el valor exacto del color simultáneamente en formatos HEX, RGB y HSL, con una vista previa de píxel magnificada para una selección precisa. Los colores previamente seleccionados se guardan en una tira de historial para acceso rápido.
Extraer valores de color exactos de una página web es una tarea común — coincidir con un color de marca, hacer referencia a un diseño o verificar un tono usado en el sitio de un competidor. Los DevTools del navegador muestran colores en el panel Estilos, pero solo para elementos con propiedades CSS de color explícitas — no para imágenes, gradientes o colores heredados. El cuentagotas del Selector de Color funciona a nivel de píxel — lee el color renderizado real de cualquier píxel bajo tu cursor, independientemente de cómo llegó ese color allí. Haz clic en un cielo azul en una imagen hero, un punto medio de un gradiente o una superposición semitransparente, y obtén el valor de color compuesto exacto. El círculo de vista previa magnificado muestra una vista ampliada de los píxeles circundantes para que puedas apuntar al píxel exacto que quieres. Las salidas de los tres formatos (HEX, RGB, HSL) se muestran simultáneamente — haz clic en cualquier formato para copiar. Tus últimas selecciones se guardan en una tira de historial de colores en la parte inferior, para que puedas volver fácilmente a un color seleccionado previamente.
Una vista previa circular magnificada muestra los píxeles ampliados alrededor de tu cursor, con punto de mira para selección exacta de píxeles. Elige colores de texto, fondos, imágenes, gradientes, SVGs o cualquier píxel visible en la página.
Cada color seleccionado se muestra en los tres formatos a la vez: HEX (#7c3aed), RGB (rgb(124, 58, 237)) y HSL (hsl(262, 83%, 58%)). Sin cambiar ni convertir — todos los formatos están disponibles inmediatamente.
Haz clic en cualquier fila de formato (HEX, RGB o HSL) para copiar ese valor específico al portapapeles al instante. Una breve animación "¡Copiado!" confirma la acción. Pega directamente en tu CSS, herramienta de diseño o especificación de color.
Tus colores recientemente seleccionados se guardan en una tira de historial visual mostrando muestras de color. Haz clic en cualquier muestra para volver a seleccionar ese color y ver sus valores nuevamente. El historial persiste durante tu sesión — elige colores de múltiples páginas.
El color seleccionado se muestra como una muestra grande sobre los valores de formato, facilitando ver y verificar el color. La muestra es lo suficientemente grande para mostrar tonos sutiles que podrían verse idénticos en tamaños más pequeños.
Elige colores de cualquier píxel visible: colores CSS, gradientes CSS, imágenes (PNG, JPG, SVG), elementos canvas, fotogramas de video, superposiciones semitransparentes (eligiendo el color compuesto) e incluso iframes. Si puedes verlo, puedes elegirlo.
Selecciona el color exacto de la marca del sitio web de una empresa para asegurarte de que tu diseño o contenido use el tono correcto. Obtén el valor HEX preciso en lugar de estimarlo a ojo o buscar en las guías de marca.
Selecciona colores directamente de imágenes hero, fotos de productos o ilustraciones. Extrae un color dominante de una foto para usarlo como fondo complementario en tu diseño.
La especificación de diseño dice que el botón debería ser #7c3aed. Selecciona el color del botón implementado para verificar que coincida. Detecta diferencias sutiles de color que son invisibles al ojo desnudo.
Navega por sitios de inspiración de diseño y selecciona colores que llamen tu atención. La tira del historial construye una paleta de colores que has seleccionado durante la sesión — úsala como punto de partida para tu propio esquema de colores.
Selecciona colores en diferentes puntos a lo largo de un gradiente CSS para ver el color exacto en cada posición. Útil para replicar gradientes o entender cómo se mezclan los stops del gradiente.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Selector de Color. El cursor cambia a un cuentagotas con un círculo de vista previa magnificado.
Mueve el cursor sobre la página. La vista previa magnificada muestra una vista ampliada de los píxeles alrededor del cursor, con un punto de mira indicando el píxel objetivo exacto.
Haz clic en cualquier parte de la página para seleccionar el color en ese píxel. La muestra de color y los valores HEX, RGB y HSL se actualizan al instante.
Haz clic en la fila HEX, RGB o HSL para copiar ese valor a tu portapapeles. Aparece brevemente una confirmación "¡Copiado!".
Continúa haciendo clic para elegir más colores. Cada selección se agrega a la tira del historial. Haz clic en cualquier muestra del historial para recuperar ese color.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
