Selector de color de pantalla
Pulsa Tomar color de la pantalla y haz clic en cualquier píxel de tu monitor, en esta pestaña, en otra ventana o en otra app. Obtienes el color en HEX, RGB, HSL, HSV y CMYK, su nombre CSS más cercano y su contraste, y cada color tomado se guarda en un historial que puedes copiar o exportar.
Última actualización:
Haz clic en el botón y luego en cualquier píxel de tu pantalla: otras pestañas, ventanas, apps o esta página. Pulsa Esc para cancelar. Atajo: P.
Colores tomados (0)
Todavía no has tomado ningún color. Cada color que tomes se guarda aquí (solo en este navegador) para que puedas compararlos y copiarlos más tarde.
Tomar el color de una captura o imagen
Funciona en todos los navegadores. Haz una captura de pantalla (PrtScn, Win+Shift+S o Cmd+Shift+4) y pégala aquí con Ctrl/Cmd+V, arrástrala o abre el archivo. Haz clic en cualquier píxel para tomar su color.
Cómo usar Selector de color de pantalla
- Pulsa Tomar color de la pantalla (o la tecla P). El cursor se convierte en un cuentagotas con lupa.
- Haz clic en cualquier píxel de tu pantalla: un sitio web, una foto, otra app. Pulsa Esc para cancelar.
- Copia el código que necesites: HEX, RGB, HSL, HSV y CMYK tienen cada uno un botón Copiar. Revisa los recuadros de contraste para ver si el color funciona para texto.
- Sigue tomando colores. Cada color se añade a Colores tomados, donde puedes volver a seleccionarlo, copiarlo o eliminarlo.
- Exporta tu paleta como lista HEX, variables CSS, SCSS, JSON o una imagen PNG con muestras.
- ¿Usas Firefox o Safari? Haz una captura de pantalla, pégala en el área de imagen y haz clic en el píxel que quieras.
Cómo funciona el cuentagotas de pantalla
Los navegadores Chromium modernos incluyen la API EyeDropper. Cuando pulsas el botón, el propio navegador muestra una lupa sobre toda tu pantalla. Cuando haces clic, devuelve solo el color de ese píxel como valor sRGB, por ejemplo #2F6B4F. La página web no puede mover la lupa, activarla sin tu clic ni leer nada más de tu pantalla. Por eso el selector puede tomar colores de otras apps de forma segura y por eso necesita que pulses el botón cada vez.
Si tu navegador no tiene cuentagotas, usa la alternativa de la captura de pantalla: la captura se dibuja en un lienzo dentro de la página y la herramienta lee el píxel en el que haces clic con la API Canvas, todo en tu dispositivo.
Formatos de código de color de un vistazo
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX | #1E90FF | CSS, HTML, herramientas de diseño (Figma, Canva), la mayoría de los campos de color |
| RGB | rgb(30, 144, 255) | CSS, editores de imágenes, programación; cada canal de 0 a 255 |
| HSL | hsl(210, 100%, 56%) | CSS; facilita crear tintes y sombras cambiando la luminosidad |
| HSV / HSB | hsv(210, 88%, 100%) | Photoshop, GIMP y muchos cuadros de diálogo de selección de color |
| CMYK | cmyk(88%, 44%, 0%, 0%) | Impresión; una conversión sencilla, no un perfil de impresión calibrado |
| Decimal | 2003199 | Algunas apps y API guardan un color como un único entero (R×65536 + G×256 + B) |
Consejos para tomar el color exacto
- Toma colores de zonas uniformes. Los bordes del texto y de los iconos están suavizados, así que sus píxeles mezclan el primer plano con el fondo.
- Usa el zoom al 100%. El zoom del navegador, el escalado de pantalla y el redimensionado de imágenes mezclan píxeles vecinos. Al 100%, el píxel que ves es el píxel del archivo.
- Desactiva el modo nocturno. La luz nocturna, True Tone o los filtros HDR pueden cambiar lo que lee el cuentagotas en algunos sistemas.
- ¿Necesitas los colores de una foto entera? Ábrela en la alternativa de imagen, toma varios puntos y exporta la paleta como variables CSS.
Preguntas frecuentes
¿Cómo tomo un color de mi pantalla?
Haz clic en Tomar color de la pantalla, mueve el cuentagotas sobre el píxel que quieras y haz clic. El código de color aparece al instante. El selector puede tomar cualquier píxel visible de tu pantalla, incluidas otras ventanas y apps, no solo esta página web.
¿Qué navegadores admiten el cuentagotas de pantalla?
Tomar colores fuera de la página usa la API EyeDropper, disponible en Chrome, Edge, Opera, Brave y otros navegadores Chromium de escritorio (versión 95 y posteriores). Firefox y Safari todavía no la admiten, así que en esos navegadores pega o arrastra una captura de pantalla al área de imagen y haz clic en un píxel allí.
¿Es seguro? ¿El sitio web ve mi pantalla?
La página nunca ve tu pantalla. El navegador solo devuelve el color del píxel en el que hiciste clic, y solo después de que tú mismo pulsaras el botón. No se toma ni se sube ninguna captura, y las capturas que pegas en la alternativa se quedan en tu navegador.
¿Por qué el color tomado es ligeramente distinto del original?
El cuentagotas lee el píxel tal como se muestra, después del escalado, el suavizado, los perfiles de color y los modos de luz nocturna o HDR. Amplía la zona y toma el color del centro de una región de color uniforme para obtener el valor exacto. La compresión JPEG de las imágenes también puede alterar los colores en unas pocas unidades.
¿Qué diferencia hay entre HEX, RGB y HSL?
Describen el mismo color de distintas formas. HEX (#1E90FF) escribe los valores de rojo, verde y azul de 0 a 255 en hexadecimal. RGB los escribe como números decimales. HSL describe el tono (de 0 a 360 grados), la saturación y la luminosidad en porcentaje, lo que facilita crear variantes más claras o más oscuras.
¿Se guarda mi historial de colores?
Sí, se guardan hasta 60 colores tomados en el almacenamiento local de tu navegador en este dispositivo, así que seguirán ahí la próxima vez. No se envía nada a ningún servidor. Usa Borrar para eliminarlos, o Copiar todo y Descargar paleta PNG para guardar una copia.
¿Qué significan los números de contraste?
Son relaciones de contraste WCAG 2 entre tu color y el blanco o el negro. Una relación de al menos 4.5:1 cumple el nivel AA para texto normal, 3:1 cumple AA para texto grande (unos 24 px, o 18.7 px en negrita) y 7:1 cumple el nivel AAA, más estricto.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.