Paleta de Colores a Variables CSS

• Varios formatos de salida: nuestro convertidor de paleta de colores a variables CSS admite cuatro formatos de salida: HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) y «Todos los formatos», que genera HEX, RGB, HSL y variables individuales de canal R/G/B en un solo bloque - perfecto para componer valores rgba().
• Generación instantánea de variables CSS: introduce tus nombres de color y valores hex, elige el selector y el formato, y haz clic en «Generar» para obtener declaraciones de propiedades personalizadas CSS listas para pegar al instante. Nuestro convertidor también admite pegado en bloque: introduce varios colores a la vez en formato nombre: #hex.
• Paleta de colores a variables CSS segura online: toda la conversión se ejecuta íntegramente en tu navegador. Tus valores de color y nombres de variable nunca se envían a ningún servidor cuando usas nuestro convertidor online - 100 % privado, funciona totalmente sin conexión una vez cargado.
• Paleta de colores a variables CSS - sin instalación: usa nuestro convertidor gratuito directamente en tu navegador, sin descargas, sin complementos y sin cuenta. Admiten selectores personalizados, prefijos de variables y entrada de colores en bloque para flujos de sistemas de diseño.

• Generación de tokens de sistema de diseño: convierte la paleta de colores de tu marca en propiedades personalizadas CSS para un sistema de diseño. Usa nuestro convertidor para generar todos los tokens de color con un clic y pégalos en tu hoja de estilos global o archivo de tokens de diseño.
• Extensión de tema de Tailwind CSS: genera variables CSS a partir de los colores de tu marca y referéncialas en tu configuración de Tailwind con var(--nombre-color). Nuestro convertidor facilita enlazar tu paleta de diseño con el sistema de temas de Tailwind.
• Cambio de tema en modo oscuro: define paletas de color para modo claro y oscuro como variables CSS bajo distintos selectores (.light, .dark o [data-theme]). Usa nuestro convertidor con la opción de selector personalizado para generar ambos bloques de tema.
• Documentación de colores de marca: convierte la paleta de colores hex de una guía de estilo de marca en variables CSS para el traspaso a desarrolladores. Nuestro convertidor genera variables limpias y con nombres que coinciden con las convenciones del equipo de diseño.
• Tematización de bibliotecas de componentes: genera propiedades personalizadas CSS para los tokens de color de una biblioteca de componentes. Usa la opción de prefijo de variables en nuestro convertidor para crear espacios de nombres (por ejemplo, --brand-color-primary) y evitar conflictos.
• Composición RGBA con variables de canal: usa la salida «Todos los formatos» para generar variables individuales de canal R, G y B junto con el color completo. Esto te permite componer valores rgba() con opacidad dinámica: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Un convertidor de paleta de colores a variables CSS es una herramienta que transforma una lista de valores de color hex en declaraciones de propiedades personalizadas CSS, también conocidas como variables CSS. Las propiedades personalizadas CSS se definen con doble guion como prefijo (por ejemplo, --color-primary: #3b82f6 ) y se pueden referenciar en cualquier parte de tu hoja de estilos con var(--color-primary) . Nuestro convertidor admite formatos de salida HEX, RGB, HSL y combinados, con selectores y prefijos de variables configurables para flujos de sistemas de diseño.

1. Introduce tus colores: añade colores uno a uno con el selector de color y la entrada hex, o usa la función de pegado en bloque para introducir varios colores a la vez en formato nombre: #hex. Cada color recibe un nombre de variable que se convierte en el nombre de la propiedad personalizada CSS.
2. Configura las opciones de salida: elige el formato de salida (HEX, RGB, HSL o todos los formatos), el selector CSS (:root, .theme o personalizado) y un prefijo de variables opcional. Toda la configuración se ejecuta localmente en tu navegador: tus valores de color nunca salen de tu dispositivo.
3. Copia o descarga el CSS: haz clic en «Generar variables CSS» para producir el bloque CSS completo. Cópialo al portapapeles o descárgalo como archivo .css listo para importar en tu proyecto.

• Variables HEX: valores de color hex estándar (por ejemplo, --color-primary: #3b82f6 ). Compatibles con todos los navegadores y el formato más compacto para tokens de color.
• Variables RGB: notación de función RGB (por ejemplo, --color-primary: rgb(59, 130, 246) ). Útil cuando necesitas aplicar opacidad con rgba() sobre un color fijo.
• Variables HSL: notación de función HSL (por ejemplo, --color-primary: hsl(217, 91%, 60%) ). Preferida por muchos sistemas de diseño porque el tono, la saturación y la luminosidad se ajustan de forma independiente.
• Variables de canal (formato «Todos»): valores individuales de canal R, G y B (por ejemplo, --color-primary-r: 59 ) que te permiten componer rgba() con opacidad dinámica: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

Las propiedades personalizadas CSS distinguen mayúsculas y minúsculas: --Color-Primary y --color-primary son variables distintas. Nuestro convertidor de paleta de colores a variables CSS convierte automáticamente los nombres de variable a kebab-case en minúsculas para seguir las convenciones de nombres de CSS. Las variables definidas en :root están disponibles globalmente. Las variables definidas en un selector de clase (por ejemplo, .dark ) solo se aplican cuando esa clase está presente en un elemento ancestro - útil para cambiar de tema.