01
Entiende lo que ves.
Descubre el CSS, las dimensiones y las fuentes de cada elemento.
1 mes de Pro gratisInspecciona diseño web.
La extensión de Chrome para diseño y desarrollo
Inspecciona diseño web.
Desde Chrome.
Revisa CSS, colores, fuentes y espaciado. Comprueba diseños, analiza páginas y toma capturas con una sola extensión de Chrome.
Después, $0.99/mes. Cancela antes de que termine la prueba.
Tu próxima idea, de cercaProbar demo
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
HECHO PARA LOS DETALLES
El buen diseño está en los detalles.
Cuatro herramientas siempre gratis. Prueba todas las herramientas Pro durante un mes.
02
Encuentra tus colores.
Extrae paletas, identifica fuentes y comprueba el contraste.
03
Cada píxel en su sitio.
Mide espacios, comprueba la cuadrícula y captura el resultado.
01
Inspector Hoverify
GratisPase el cursor sobre cualquier elemento para ver en tiempo real Box Model, 6 propiedades de Typography (font-family, size, weight, line-height, letter-spacing, color), Layout, Background y accesibilidad.
02
Extracción de paleta de colores
ProRecopila automáticamente todos los colores de la página web y los clasifica por categorías mediante algoritmo de clustering.
03
Inspector de fuentes
ProConsulta al instante 6 propiedades de elementos de texto: font-family, size, weight, line-height, letter-spacing y color.
04
Verificación de contraste WCAG
ProCalcula en tiempo real la relación de contraste usando la fórmula WCAG 2.1. Determina el nivel AA (4.5:1) y AAA (7:1).
05
Medición de espaciado
ProMuestra la distancia horizontal, vertical y diagonal entre dos elementos en píxeles (px) con líneas punteadas rojas estilo Figma.
06
Copiar CSS
ProCopia el CSS computado de un elemento al portapapeles con un solo clic. Selección de rango disponible.
07
Superposición de cuadrícula
GratisSuperpone un CSS Grid de 12 columnas para verificar visualmente la alineación del diseño.
08
Style Strip
ProElimina progresivamente el CSS en 4 niveles para analizar la estructura HTML.
09
QA de página
ProRevisa desbordamientos, descripciones, nombres y títulos. Localiza elementos y exporta el informe.
10
Paleta a CSS
ProConvierte los colores extraídos en variables CSS reutilizables. Copia o descarga con un clic.
¿Se puede probar PixelKit sin instalarlo?
Sí — experimenta las funciones principales de PixelKit aquí mismo, sin necesidad de instalar la extensión.
Buenas herramientas. Un precio pequeño.
Lo esencial gratis. Todo Pro gratis durante un mes.
Free
$0Permanente
Instalar gratis
- Inspector Hoverify
- Color Picker (historial de 5)
- Superposición Grid
- Screenshot (solo visible)
Pro Monthly
1 mes de Pro gratis$0el primer mes
Después, $0.99/mes. Cancela antes de que termine la prueba.
Probar gratis- Incluye todas las funciones Free
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- Todas las herramientas API
- QA de página, títulos e informes JSON
Pro Lifetime
$19.99Pago único
Comprar Pro
- Incluye todas las funciones Pro
- Actualizaciones de por vida
- Soporte prioritario
La prueba de un mes se aplica a Pro mensual. Se requieren datos de pago. La suscripción se renueva a $0.99/mes si no cancelas antes de finalizar la prueba. La licencia de por vida es una compra aparte de $19.99.
1
Inicia la prueba de Pro mensual en Polar.
2
Busca tu clave en Polar o en tu correo.
3
Introduce la clave en PixelKit para activar Pro.
Preguntas frecuentes
¿Qué es PixelKit?+
PixelKit es una extensión de Chrome para analizar y editar el diseño visual de páginas web. Ofrece 8 herramientas incluyendo inspección CSS, extracción de colores, análisis de tipografía, medición de espaciado y verificación de contraste WCAG.
¿Cómo se instala PixelKit?+
Busca 'PixelKit' en Chrome Web Store o haz clic en el botón de instalación de la página de inicio. Está listo para usar inmediatamente después de la instalación.
¿Es PixelKit gratuito?+
Cuatro herramientas son gratis para siempre. Pro mensual incluye un mes de prueba y después cuesta $0.99/mes. La licencia de por vida cuesta $19.99.
¿Cómo funciona la prueba gratuita?+
Elige Pro mensual en Polar y activa tu clave en la extensión. Se requieren datos de pago. Tras un mes, se renueva a $0.99/mes salvo que canceles en Polar antes del final de la prueba. La licencia de por vida se vende aparte por $19.99.
¿Cómo inspeccionar CSS y fuentes de una web?+
Instala PixelKit desde Chrome Web Store y abre una página. Activa el inspector y pasa el cursor sobre un elemento para ver CSS y tipografía. Pro añade inspección de fuentes y copia de CSS.
¿Puedo revisar el diseño antes de publicar?+
Page QA de Pro comprueba desbordamientos, descripciones de imágenes, cargas fallidas, campos, botones y enlaces sin nombre y niveles de títulos omitidos. Localiza los elementos y exporta JSON. Excluye iframes y Shadow DOM y no sustituye una auditoría completa de accesibilidad.
¿Qué funciones adicionales incluye el plan Pro?+
El plan Pro añade 9 herramientas: Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme y Presets.
¿Cómo funciona la verificación de contraste WCAG?+
Calcula en tiempo real la relación de contraste entre el color del texto y el fondo basándose en la fórmula WCAG 2.1. Determina automáticamente el nivel AA (4.5:1 o superior) y AAA (7:1 o superior).
¿Se puede usar PixelKit en navegadores distintos a Chrome?+
Sí, PixelKit se puede instalar y usar en navegadores basados en Chromium como Edge, Brave y Arc a través de Chrome Web Store.
1 mes de Pro gratis
Tu próxima gran idea empieza aquí.
Descubre todas las herramientas Pro gratis durante un mes.
Probar gratisDespués, $0.99/mes. Cancela antes de que termine la prueba.