Color Picker: Elige cualquier color de pantalla
Selector de color con EyeDropper API. Elige cualquier color de tu pantalla, convierte entre HEX, RGB, HSL, HSB y CMYK.
¿Qué es Color Picker?
Color Picker es una herramienta gratuita basada en navegador que te permite capturar cualquier color de tu pantalla usando la EyeDropper API, o ingresar manualmente valores de color en formato HEX, RGB o HSL para ver al instante las conversiones en todos los modelos de color principales. Los diseñadores la usan cuando necesitan emparejar un color de una captura de pantalla, un sitio web o una maqueta de diseño sin abrir software de escritorio pesado. A diferencia de los selectores de color nativos del sistema operativo, esta herramienta convierte de inmediato entre HEX, RGB, HSL, HSB y CMYK en una sola interfaz, sin login, sin instalación y sin que los datos salgan de tu navegador.
Funciones principales
- Capturar colores de cualquier parte de tu pantalla — La EyeDropper API activa un muestreador de color a nivel del sistema en Chrome, Edge y otros navegadores Chromium modernos. Haz clic en cualquier píxel y el color se carga instantáneamente en la herramienta.
- Compatibilidad con EyeDropper API en navegadores modernos — La herramienta detecta la disponibilidad de la API en tiempo de ejecución. En navegadores no compatibles, aparece un mensaje claro en lugar de un botón roto.
- Conversión entre HEX, RGB, HSL, HSB, CMYK — El panel "All Formats" muestra todas las representaciones simultáneamente. Cambiar cualquier campo de entrada actualiza todos los demás en tiempo real.
- Copiar valores de color al portapapeles — Cada formato tiene un botón de copia dedicado. Una marca de verificación reemplaza el icono de copia durante dos segundos para confirmar que la copia fue exitosa.
- Historial de colores (función para supporters) — Hasta 50 colores usados recientemente se almacenan en IndexedDB y se muestran como muestras clicables. El historial persiste entre recargas de página. Requiere una suscripción de supporter de Ko-fi.
- Funciona sin conexión después de cargar — Toda la lógica de conversión se ejecuta en JavaScript. Una vez que la página ha cargado, puedes desconectarte de internet y la herramienta sigue funcionando.
Cómo usar Color Picker
Paso 1: Abrir la herramienta y elegir un método de entrada
Navega a Color Picker. La herramienta se abre con el color predeterminado #3B82F6 (un azul medio). Tienes tres formas de establecer un color:
- Haz clic en el botón Pick From Screen (icono de pipeta) para usar la EyeDropper API
- Haz clic en la pequeña entrada de muestra de color en la parte superior derecha del panel del selector para abrir la rueda de color nativa de tu navegador
- Escribe directamente en los campos de entrada HEX, R/G/B o H/S/L
Paso 2: Muestrear un color de tu pantalla (método EyeDropper)
Haz clic en Pick From Screen. La etiqueta del botón cambia a "Picking..." mientras el EyeDropper está activo. Tu cursor se convierte en una lupa con mira. Haz clic en cualquier píxel de tu pantalla, incluidos píxeles fuera de la ventana del navegador en la mayoría de los sistemas. La herramienta captura el valor hex, actualiza todos los campos de formato y muestra una notificación de éxito. El color muestreado se agrega automáticamente al panel de historial.
Paso 3: Ingresar o ajustar un valor de color manualmente
Si ya conoces el valor del color, escríbelo en cualquier campo de entrada. El campo HEX acepta valores con o sin el prefijo #. Las entradas RGB aceptan enteros de 0 a 255. HSL acepta H (0–360), S (0–100) y L (0–100). Cualquier cambio de campo recalcula y actualiza los otros dos formatos simultáneamente.
Paso 4: Ver todas las conversiones de formato de color
Desplázate a la tarjeta All Formats debajo del selector principal. Este panel muestra el conjunto completo de conversiones: HEX, RGB, HSL, HSB y CMYK. Cada fila tiene su propio botón de copia. Haz clic en el icono Copiar junto a cualquier formato para escribir ese valor en el portapapeles.
Paso 5: Reutilizar colores del historial
Los colores seleccionados anteriormente aparecen como muestras de color en el panel Recent Colors. Haz clic en cualquier muestra para recargar ese color en el selector y los campos de formato. Usa el botón Clear (icono de papelera) para borrar el historial si es necesario.
Ejemplos prácticos
Emparejar un color de marca de un sitio web
Estás construyendo una página de destino y necesitas emparejar el morado exacto usado en el logo de un cliente que se muestra en una pestaña del navegador. Haz clic en Pick From Screen, pasa el cursor sobre el logo y haz clic. La herramienta captura el valor hex, digamos #6B21A8, y muestra inmediatamente rgb(107, 33, 168) y hsl(276, 61%, 40%). Copia el formato que usa tu archivo CSS.
Convertir un color de Figma a CSS
Tu especificación de diseño de Figma lista un color como rgb(234, 179, 8). Escribe 234 en el campo R, 179 en G y 8 en B. El campo HEX se actualiza a #EAB308 y HSL muestra hsl(45, 93%, 47%). Copia el valor HEX para usarlo en una clase de Tailwind como bg-[#EAB308] o el HSL para una propiedad personalizada de CSS.
Verificar cómo se ve un código hex
En una revisión de código aparece background: #1E3A5F y quieres visualizarlo. Pega el valor en el campo HEX. La gran muestra de vista previa de color se llena con el color (un azul marino oscuro) y el color del texto de la etiqueta se ajusta automáticamente entre negro y blanco para legibilidad. Puedes compararlo con otros colores usando las muestras del historial.
Consejos y mejores prácticas
Usa el panel de historial como paleta temporal (función para supporters). La herramienta almacena hasta 50 colores en IndexedDB para supporters premium. Construye una pequeña paleta muestreando o ingresando colores uno a la vez; cada uno se convierte en una muestra clicable a la que puedes volver sin anotar valores.
El EyeDropper funciona en cualquier píxel, incluidos fotogramas de video. Pausa un video en el fotograma con tu color objetivo y luego usa Pick From Screen. La API muestrea el píxel renderizado, no la fuente comprimida.
Escribe valores HSL para control preciso. Si quieres un tono específico con menor saturación, escribe directamente en los campos H y S. HSL es más intuitivo para ajustes como "mismo color, 20% más claro" (aumentar L en 20).
Las URL compartibles codifican el color actual. La herramienta usa un hook de estado compartible: tu valor HEX actual está codificado en la URL de la página. Copia la URL del navegador para enviar un color específico a un colega.
Borra el historial antes de compartir un dispositivo. Si seleccionas colores que incluyen activos de diseño sensibles, usa el botón Clear en el panel de historial para eliminarlos de IndexedDB antes de entregar el dispositivo.
Problemas comunes y solución de problemas
Aparece el mensaje "EyeDropper no compatible". La EyeDropper API requiere un navegador basado en Chromium (Chrome 95+, Edge 95+). Firefox y Safari no la admiten a principios de 2026. Usa la muestra de entrada de color nativa o escribe el valor manualmente en navegadores no compatibles.
El campo HEX no muestra actualización después de escribir. El campo requiere un código hex válido de 3, 4, 6 u 8 caracteres, con o sin #. Los valores parciales como #3B se aceptan en la entrada, pero la conversión solo se activa cuando hay un código válido completo.
Valores RGB fuera de rango. Cada campo R, G, B está limitado a 0–255. Escribir un valor superior a 255 se corrige a 255 al perder el foco. El fallback de parseInt hace que los caracteres no numéricos se resuelvan a 0.
El formato copiado muestra el valor incorrecto. Cada botón de copia copia su cadena de formato específica. Asegúrate de hacer clic en el icono de copia en la fila del panel All Formats correspondiente al formato que necesitas, no en el de la fila de entrada HEX principal.
El historial no persiste después de recargar. El historial es una función exclusiva para supporters que usa IndexedDB. Si no eres supporter premium, el panel de historial no registrará entradas. Si IndexedDB está deshabilitado o no disponible en el modo privado/incógnito, el panel de historial aparecerá vacío en cada visita. La herramienta maneja esto de forma silenciosa: las funciones de historial simplemente no están disponibles en ese contexto.
Privacidad y seguridad
Color Picker procesa todo localmente en tu navegador usando JavaScript. Ningún valor de color, contenido de pantalla ni datos de uso se transmiten a ningún servidor. La EyeDropper API captura solo el único píxel en el que haces clic; no se produce ninguna captura de pantalla ni grabación de pantalla. El historial de colores se almacena en el IndexedDB de tu navegador, no en ninguna base de datos externa. La herramienta funciona completamente sin conexión una vez que la página ha cargado, y es segura para usar con activos de diseño confidenciales.
Preguntas frecuentes
¿Es gratuito Color Picker?
Sí, Color Picker es completamente gratuito sin necesidad de registro. Las funciones principales, el muestreo con EyeDropper, la conversión de múltiples formatos y la copia al portapapeles, están disponibles sin una cuenta de supporter. Las funciones de supporter premium como el historial de colores, los presets y las notas de herramienta están disponibles con una suscripción de supporter de Ko-fi.
¿Funciona Color Picker sin conexión?
Sí. Una vez que la página ha cargado, Color Picker funciona sin conexión a internet. Toda la lógica de conversión de color está implementada en JavaScript que se ejecuta en tu navegador. La EyeDropper API también es una función nativa del navegador que no requiere acceso a la red.
¿Están seguros mis datos con Color Picker?
Sí. Ningún dato de color ni contenido de pantalla sale de tu navegador. La EyeDropper API captura un valor de píxel en el momento en que haces clic; no toma capturas de pantalla ni graba tu pantalla. El historial de colores se almacena solo en el IndexedDB de tu navegador. Glyph Widgets no tiene visibilidad del lado del servidor sobre qué colores seleccionas.
¿Qué navegadores admiten el botón EyeDropper?
La EyeDropper API funciona en Chrome 95 y posterior, Edge 95 y posterior, y otros navegadores basados en Chromium. No es compatible con Firefox ni Safari. La herramienta detecta la compatibilidad en tiempo de ejecución y muestra un mensaje claro en lugar de un botón roto en navegadores no compatibles.
¿Qué formatos de color produce la herramienta?
La herramienta convierte y muestra HEX (p. ej., #3B82F6), RGB (p. ej., rgb(59, 130, 246)), HSL (p. ej., hsl(217, 91%, 60%)), HSB (también llamado HSV) y CMYK. El panel All Formats muestra los cinco simultáneamente y proporciona botones de copia individuales para cada uno.
¿Puedo ingresar un valor de color sin usar el cuentagotas?
Sí. Puedes escribir directamente en los campos de entrada HEX, R/G/B o H/S/L. También puedes hacer clic en la pequeña entrada de color nativa (el cuadrado de color junto al botón Pick From Screen) para abrir la rueda de color integrada de tu navegador. Los tres métodos de entrada actualizan el mismo estado de color interno.
¿Cuántos colores almacena el panel de historial?
El panel de historial almacena hasta 50 colores (función para supporters). Cuando se alcanza el límite, se elimina la entrada más antigua. El historial se guarda en IndexedDB y persiste entre sesiones del navegador. Esta función requiere una suscripción de supporter de Ko-fi.
¿Puedo compartir un color específico con alguien?
Sí. El color actual está codificado en la URL de la página como estado compartible. Copia la URL de la barra de direcciones de tu navegador después de seleccionar un color. Cuando tu colega abre el enlace, la herramienta se carga con ese color preseleccionado y muestra una notificación "Loaded from share". También puedes usar los botones Share en la parte inferior de la página para publicar directamente en Twitter, LinkedIn o Reddit.
¿Funciona la herramienta con valores de alfa/transparencia?
La herramienta actual trabaja principalmente con colores completamente opacos. El campo de entrada HEX acepta códigos hex de 3, 4, 6 y 8 dígitos (los códigos de 4 y 8 dígitos incluyen un canal alfa), pero las entradas RGB y HSL no exponen un control deslizante de alfa separado. Si necesitas valores RGBA o HSLA, los valores RGB y HSL mostrados se pueden extender manualmente con tu valor alfa deseado.
¿Qué ocurre si escribo un código hex inválido?
El campo de entrada HEX acepta valores parciales o inválidos mientras escribes. La conversión de color solo se actualiza cuando hay un código hex válido (3, 4, 6 u 8 caracteres, con o sin #). Los valores parciales no causan errores: la pantalla simplemente retiene el último color válido.
Herramientas relacionadas
- Contrast Checker — Comprueba si los colores de primer plano y fondo que elegiste cumplen con los estándares de accesibilidad WCAG 2.1 después de seleccionarlos con Color Picker.
- Color Converter — Convierte entre formatos de color adicionales que no se muestran en la interfaz principal del selector.
- Próximamente: Palette Generator — Genera una paleta de colores completa a partir del valor hex que seleccionaste.
- Próximamente: Gradient Generator — Usa los colores que muestreaste para crear gradientes CSS con un editor visual.
Prueba Color Picker ahora: Glyph Widgets Color Picker