Extractor de Colores CSS
Pegá CSS, SCSS o HTML y obtené todos los colores que usa, sin duplicados y contados, listos para exportar como lista o variables CSS. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
¿Qué es un extractor de colores CSS?
Un extractor de colores CSS recorre el código buscando cada color que usa y lista cada uno una sola vez, para que veas la paleta real de un proyecto en vez de la de la guía de estilo. Este encuentra valores HEX, rgb(), hsl(), lab(), lch(), oklab() y oklch() en cualquier parte del texto, y nombres de color CSS dentro de los valores de las declaraciones, y después unifica las escrituras que producen el mismo color, como #2563eb, #2563EB y rgb(37, 99, 235). Cada color muestra cuántas veces aparece y cómo estaba escrito, y el resultado se puede copiar como lista o como custom properties de CSS.
Ejemplos
Encontrar y reutilizar colores desde el código:
grep -Eoh '#[0-9a-fA-F]{3,8}\b' src/**/*.css | sort | uniq -c | sort -rnconst hexes = css.match(/#[0-9a-f]{3,8}\b/gi) ?? [];
const unique = [...new Set(hexes.map((h) => h.toLowerCase()))];import re
from collections import Counter
Counter(m.lower() for m in re.findall(r"#[0-9a-fA-F]{3,8}\b", css)):root {
--color-1: #2563eb;
--color-2: #ffffff;
}
.button { background: var(--color-1); }Casos de uso
Auditar una hoja de estilos heredada
Pegá un CSS viejo para ver cuántos grises y azules apenas distintos se fueron colando, y cuáles se usan lo suficiente como para conservarlos.
Armar design tokens
Convertí los colores que ya usa un proyecto en variables CSS como primer paso hacia un sistema de tokens.
Tomar prestada una paleta
Copiá el CSS de una página desde las herramientas para developers de tu navegador y pegalo acá para obtener sus colores.
Revisar un pull request
Pegá los estilos modificados para detectar colores escritos a mano que deberían haber usado una variable existente.