Convertidor de colores — De HEX a RGB y a HSL en línea

Pega un color en cualquier formato —HEX, RGB o HSL— y obtén al instante los tres formatos, además de una muestra de vista previa en tiempo real. También puedes seleccionar un color visualmente con el selector de colores integrado. Perfecto para transferir colores entre CSS, herramientas de diseño y código.

¿Qué es esta herramienta?

Los colores en la web se escriben en varios formatos equivalentes. El formato HEX (#4f46e5) es la forma compacta que se utiliza universalmente en CSS y en las entregas de diseño. El formato RGB (rgb(79, 70, 229)) indica directamente los componentes de rojo, verde y azul, algo que a menudo se necesita en la programación. El formato HSL (hsl(243, 75 %, 59 %)) describe el tono, la saturación y la luminosidad; es el formato más intuitivo para ajustar un color, por ejemplo, para oscurecerlo o reducir su saturación.

Todos ellos describen el mismo color; esta herramienta permite convertir entre ellos con total precisión y muestra una vista previa para que puedas confirmar que es el color que querías.

¿Por qué utilizarlo?

Acepta cualquier formato de entrada —HEX (3 o 6 dígitos), RGB o HSL— y genera resultados en todos los formatos.
Muestra de vista previa en directo para que veas el color, no solo números.
Selector de colores visual para cuando prefieras elegir a ojo.
Copia con un solo clic por formato, lista para CSS o código.
Gratis, al instante, sin necesidad de subir archivos.

Cómo utilizarlo

Escribe o pega un color: #4f46e5, rgb(79, 70, 229) o hsl(243, 75%, 59%); cualquiera de ellos sirve.
O bien, haz clic en el selector de colores y elige el que más te guste.
Lee los tres formatos que aparecen en los resultados y comprueba la muestra de vista previa.
Haz clic en «Copiar» junto al formato que necesites.

Ejemplo

Entrada

#4f46e5

Resultado

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

Tres notaciones, un mismo color.

¿Qué formato deberías utilizar?

Las tres expresiones describen exactamente el mismo color; la elección depende de cuál resulte más fácil de utilizar para la tarea en cuestión, no de la precisión.

Formato	Ideal para	¿Por qué?
Código de color hexadecimal	CSS, traspasos de diseño, copiar y pegar rápido	El más rápido de escribir y pegar; el formato universal en herramientas de diseño como Figma.
Rojo, verde, azul (79, 70, 229)	Código que manipula los canales directamente, trabajo con lienzos e imágenes	Se ajusta a la forma en que las API gráficas y los datos de píxeles de las imágenes almacenan realmente el color.
HSL (hsl(243,75 %, 59 %))	Ajustar un color: más claro, más oscuro, más o menos saturado	La luminosidad y la saturación son valores independientes que se pueden ajustar directamente, a diferencia de los formatos HEX/RGB, en los que todos los canales cambian al mismo tiempo.

Casos de uso habituales

Seleccionar un color visualmente en una herramienta de diseño y, a continuación, convertirlo al valor HEX o RGB exacto que se necesita en CSS o en el código.
Generar un conjunto de tonos relacionados (variantes más claras o más oscuras) mediante la conversión a HSL, el ajuste de la luminosidad y la conversión inversa.
Coordinar el color de una marca en diferentes herramientas que requieren cada una un formato distinto: un archivo de logotipo en RGB, una guía de estilo en HEX y una variable CSS que necesita HSL para la personalización del tema.
Comprobar que un color extraído de una captura de pantalla o de un archivo de diseño (que suele indicarse en formato RGB) coincide con el valor HEX de una hoja de estilos.

Preguntas frecuentes

¿Cuándo debería utilizar HSL en lugar de HEX o RGB?

Cuando se quiere razonar sobre un color. Para oscurecer un color un 10 % en HSL hay que reducir la luminosidad en 10 puntos; en HEX o RGB habría que volver a calcular todos los canales. Los sistemas de diseño suelen definir las paletas en HSL precisamente por este motivo.

¿Admite la herramienta valores hexadecimales de tres dígitos, como #fff?

Sí. #fff es una forma abreviada de #ffffff: cada dígito se duplica. Se aceptan ambas formas y el resultado se muestra en su forma completa de 6 dígitos.

¿Y qué hay del alfa (transparencia)?

Esta herramienta convierte colores opacos (los valores RGB/HSL). Si necesitas transparencia, añade tú mismo el alfa: rgba(79, 70, 229, 0,5) o #4f46e580; la parte del color no cambia.

¿Por qué mis valores de HSL difieren en 1 respecto a los de otra herramienta?

Redondeo. La conversión HSL↔RGB genera valores fraccionarios, y cada herramienta los redondea de forma diferente. Una diferencia de ±1 en el tono o en el porcentaje es imperceptible y normal.

¿Se admiten nombres de colores como «rojo»?

No está disponible en la Fase 1: la herramienta se centra en los tres formatos numéricos que los desarrolladores utilizan con más frecuencia. Introduce el valor HEX/RGB/HSL del color o selecciónalo visualmente con el selector.

Convertidor de colores HEX / RGB / HSL