CSS
Trabajo de front-end
Saca valores exactos de un sitio en vivo para CSS, SCSS o una configuración de Tailwind, sin abrir DevTools.
Selector de color gratis para Chrome
Elige un color de cualquier página. Obtén #E8553D
Selector de color sencillo es un cuentagotas gratuito para Chrome. Presiona su botón o Alt+P, apunta a cualquier píxel con la lupa y haz clic: el código HEX, RGB o HSL ya está en el portapapeles. Tus últimos 50 colores te esperan en el popup.
453 usuarios en Chrome Web Store
También funciona en Edge, Brave, Opera y otros navegadores basados en Chromium.
De un vistazo
- Qué hace
- Un selector de color tipo cuentagotas: apunta a cualquier píxel de una página web con una lupa, haz clic y se copia su código HEX, RGB o HSL.
- Para quién
- Desarrolladores web y diseñadores que igualan colores de sitios en vivo, maquetas y capturas de pantalla abiertas en el navegador, y cualquiera que necesite un código de color.
- Precio
- Gratis. Sin cuenta ni versión de pago.
- Datos
- Tu historial y el formato predeterminado se quedan en el almacenamiento local de la extensión, en tu dispositivo. Sin analítica ni solicitudes de red.
- Funciona en
- Chrome y otros navegadores Chromium que instalan extensiones desde Chrome Web Store, en computadora. No en páginas del navegador como la pestaña nueva, la configuración o Chrome Web Store.
- Límites
- Elige de la parte visible de la pestaña, con una captura tomada al empezar. Sin CMYK, Pantone ni verificación de contraste, y sin elegir fuera del navegador.
- Versión
- 2.7.0, actualizada 23 de octubre de 2026
Tres pasos, un clic
- 1
Inicia el selector
Haz clic en el ícono de la barra de herramientas y presiona «Elegir un color», o presiona Alt+P en cualquier página.
- 2
Apunta con la lupa
Una lupa cuadrada amplía la zona alrededor del cursor y enmarca el píxel exacto. Una etiqueta debajo muestra HEX, RGB y HSL en vivo.
- 3
Haz clic y pega
El código se copia en tu formato predeterminado y un aviso breve lo confirma. Pégalo en CSS, Figma o un mensaje.
Quién lo usa
HEX
Diseño y revisión de marca
Toma una paleta de una interfaz, una maqueta o una referencia, y verifica que una página use el color de marca correcto.
HSL
Ajuste de colores
Toma HSL para ajustar a mano la luminosidad y la saturación, o RGB para código que pide números.
Qué hace
píxel, enmarcado
La lupa amplía 11 × 11 píxeles alrededor del cursor y una retícula enmarca el que vas a tomar. Acierta un borde de un píxel o un solo escalón de un degradado.
formatos
HEX como #2A6FDB, RGB como rgb(42, 111, 219), HSL como hsl(217, 71%, 51%). Elige el formato predeterminado una vez en el popup.
colores en el historial
Cada color elegido pasa al principio de una cuadrícula con tus últimos 50 colores, sin duplicados. Haz clic en una muestra para ver y copiar los tres códigos.
Atajo Alt+P
Empieza a elegir sin abrir el popup. La tecla del popup abre la configuración de atajos de Chrome si quieres otra.
solicitudes de red
Todo se ejecuta en tu navegador. Sin cuenta, sin analítica, sin telemetría.
Claro y oscuro
El popup y la lupa siguen el tema de tu sistema, en grises neutros que no tiñen los colores que evalúas.
Cómo obtener el código de color de cualquier cosa en una web
El cuentagotas propio de Chrome está dentro de DevTools: abre el panel Estilos, busca una propiedad de color, haz clic en su muestra y después en el cuentagotas. Funciona, pero está escondido, y el valor elegido reemplaza esa propiedad en el CSS de la página en lugar de quedar en tu portapapeles.
Selector de color sencillo pone un cuentagotas a un clic o a un atajo de distancia. Al empezar, toma una captura de la parte visible de la pestaña y abre encima una lupa cuadrada, así ves el píxel exacto, no un promedio. Un clic copia el código, y el popup lo guarda con tus últimos 50 colores en los tres formatos.
Desplázate a la parte de la página que necesitas antes de empezar: la lupa lee de esa captura. Las páginas del navegador, como la pestaña nueva, la configuración y Chrome Web Store, están cerradas a todas las extensiones.
Privado por diseño
Sin solicitudes de red
La extensión nunca se comunica con un servidor. Sin analítica, sin telemetría.
Se queda en tu dispositivo
Tu historial y el formato predeterminado viven en el almacenamiento local de la extensión.
Cuatro permisos
La pestaña activa, solo cuando inicias una selección, para tomar la captura; scripting para mostrar la lupa; almacenamiento para el historial y el formato; escritura en el portapapeles para copiar el código.
Cuentagotas de DevTools vs Selector de color sencillo
| Cuentagotas de DevTools vs Selector de color sencillo | Cuentagotas de DevTools | Selector de color sencillo |
|---|---|---|
| Cómo empezar | Abrir DevTools, buscar un color en Estilos, hacer clic en su muestra y luego en el cuentagotas | Botón de la barra de herramientas o Alt+P |
| Dónde va el resultado | A la propiedad CSS que abriste; lo copias tú | Al portapapeles, con un clic |
| Formatos de color | HEX, RGB, HSL y más | HEX, RGB y HSL |
| Colores elegidos antes | No se guardan | Tus últimos 50, listos para copiar de nuevo |
| Precio | Integrado en Chrome | Gratis |
Preguntas
¿Cómo obtengo el código de color de una página web?
Instala Selector de color sencillo, presiona Alt+P en la página, apunta la lupa al color y haz clic. El código HEX, o RGB o HSL si lo prefieres, se copia al portapapeles.
¿Cómo elijo con el cuentagotas un color de una imagen en una web?
Igual: inicia el selector y haz clic en el píxel que quieras de la imagen. La lupa amplía, así que puedes tomar un píxel exacto.
¿Puedo copiar HSL o RGB en lugar de HEX?
Sí. Elige el formato predeterminado en el popup: HEX, RGB o HSL. El popup también muestra los tres de cualquier color de tu historial, cada uno con su botón de copiar.
¿Dónde encuentro los colores que elegí antes?
Abre el popup: tus últimos 50 colores están ahí como muestras, el más reciente primero. Haz clic en uno para ver y copiar sus códigos, o borra el historial.
¿Cómo cambio el atajo Alt+P?
Haz clic en la tecla del atajo en el popup. Abre la página de atajos de teclado de Chrome, donde puedes asignar otra tecla.
¿Por qué no funciona en algunas páginas?
Chrome cierra a todas las extensiones sus propias páginas, como la pestaña nueva, la configuración y Chrome Web Store. Además, el selector solo lee la parte visible de la pestaña, así que desplázate antes hasta el color.
¿Puede elegir colores fuera del navegador?
No. Solo elige de la pestaña actual del navegador. Tampoco convierte a CMYK o Pantone ni verifica el contraste.
¿Es gratis? ¿Recopila datos?
Es gratis y no hace solicitudes de red. Tu historial y el formato predeterminado se quedan en tu dispositivo.
Más extensiones gratuitas de PYROCTAL
Captura de Página CompletaCaptura de página completa con un clic o atajo: captura con desplazamiento de una página o app web entera, guardada como PNG.
FontLensDescubre la fuente de cualquier texto con un clic derecho. Copia CSS, Tailwind o SCSS, edita en vivo y verifica contraste.
YouTube Auto QualityConfigura automáticamente la calidad de video preferida en YouTube. Ahorra datos o disfruta HD/4K cada vez.
Guardar imagen como JPEGGuarda cualquier imagen como JPG con un clic derecho: WebP, PNG, AVIF, GIF, SVG y más se convierten a una foto normal.