Color picker desde tu pantalla
Captura el color exacto de cualquier píxel de tu pantalla — una imagen, un vídeo, un PDF, otra aplicación — con el selector nativo del navegador: sin subir archivos, sin instalar nada. HEX, RGB, HSL y HSV al instante, contraste WCAG para accesibilidad y paleta exportable a CSS, Tailwind o JSON.
Contraste WCAG
≥4.5 texto normal AA · ≥3 texto grande AA · ≥7 AAA
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
El 99% de los «color pickers online» te piden subir una captura: tú envías la imagen a un servidor para que te diga un color. Este funciona al revés y mejor: usa la API EyeDropper nativa del navegador para leer el píxel exacto que elijas — de un vídeo, un PDF, Photoshop, un juego, lo que sea — sin que nada salga de tu equipo. Cada color capturado entra en una paleta de sesión con sus formatos HEX, RGB, HSL y HSV simultáneos, contraste WCAG frente a blanco y negro con umbrales AA/AAA para saber si sirve como texto o fondo, y exportación a variables CSS, clases Tailwind o JSON. Las conversiones de color están implementadas a mano y verificadas con un banco de 1639 pruebas: round-trip de todos los canales RGB, HSL↔RGB con error de cuantización controlado y los vectores clásicos (rojo = hsl(0,100%,50%), contraste blanco/negro = 21:1).
Características
- ✓Selector nativo del navegador: captura cualquier píxel de la pantalla, incluso de otras apps
- ✓HEX, RGB, HSL y HSV simultáneos con copia con un clic
- ✓Contraste WCAG con blanco y negro: AA y AAA a la vista para accesibilidad
- ✓Paleta de sesión exportable a variables CSS, clases Tailwind o JSON
- ✓Conversiones de color verificadas con banco de 1639 pruebas contra valores de referencia
¿Cómo capturar un color de la pantalla?
- 1
Pulsa «Elegir color de la pantalla»
El navegador activa su lupa nativa: no se instala nada y no se sube nada.
- 2
Elige el píxel exacto
Puedes capturar de cualquier aplicación: el vídeo de YouTube, un PDF, un editor de diseño o el escritorio.
- 3
Copia el formato que necesites
HEX, RGB, HSL y HSV aparecen a la vez, cada uno con su botón de copiar.
- 4
Guarda en la paleta
Acumula colores y expórtalos como variables CSS, clases Tailwind o JSON con un clic.
Preguntas frecuentes
¿Por qué funciona en Chrome y Edge pero no en Firefox?
La API EyeDropper es una especificación reciente que Chromium y Safari 18+ han implementado y Firefox aún no. Es la API que permite leer píxeles de la pantalla sin permisos de captura completos. En Firefox la herramienta sigue siendo útil con el campo HEX, y para la pantalla completa tendrías que usar la captura de Firefox + el extractor de paleta de esta suite.
¿Se envía mi pantalla a algún servidor?
No. La API EyeDropper devuelve solo el valor del píxel elegido, localmente. No hay capturas de pantalla, no hay subidas y no hay ninguna petición de red: puedes verlo en la pestaña de red de las herramientas de desarrollador, no aparece tráfico alguno.
¿Para qué sirve el contraste WCAG que muestra?
Para accesibilidad: te dice cuánto contrasta el color con blanco y con negro (ratio 1-21). Con ≥4.5:1 puedes poner texto normal encima cumpliendo AA, con ≥3:1 sirve para texto grande y con ≥7:1 cumples AAA. Es la comprobación rápida que evita elegir un amarillo para texto blanco.
Herramientas relacionadas
Incrusta Color Picker de Pantalla en tu web
Integra Color Picker de Pantalla en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/color-picker-screen"
width="100%"
height="700"
frameborder="0"
title="Color Picker de Pantalla — miguelacm.es"
></iframe>