Herramientas

Paleta de colores de cualquier web

Escribe la dirección de una web y obtén su paleta: cada color con su rol, en códigos hex, variables CSS, un tema de Tailwind o JSON.

Prueba constripe.comlinear.appairbnb.com

airbnb.com

Medido hace 4 días.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
#ffffff  background
#dddddd  surface
#f2f2f2  surface-2
#222222  foreground
#6c6c6c  muted-foreground
#da1249  primary
#ffffff  on-primary
#ffffff  border

Cómo funciona

Stylepack abre el sitio en un navegador real, mide lo que se renderiza (no lo que dice la hoja de estilos) en cuatro anchos y en ambos temas, y guarda el resultado como un paquete de diseño. Un sitio ya medido responde al instante; uno nuevo tarda menos de un minuto. Cada valor de esta página sale de ese paquete.

Preguntas

¿Cómo se mide la paleta?

El sitio se renderiza en un navegador real y los colores de fondos, texto, botones, enlaces y bordes se leen de la página, se agrupan y se nombran por rol (background, foreground, primary, border, etc.). El acento es el color de sus botones principales y enlaces.

¿Incluye los colores del modo oscuro?

Cuando el sitio tiene tema oscuro, también se mide y el CSS lleva un bloque dark con los valores correspondientes.

¿Puedo obtener la paleta para Tailwind o Figma?

El resultado ofrece códigos hex, variables CSS, un tema de Tailwind v4 y JSON. El paquete de diseño añade tokens.json en el formato de tokens de diseño del W3C, que leen Style Dictionary y los plugins de Figma.