Extrayendo códigos de color hexadecimales del texto

Búsqueda y extracción de todos los códigos de color hexadecimal del texto con un solo clic

Cómo usar el extractor de códigos de color hexadecimal

Pega CSS, HTML, notas de diseño o cualquier texto que contenga colores hexadecimales. La herramienta encuentra códigos como #0F5C8C y #abc, luego los enumera para copiar o descargar. El procesamiento se realiza en tu navegador.

  1. Pega tu texto en el cuadro de entrada (hojas de estilo, fragmentos de HTML o notas de diseño).
  2. Elegir opciones
    • Eliminar colores duplicados — mantener cada color una vez.
    • Estandarizar el formato (mayúsculas) — normalizar a hexadecimal en mayúsculas.
    • Incluir colores en forma corta (#abc) — también coincide con hex de 3 dígitos.
    • Expandir la forma corta a 6 dígitos (#abc → #AABBCC) — convierte #abc en #AABBCC cuando la forma corta está habilitada.
    • Mostrar vistas previas de color — mostrar muestras junto a los valores.
  3. Haz clic en “Extraer códigos de color”.
  4. Copiar, descargar o revisar la lista extraída y las vistas previas.

Hex color extractor example

Casos de uso comunes

  • Auditorías de CSS / temas: Extrae cada color hexadecimal de una hoja de estilos o archivo de token de diseño.
  • Consistencia de la marca: Recopila los colores usados en las plantillas HTML o en el marcado de correos electrónicos.
  • Entrega de diseño: Extrae colores de notas o CSS exportado antes de reconstruir un kit de interfaz de usuario.
  • Limpieza: Encuentra los colores sobrantes o duplicados antes de consolidar una paleta.

¿Qué formatos se detectan?

  • Hexadecimal de 6 dígitos: #0F5C8C, #ff5733 (con o sin # dependiendo del contexto en el texto)
  • Forma abreviada de 3 dígitos: #abc, #F00 (cuando “Incluir forma corta” está habilitado)
  • Forma corta ampliada: #abc → #AABBCC cuando la expansión está habilitada

Las funciones RGB/HSL no se convierten aquí; esta herramienta solo extrae códigos de color hexadecimales.

Ejemplo: Antes y Después

Con “Incluir forma corta”, “Expandir forma corta”, “Eliminar duplicados” y “Estandarizar formato” activado:

Entrada CSSColores extraídos
.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}
#FF0000
#AABBCC
#0F5C8C

#ff0000 y #FF0000 colapsar a un valor en mayúscula. Corto #abc se expande a #AABBCC.

Preguntas Frecuentes (FAQ)

¿La herramienta sube mi CSS o HTML?

No. La extracción se ejecuta localmente en tu navegador. Tu texto no se envía a nuestros servidores.

¿Por qué falta un color corto como #abc?

Habilitar Incluye colores en forma corta. Habilitar opcionalmente Expandir la forma corta enumerar el equivalente de 6 dígitos.

¿Puede extraer valores rgb() o hsl()?

No en esta página. Usa un convertidor de color dedicado si necesitas conversión RGB ↔ Hex (por ejemplo Hex a RGB / RGB a Hex).

¿Se requiere el símbolo de almohadilla (#)?

Los colores más combinados incluyen #. Habilite estandarizar/mayúsculas para mantener una lista coherente para los sistemas de diseño.

Privacidad

Toda la coincidencia ocurre en tu dispositivo con JavaScript. No almacenamos el texto que pegues ni los colores que extraigas.