Conversor de color HEX/RGB/HSL

Cuando trabajas simultáneamente con Figma, CSS, Tailwind y herramientas de diseño en formato HSL, traducir un color entre formatos manualmente es lento y propenso a errores. Este conversor transforma cualquier color entre HEX, RGB, HSL y clase Tailwind arbitraria al instante, con un color picker integrado para explorar variaciones sin salir de la herramienta.

HEX, RGB y HSL: cuándo usar cada formato

HSL es el formato más conveniente para construir paletas de colores con variantes de luminosidad; HEX para comunicar colores concretos; RGB para operaciones matemáticas con canales de color individuales.

HEX (#1a2b3c) es el formato más compacto y el estándar histórico en CSS. Es adecuado para copiar colores entre herramientas o comunicarlos en un brief. Su limitación es que no es intuitivo para ajustar: modificar la luminosidad requiere entender los tres pares de dígitos.

HSL (hue, saturation, lightness) es ideal cuando necesitas generar variantes: subir la luminosidad (L) del 40 % al 60 % da la versión «clara» del mismo color sin cambiar el tono. Muchos design systems modernos definen su paleta en HSL precisamente por esta razón. RGB sigue siendo el formato nativo de pantallas y el que acepta la función rgb() de CSS.

Integración con Tailwind CSS y variables CSS

Tailwind CSS permite colores arbitrarios con la sintaxis bg-[#1a2b3c] o text-[rgb(26,43,60)]. Esta herramienta genera la clase arbitraria lista para pegar en tu JSX o HTML. Si usas Tailwind v3 con CSS variables en tailwind.config.js, también obtienes el valor en formato var(--color-nombre) para definirlo en tu capa @layer base.

Para quienes usan Design Tokens o CSS custom properties, el conversor entrega el valor en notación hsl(220 30% 25%) (sin comas, formato moderno CSS Level 4) compatible con navegadores desde 2021, así como la notación clásica hsl(220, 30%, 25%) para proyectos con soporte a navegadores más antiguos.

• ▸Pegá un HEX y obtén RGB, HSL, clase Tailwind arbitraria y CSS variable en un clic
• ▸El color picker permite explorar variaciones en tiempo real antes de copiar
• ▸Salida HSL moderna (sin comas) y clásica (con comas) disponibles
• ▸Útil para auditar colores de marca: verificar si dos HEX distintos son perceptualmente muy similares en HSL

Errores frecuentes al trabajar con colores entre herramientas

Un error común es copiar el valor RGB de Figma —que lo exporta como R: 26 G: 43 B: 60— e intentar usarlo directamente en CSS sin convertirlo a la función rgb(26, 43, 60). Otro error frecuente: confundir el canal alfa en HEX de 8 dígitos (#RRGGBBAA) con el orden opuesto (#AARRGGBB) que usa Android.

El canal de opacidad en CSS moderno puede expresarse en la función rgb() como cuarto argumento: rgb(26 43 60 / 50%). Este conversor no incluye canal alfa directamente, pero una vez obtenido el valor base en cualquier formato, agregar / 0.5 al final de la función CSS es inmediato.