Extraer los colores de cualquier web, con su función
Sacar una lista de todos los códigos hex de una página es fácil, pero sirve de poco. Lo que normalmente quieres es la paleta: cuál es el color de la marca, cuál el del texto, sobre qué color van las tarjetas. Stylasso lo deduce de dónde se pinta cada color.
Una paleta de ejemplo
Stylasso analizó Northwind Roasters, una cafetería ficticia que creamos para las demos. Estas son las funciones que asignó (la extensión usa los nombres en inglés), con el contraste de cada color sobre el fondo de la página:
- primary
#c2410cbotones principales y enlaces, 4,99:1 sobre el fondo - accent
#4d7c5asegundo color de acción, 4,65:1 sobre el fondo - background
#fffaf3fondo de la página - surface
#f6eadbtarjetas y paneles, 1,14:1 sobre el fondo - text
#2b1d14texto principal, 15,69:1 sobre el fondo - muted
#7a6656texto secundario, 5,24:1 sobre el fondo - border
#ead8c3separadores y contornos, 1,34:1 sobre el fondo
Otros dos colores de esa página (un ámbar de realce y un naranja oscuro para el hover) se guardaron como extras sin función, así que no se pierde nada de lo que pinta la página.
Cómo se eligen las funciones
- Primary sale de los botones rellenos y los enlaces de la primera pantalla, con un plus para el color del logo.
- Background, surface y border salen de las zonas de página, tarjetas y separadores, ponderadas según cuánto ocupan en pantalla.
- Text y muted salen del texto principal y de los pies de foto; Stylasso elige un color de texto que cumpla WCAG AA sobre el fondo cuando la página tiene uno.
- También se analizan degradados, sombras y rellenos SVG, y los colores casi iguales se fusionan.
Llévatela a tu proyecto
La misma paleta como variables CSS (gratis):
:root {
--color-primary: #c2410c;
--color-accent: #4d7c5a;
--color-background: #fffaf3;
--color-surface: #f6eadb;
--color-text: #2b1d14;
--color-muted: #7a6656;
--color-border: #ead8c3;
--color-amber-400: #f59e0b;
--color-orange-600: #9a3412;
/* ...fonts, type scale, spacing, radii, shadows */
}
Las demás exportaciones también la incluyen: un @theme de Tailwind v4, un DESIGN.md para herramientas de programación con IA, JSON, una imagen de moodboard de 1200 × 630 y, en Pro, tokens de diseño W3C que puedes importar en Figma y un tema de shadcn/ui.
Sin extensión
Chrome DevTools tiene un panel CSS Overview (en el menú Más herramientas) que lista todos los colores de una página y señala el contraste bajo. Es una buena forma gratuita de ver la lista en bruto. No te dice qué papel cumple cada color ni exporta nada que puedas pegar. Si solo necesitas un color, basta con el cuentagotas de cualquier selector de color de DevTools.
Preguntas
¿Es un selector de color?
No. Stylasso lee la página entera de una vez. Para un solo píxel, usa un cuentagotas.
¿Funciona en webs oscuras?
Sí. Detecta las páginas oscuras, lee las funciones igual y la exportación de shadcn/ui escribe el tema empezando por el modo oscuro.
¿Se envía algo a un servidor?
No. La página se lee en tu navegador cuando haces clic en el icono, y solo en esa pestaña. Nada sale de tu navegador salvo que publiques un enlace para compartir.