¿Qué tipo de entrada acepta?

Cualquier texto que contenga códigos hex — separados por espacios, comas o pegados desde una hoja de estilos. El texto que no sea color se ignora.

¿Admite hex abreviado?

Sí. El hex de 3 dígitos como #abc se expande automáticamente a #AABBCC.

¿Puedo cambiar los nombres de las variables?

Define un prefijo para controlar el nombre base; los números se añaden automáticamente. Edita el resultado para nombres semánticos.

¿Qué es la salida de Tailwind?

Una configuración module.exports con los colores bajo theme.extend.colors, lista para fusionarse en tailwind.config.js.

¿Se suben mis colores?

No. Todo se procesa en tu navegador y nada sale de tu dispositivo.

Paleta a variables CSS

Pega los colores

Prefijo del nombre de variable

Formato de salida

4 colores

Vista previa de colores

#1E293B

#0EA5E9

#10B981

#F43F5E

Variables CSS

:root {
  --color-1: #1E293B;
  --color-2: #0EA5E9;
  --color-3: #10B981;
  --color-4: #F43F5E;
}

Sitios externos relacionados

Algunos enlaces son enlaces de afiliados.

Adobe ColorUna herramienta gratuita en línea para crear y explorar paletas de colores y temas. Usa la rueda de color para crear esquemas armoniosos, o extrae colores de una imagen. Las paletas se sincronizan directamente con Creative Cloud.CanvaUna popular plataforma de diseño con arrastrar y soltar para crear publicaciones en redes sociales, presentaciones, carteles y más. Ofrece una enorme biblioteca de plantillas, fotos y gráficos gratuitos y premium. No se necesita experiencia en diseño.

Herramientas relacionadas

Generador de Paletas de ColoresGenera paletas de colores armónicas desde un HEX base usando esquemas complementario, análogo, triádico y más. Bloquea colores, regenera el resto y exporta a CSS, Tailwind o JSON.Generador de GradientesCrea gradientes CSS lineales, radiales y cónicos con múltiples paradas de color. Ajusta ángulo, forma y centro, y copia el CSS de background o el valor de Tailwind con un clic.Extractor de Colores de ImagenExtrae la paleta de colores dominantes de cualquier imagen en tu navegador, sin subir nada. Obtén HEX, RGB y porcentaje (%) de cada color, elige cuántos colores y exporta como CSS/JSON.Herramienta de combinación de fuentesEncuentra combinaciones curadas de Google Fonts para títulos y cuerpo, previsualízalas en tiempo real y copia el CSS con un clic.

Pega una paleta — o cualquier texto que contenga códigos hex — y esta herramienta extrae los colores y los escribe como propiedades personalizadas CSS, variables SCSS o una configuración de colores Tailwind. Los duplicados se eliminan y cada color recibe un nombre numerado. Todo ocurre en tu navegador.

Cómo usar

Pega los colores hex (o texto que los contenga) en el cuadro.
Define un prefijo de nombre y elige la salida CSS, SCSS o Tailwind.
Copia el código generado en tu hoja de estilos o configuración.

Cómo funciona

La herramienta escanea el texto en busca de códigos hex (3 o 6 dígitos, con o sin #), los normaliza a formato mayúsculas de 6 dígitos y elimina los duplicados manteniendo el orden de aparición. Cada color se convierte en una variable numerada con tu prefijo, luego se formatea para la salida elegida: propiedades :root CSS, $variables SCSS o un objeto theme.extend.colors de Tailwind.

Funciones

Extracción inteligente

Encuentra códigos hex dentro de cualquier texto pegado e ignora el resto.

Tres formatos

Genera propiedades personalizadas CSS, variables SCSS o una configuración de Tailwind.

Sin duplicados

Los colores repetidos se fusionan para que cada variable sea única.

Totalmente privado

Los colores se procesan en tu navegador y nunca se suben.

Cuándo usarlo

Entrega de diseño

Convierte rápidamente una paleta de una herramienta de diseño en tokens de código.

Temas

Crea un conjunto de variables CSS para el tema de un sitio.

Proyectos Tailwind

Añade los colores de tu marca directamente a tu configuración de Tailwind.

Guías de estilo

Documenta un sistema de colores con nombres de variables coherentes.

Notas

Se aceptan y normalizan tanto #RGB como #RRGGBB.
Los colores mantienen el orden de su primera aparición; los duplicados se eliminan.
Renombra las variables tras pegar si prefieres nombres semánticos.
Todo el procesamiento se ejecuta en tu dispositivo; no se sube nada.

Preguntas frecuentes

¿Qué tipo de entrada acepta?: Cualquier texto que contenga códigos hex — separados por espacios, comas o pegados desde una hoja de estilos. El texto que no sea color se ignora.
¿Admite hex abreviado?: Sí. El hex de 3 dígitos como #abc se expande automáticamente a #AABBCC.
¿Puedo cambiar los nombres de las variables?: Define un prefijo para controlar el nombre base; los números se añaden automáticamente. Edita el resultado para nombres semánticos.
¿Qué es la salida de Tailwind?: Una configuración module.exports con los colores bajo theme.extend.colors, lista para fusionarse en tailwind.config.js.
¿Se suben mis colores?: No. Todo se procesa en tu navegador y nada sale de tu dispositivo.