Conversor de colores: HEX, RGB, HSL y HSV sin complicaciones

He perdido la cuenta de las veces que estaba escribiendo CSS y necesitaba convertir un código hexadecimal a RGB. El diseñador envía #4A90E2, el código necesita rgb(74, 144, 226), y por alguna razón mi cerebro simplemente no puede hacer ese cálculo al vuelo. Quizás el tuyo puede — pero el mío definitivamente no.

En proyectos reales esto pasa constantemente. Los archivos de diseño están llenos de códigos HEX, las propiedades CSS personalizadas pueden necesitar HSL para variantes de tema, y las APIs Canvas o atributos SVG a veces requieren RGB. Estos formatos no se llevan bien entre sí, y cambiar entre ellos manualmente es una tarea tediosa y propensa a errores.

Ese es el problema que resuelve un conversor de colores. Pega un color en cualquier formato y recíbelo en los cuatro formatos principales instantáneamente.

Por qué existen varios formatos de color

La existencia de múltiples formatos de color no es un accidente — cada uno fue diseñado para un caso de uso diferente, y cada uno tiene fortalezas genuinas.

HEX (#RRGGBB) es el formato más antiguo y universalmente soportado en contextos web. Es compacto, fácil de copiar de las DevTools del navegador, y casi todas las herramientas de diseño lo exportan por defecto. El inconveniente es que es completamente contraintuitivo de leer.

RGB (rojo, verde, azul) corresponde a cómo funcionan realmente los monitores de computadora. Los valores van de 0 a 255. Es esencial cuando necesitas transparencia (rgba(74, 144, 226, 0.5)).

HSL (tono, saturación, luminosidad) es el formato que los diseñadores tienden a amar una vez que lo descubren. El valor práctico: puedes hacer el color de un botón ligeramente más claro al pasar el ratón simplemente ajustando el valor L. Eso no es posible de forma intuitiva con HEX.

HSV (tono, saturación, valor) está estrechamente relacionado con HSL pero funciona diferente en los extremos. La mayoría de las interfaces de selector de color en herramientas de diseño funcionan internamente con HSV.

Cómo usar el conversor de colores

Ve a /tools/color-converter.

Paso 1: Introducir el color inicial. Puedes escribir o pegar un valor en cualquiera de los cuatro formatos. La entrada HEX acepta la forma de seis caracteres (#4A90E2) o la forma abreviada de tres caracteres (#48F).

Paso 2: Ver la previsualización en tiempo real. Mientras escribes, una muestra de color se actualiza en tiempo real para que puedas ver el aspecto del color.

Paso 3: Copiar el formato que necesitas. Cada campo de salida tiene un botón de copiar. Haz clic y el valor está en el portapapeles, listo para pegarlo en tu CSS.

Casos de uso prácticos

Propiedades CSS personalizadas y design tokens. Al construir un sistema de diseño, podrías definir el color primario como --color-primary: hsl(210, 72%, 59%) porque HSL facilita crear variantes tonales. Pero tu diseñador te dio #4A90E2. El conversor cubre esa brecha.

API Canvas y SVG. La propiedad fillStyle del canvas HTML acepta cualquier cadena de color CSS. Pero algunas bibliotecas de terceros pueden esperar arrays RGB como [74, 144, 226].

Verificar accesibilidad del contraste de color. Al usar un verificador de contraste de color, a menudo necesitas proporcionar colores en formatos específicos.

Exportaciones de herramientas de diseño. Figma exporta colores en HEX por defecto. Sketch suele dar valores RGB. Poder convertir al formato que usa tu proyecto evita cambios de contexto constantes.

Herramientas relacionadas

• Selector de color: Elige un color visualmente, copia su código HEX y pégalo en el conversor para obtener HSL o RGB.
• Verificador de contraste de color: Después de convertir, verifica los ratios de contraste WCAG.
• Generador de paleta de colores: Genera una paleta completa desde un color base y convierte cada color al formato que necesita tu proyecto.

Limitaciones: siendo honestos

No admite espacios de color de impresión. CMYK no tiene equivalente directo en el espacio de color RGB para pantallas. Para convertir entre colores de pantalla e impresión necesitas software dedicado de gestión del color.

No se cubren espacios de color perceptualmente uniformes. Los navegadores modernos están empezando a soportar OKLCH y OKLAB. Este conversor se centra en los cuatro formatos que cubren la gran mayoría de las necesidades prácticas actuales.

La precisión del color depende de la calibración del monitor. Un #4A90E2 en un monitor no calibrado se ve diferente al mismo código en un monitor profesional calibrado.

Conclusión

La conversión de formato de color es una de esas pequeñas tareas recurrentes que siguen siendo molestas si intentas hacerlas manualmente. El cálculo HEX-a-RGB siempre requiere varios intentos, y recordar el equivalente HSL de un color de marca de memoria es prácticamente imposible.

Tener un conversor elimina esa fricción por completo. Introduce un color, obtén los cuatro formatos, copia lo que necesitas. Si trabajas regularmente en diseño UI o CSS, prueba el conversor de colores. Y si estás construyendo un sistema de colores, también vale la pena echar un vistazo al generador de paleta de colores.