Generador de Color a Variables CSS Convierta un conjunto de colores en propiedades personalizadas de CSS (variables).

🎨

Color a Variables CSS

Convierta un conjunto de colores en propiedades personalizadas de CSS (variables).

Agregar colores

Agregue colores con nombres de variables personalizados utilizando selectores de color.

Elegir formato

Seleccione el formato de salida: HEX, RGB o HSL.

Copiar CSS

Copie el bloque de propiedades personalizadas :root CSS generado.

Loading tool...

What Is Color a Variables CSS?

El generador de Color a Variables CSS convierte una colección de colores con nombre en propiedades personalizadas de CSS (:root variables) listas para pegar en tus hojas de estilo. Puedes agregar cualquier número de colores, darle un nombre de variable semántico a cada uno (como "primario", "secundario", "acentúo") y elegir el formato de salida: HEX para la simplicidad, RGB separado por comas para flexibilidad en rgba() o HSL separado por comas para una fácil manipulación en tiempo de ejecución. Las propiedades personalizadas de CSS son la base de los sistemas de tematización modernos, lo que permite el modo oscuro, la tematización de marca y las actualizaciones de color dinámicas. Esta herramienta genera el bloque :root { --variable: valor; } para que puedas configurar rápidamente un sistema de colores. La vista previa en vivo muestra todos tus colores juntos como una tira de paleta.

Why Use Color a Variables CSS?

Agregar colores ilimitados con nombres de variables personalizados
Tres formatos de salida: HEX, RGB o HSL
Genera un bloque de propiedades CSS limpio :root { }
Vista previa en vivo de la paleta de colores
Base para sistemas de tematización CSS

Common Use Cases

Tematización CSS

Configure las propiedades personalizadas de CSS para la tematización de modo ligero/oscuro.

Tokens de diseño

Convierta los tokens del sistema de diseño en variables CSS.

Colores de marca

Cree un conjunto reutilizable de variables CSS para colores de marca.

Bibliotecas de componentes

Defina variables de color personalizables para bibliotecas de componentes CSS.

Technical Guide

Las propiedades personalizadas de CSS (var(--nombre)) se definen en un selector :root para el ámbito global. El formato HEX almacena el valor de color completo: --primario: #3B82F6. El formato RGB separado por comas almacena los canales: --primario: 59, 130, 246, que se puede utilizar como rgb(var(--primario)) o rgba(var(--primario), 0.5) para una opacidad flexible. El formato HSL almacena: --primario: 217, 91%, 60%, usable como hsl(var(--primario)). Los formatos RGB y HSL son más flexibles porque permiten agregar opacidad en el punto de uso sin redefinir la variable. Las propiedades personalizadas de CSS se heredan en todos los elementos secundarios y se pueden anular en consultas de medios o selectores de clase para cambiar de tema. Están soportados en todos los navegadores modernos y se cascaban como las propiedades de CSS regulares.

Tips & Best Practices

1
Utilice nombres semánticos como --primario, --secundario en lugar de --azul, --rojo para mayor flexibilidad
2
El formato RGB es el más flexible: rgba(var(--primario), 0.5) le da control sobre la opacidad
3
El formato HSL permite derivar variaciones: hsl(var(--primario-h), var(--primario-s), 90%)
4
Anule las variables en consultas de medios para el modo oscuro: @media (prefers-color-scheme: dark) { :root { ... } }
5
Mantenga su recuento de variables manejable, la mayoría de los sistemas necesitan 5-10 variables de color

Related Tools

Convertidor de HEX a RGB

Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.

🎨 Color Tools

Convertidor de HEX a HSL

Convierta códigos de color HEX en valores HSL (Matiz, Saturación, Luminosidad).

🎨 Color Tools

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools

Buscador de colores Tailwind

Encuentra la clase de color CSS de Tailwind más cercana para cualquier código HEX.

🎨 Color Tools

Generador de filtros CSS

Aplica efectos de filtro CSS como desenfoque, brillo, contraste y más con controles visuales.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Qué formato debo elegir?

HEX para simplicidad y legibilidad. RGB si necesita control de opacidad a través de rgba(var(...), alpha). HSL si desea derivar variaciones de color ajustando componentes individuales.

Q ¿Están soportadas las propiedades personalizadas de CSS en todas partes?

Sí, en todos los navegadores modernos desde 2016 (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). No compatible con IE11.

Q ¿Puedo utilizar variables para el modo oscuro?

Absolutamente. Defina los valores del modo ligero en :root, luego anule en @media (prefers-color-scheme: dark) { :root { ... } } o en una clase .dark.

About This Tool

Color a Variables CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.