Conversor de colores

Convierte colores entre formatos HEX, RGB y HSL con vista previa

¿Qué es y cómo funciona?

Un conversor de color traduce un mismo color entre los formatos que se usan en diseño y código: HEX (#3B82F6), RGB (rgb(59, 130, 246)) y HSL (hsl(217, 91%, 60%)). Todos describen el mismo píxel, pero cada uno es cómodo en un sitio distinto: HEX es compacto y domina en CSS y archivos de diseño, RGB se corresponde directamente con cómo las pantallas mezclan luz roja, verde y azul, y HSL describe el color como lo piensa la gente: un tono, cuán vivo es y cuán claro u oscuro. Convertir te permite llevar un color limpiamente entre una herramienta de diseño, una hoja de estilos y un programa de gráficos sin que se desvíe.

Las conversiones son correspondencias matemáticas exactas, así que #3B82F6, su tripleta RGB y sus valores HSL son tres formas de escribir un mismo color. El formato que más rinde es HSL: como separa el tono de la luminosidad, puedes construir una paleta coherente manteniendo el tono fijo y ajustando solo la luminosidad para sombras y matices, algo incómodo de hacer a mano en HEX. Esta herramienta muestra los tres formatos y una muestra en vivo a la vez, para que elijas la representación que cada herramienta necesita y la copies al instante.

Casos de uso

Preguntas frecuentes

¿HEX, RGB y HSL describen los mismos colores?

Sí. HEX y RGB son la misma información escrita de otro modo: cada par de dígitos HEX es un canal RGB. HSL es un sistema de coordenadas distinto sobre el mismo espacio de color, así que cualquier color convierte limpiamente entre los tres sin pérdida para colores opacos estándar.

¿Cuándo debería usar HSL en lugar de HEX?

HSL brilla cuando ajustas un color en vez de solo nombrarlo: aclarar, oscurecer o desaturar. Mantener fijos tono y saturación y cambiar solo la luminosidad produce un conjunto armónico de sombras, mucho más difícil de calcular a ojo en HEX.

¿Cómo gestiono la transparencia?

La transparencia es un canal alfa adicional, escrito como HEX de 8 dígitos (#RRGGBBAA) o como rgba()/hsla(). La conversión opaca cubre el color en sí; añade el valor alfa por separado para colores semitransparentes.

¿Por qué mi color convertido se ve algo distinto en pantalla?

Los números son exactos, pero cómo se ve un color depende de la pantalla, su calibración y su perfil de color. La conversión no cambia el color; las diferencias que percibes vienen de que el monitor representa los mismos valores de otra manera.

Desarrollador

Generador de UUID · Conversor de timestamps · Codificador Base64 · Decodificador Base64 · Generador de hash · Conversor de bases numéricas