Conversor de Color

Convierte un color entre los tres formatos más comunes en CSS y herramientas de diseño — HEX (`#rrggbb`), RGB (`rgb(r, g, b)`) y HSL (`hsl(tono, saturación%, luminosidad%)`) — actualizando los tres en cuanto cambias cualquiera de ellos, además de un selector de color para elegir visualmente.

Escribe un valor en el campo HEX, RGB o HSL, o haz clic en la muestra del selector de color para elegir visualmente; los otros dos campos se actualizan automáticamente para coincidir. Copia el formato que necesites con el botón de copiar.

Un azul medio puro como `#3366CC` corresponde a `rgb(51, 102, 204)` y `hsl(220, 60%, 50%)` — el mismo color, descrito de tres formas distintas según pienses en bytes hexadecimales, canales rojo/verde/azul, o tono/saturación/luminosidad.

HEX y RGB describen un color como cantidades de luz roja, verde y azul, solo que escritas de forma diferente (pares hexadecimales frente a valores decimales de 0 a 255); HSL en cambio describe un color por su posición en una rueda de color (tono), lo vivo que es (saturación) y lo claro u oscuro que es (luminosidad), algo que muchas personas encuentran más intuitivo para ajustar tonalidades.

HEX es el formato más común en CSS y software de diseño para un color compacto y exacto; RGB es habitual en código de canvas/gráficos y donde importan los canales individuales; HSL suele preferirse al generar variaciones de color, ya que deslizar el valor de luminosidad o saturación produce versiones predeciblemente más claras, más oscuras o más apagadas del mismo tono.

Esta herramienta convierte colores totalmente opacos entre estos tres formatos; no gestiona la transparencia alfa (RGBA/HSLA), los colores con nombre de CSS ni otros espacios de color como CMYK o LAB.

La conversión se ejecuta enteramente en tu navegador mediante JavaScript del lado del cliente; los colores que introduces nunca se suben a un servidor ni se almacenan.