Herramienta gratuita, sin registro

Extrae la paleta de colores de cualquier sitio web

Pega una URL para obtener los colores de marca, texto, fondo y acento del sitio con sus códigos hex, ordenados por uso. Gratis, sin registro. Mira ejemplos completos en el DESIGN.md de Stripe y el DESIGN.md de Linear, o descubre qué aporta además un DESIGN.md.

Prueba

Usa esta paleta en tu código

El extractor agrupa los colores por rol (fondo, superficie, texto, marca, acento y borde) y los ordena según cuánto de la página cubre cada uno. Para reutilizarlos, da un nombre a cada rol en lugar de pegar códigos hex por todos tus estilos, así un solo cambio actualiza todos los sitios donde aparece el color.

1. Nombra los colores por su rol, no por su tono. --color-text-muted sigue teniendo sentido después de un rediseño; --gray-600 no dice dónde va. Pon los códigos hex que copiaste.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. Úsalas en Tailwind. Cada variable se convierte en un conjunto de utilidades como bg-surface, text-ink-muted y border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Comprueba las combinaciones que usas. El texto principal necesita una relación de contraste de al menos 4.5:1 con su fondo, y el texto grande, 3:1. El extractor muestra la relación del color de texto principal sobre el fondo de la página; comprueba cualquier otra combinación que pienses usar antes de publicarla.

Los colores son una capa de un sistema de diseño. Un DESIGN.md los guarda junto a la escala tipográfica, el espaciado y las reglas de componentes, para que tu agente de programación use el color correcto en el lugar correcto.

Preguntas frecuentes

Preguntas sobre la paleta de colores

Respuestas breves sobre el Extractor de paletas de colores de sitios web gratuito.

La página se carga en un navegador real y los colores que pinta se miden según cuánto de la página cubren. A cada color se le asigna el rol más probable: fondo, panel, texto, marca, acento o borde.

La paleta muestra los colores que la página usa de verdad, ordenados por cobertura y con un máximo de doce. No se cuentan los colores dentro de imágenes o vídeos, los que solo aparecen al pasar el ratón ni los que se usan en otras páginas del sitio.

No. Lee la página con el tema que ve por defecto un visitante nuevo, normalmente el claro. Los sitios que son oscuros por defecto salen oscuros. Un DESIGN.md completo cubre el modo oscuro cuando el sitio lo tiene.

No como archivo. Puedes copiar los códigos hex: selecciona una muestra para copiar uno, o cópialos todos a la vez, uno por línea.

Sí, píxel a píxel. En Chrome o Edge, haz clic derecho en un elemento, elige Inspeccionar y haz clic en el cuadrado de color junto a cualquier color del panel Estilos; su selector tiene un cuentagotas que lee cualquier punto de la página. Firefox tiene el mismo cuentagotas en la barra de herramientas del Inspector.

Esta herramienta solo muestra colores. Un DESIGN.md cubre los colores con sus roles, la escala tipográfica, el espaciado y las reglas de componentes de un sitio, en un archivo que tu agente de programación puede seguir.

Más herramientas gratuitas

Ver todas las herramientas gratuitas

  • Validador de DESIGN.md

    Pega un DESIGN.md para comprobar su estructura y sus tokens y verlo en vista previa, directamente en el navegador.

    Abrir el Validador de DESIGN.md

¿Necesitas el sistema de diseño completo?

Obtén un DESIGN.md con los colores, la escala tipográfica, el espaciado y los componentes de cualquier sitio, listo para tu agente de programación.

Obtén un DESIGN.md