Una alternativa a ColorZilla para la paleta de toda una web
ColorZilla es el cuentagotas que casi todo diseñador instala primero, y con razón: apuntas a cualquier píxel y el color ya está en el portapapeles. Pero cuando necesitas todos los colores de una web, para qué sirve cada uno y algo que puedas pegar en el código, ir píxel a píxel se hace lento. Eso es lo que hace Stylasso.
Comparación
Los datos de ColorZilla salen de su ficha en Chrome Web Store y de colorzilla.com/chrome a 10 de noviembre de 2026 (versión 4.1, unos 4.000.000 de usuarios, valoración 4,7).
| ColorZilla | Stylasso | |
|---|---|---|
| Color de un píxel | Sí, con muestras de hasta 25×25 y estados hover | Sin cuentagotas |
| Todos los colores de una página | El Webpage Color Analyzer lista la paleta de una página | Sí, agrupados y ordenados según cuánta pantalla ocupa cada uno |
| Para qué sirve cada color | No figura | Funciones: primary, accent, background, surface, text, muted, border |
| Contraste | No figura | Ratio de cada color sobre el fondo de la página |
| Fuentes, escala tipográfica, espaciado, radios, sombras | No figura (solo colores) | Sí |
| Editor de degradados CSS | Sí | No |
| Exportación | Copiar los colores tomados; CSS para degradados. No figura exportación de paleta | Variables CSS, Tailwind v4, DESIGN.md, JSON y moodboard PNG gratis; tema de shadcn/ui y tokens de Figma en Pro |
| Precio | La ficha no muestra precio ni plan de pago | Gratis; Pro cuesta 9,99 USD en un único pago |
“No figura” significa que no lo encontramos en esas dos páginas, no que hayamos probado cada rincón de ColorZilla.
Cómo es leer una página entera
Stylasso analizó Afterhours, una herramienta para desarrolladores ficticia y en modo oscuro que creamos para las demos. Con un clic asignó estas funciones (la extensión usa los nombres en inglés):
- primary
#8b5cf6botones y enlaces, 4,64:1 sobre el fondo - accent
#34d399segundo color de acción, 10,22:1 sobre el fondo - background
#0c0a14fondo de la página - surface
#17141ftarjetas y paneles, 1,08:1 sobre el fondo - text
#ece9f5texto principal, 16,41:1 sobre el fondo - muted
#9a94adtexto secundario, 6,75:1 sobre el fondo - border
#2a2536separadores y contornos, 1,32:1 sobre el fondo
También encontró las fuentes (Space Grotesk para títulos y texto, JetBrains Mono para el código pequeño), cuatro tamaños de texto con su interlineado y peso, los pasos de espaciado, dos radios y dos sombras, una de ellas un resplandor violeta.
Lo que pegas
El principio de la exportación gratuita de variables CSS de esa página, sin editar:
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
/* Keep the @import line above every other rule, including @import "tailwindcss". */
/* Afterhours style kit, extracted 2026-11-07 from https://afterhours.test/ with Stylasso (stylasso.pixlasso.com) */
:root {
--color-primary: #8b5cf6;
--color-accent: #34d399;
--color-background: #0c0a14;
--color-surface: #17141f;
--color-text: #ece9f5;
--color-muted: #9a94ad;
--color-border: #2a2536;
--color-white: #ffffff;
--font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
/* ...type scale, spacing, radii and shadows (28 more lines) */
}
Si eliges Tailwind, el mismo kit sale como un bloque @theme de la v4; mira Convierte cualquier web en un tema de Tailwind v4.
Cuándo usar cada una
Quédate con ColorZilla (o con el cuentagotas de DevTools) para tomar un color suelto mientras trabajas, sacar muestras de una imagen o crear un degradado. Usa Stylasso cuando quieras el sistema que hay detrás de una web: la paleta con sus funciones, la tipografía y el espaciado, listos para una hoja de estilos, un proyecto con Tailwind o un prompt para Cursor o Claude Code. Mucha gente usa las dos.
Preguntas
¿Stylasso puede tomar un solo color?
No. Lee la página entera de una vez. Para un píxel concreto, lo adecuado es un cuentagotas.
¿Lee los colores de las imágenes?
No. Lee lo que pinta el CSS de la página: fondos, texto, bordes, degradados, sombras y rellenos de SVG en línea. Las fotos se ignoran, para que una imagen de cabecera no inunde la paleta.
¿Se envía algo a un servidor?
No. La página se lee en tu navegador cuando pulsas el icono, solo en esa pestaña. Nada sale de tu navegador salvo que publiques un enlace para compartir.