Conversor de colores

HEX, RGB y HSL describen exactamente los mismos colores; solo discrepan en qué números merece la pena mostrarte. El conversor de arriba acepta cualquier valor hexadecimal y te devuelve las tres notaciones a la vez, junto con una muestra en vivo, para que pases de un archivo de diseño a una hoja de estilos o a un selector de color sin tener que adivinar.

Cómo funciona

Escribe un valor hexadecimal o usa el selector de color nativo que hay junto al campo. La entrada es tolerante en lo que importa:

• La # inicial es opcional: tanto ff0000 como #ff0000 funcionan.
• La notación abreviada de tres dígitos se expande, así que #f00 da el mismo resultado que #ff0000.
• Da igual si usas mayúsculas o minúsculas; la salida canónica es hexadecimal de seis dígitos en minúsculas.

Cualquier otra cosa —un nombre de color, un valor mal formado de cuatro caracteres, un carácter no hexadecimal— se rechaza con un mensaje breve en lugar de convertirse en negro sin avisar. Cada una de las tres salidas tiene su propio botón de copiar, de modo que puedes pegar rgb(59, 130, 246) directamente en una hoja de estilos o hsl(217, 91%, 60%) en un archivo de design tokens.

La conversión es exacta en un sentido y redondeada en el otro. Pasar de hexadecimal a RGB es leer tres bytes en base 16, sin pérdida alguna. Pasar de RGB a HSL implica divisiones, y el tono, la saturación y la luminosidad se redondean a números enteros para que sean legibles; por eso, un viaje de ida y vuelta de HSL a hexadecimal puede desviarse una o dos unidades en algún canal. Si necesitas valores exactos al byte, mantén el hexadecimal como fuente de verdad.

Qué notación usar y cuándo

HEX es compacto e inequívoco, y por eso domina en las entregas de diseño y en las hojas de estilos. También es ilegible: nada en #3b82f6 te dice que es un azul de luminosidad media, ni qué relación guarda con #2563eb.

RGB expone directamente los tres canales. Es la notación adecuada cuando manipulas canales por código —composición, intercambio de canales, generación de imágenes— y es la forma con la que realmente trabajan las API de canvas y de imagen.

HSL es la que te conviene cuando estás diseñando y no transcribiendo. El tono es un ángulo en la rueda de color (0 rojo, 120 verde, 240 azul), la saturación indica cuánto color hay y la luminosidad va del negro en 0 % al blanco en 100 %. Crear una paleta se vuelve entonces mecánico: fija el tono y la saturación, varía la luminosidad y tendrás un conjunto coherente de matices. Cambiar solo el tono te da un color de acento a juego. Hacer lo mismo a mano en hexadecimal supone hacer cuentas en base 16 con tres números acoplados.

CSS acepta las tres, además de las formas modernas separadas por espacios y con canal alfa: rgb(59 130 246 / 50%). Son equivalentes a las formas con comas que genera esta herramienta; usa la que ya emplee tu base de código en lugar de mezclarlas. Fundamentos de HTML5 explica dónde encajan los valores de color en el modelo de documento y de estilos, y fundamentos de JavaScript es el punto de partida si calculas estos valores en tiempo de ejecución en vez de escribirlos a mano.

Lo que conviene saber

La luminosidad de HSL no es el brillo percibido. hsl(60, 100%, 50%) (amarillo) y hsl(240, 100%, 50%) (azul) declaran la misma luminosidad y no se parecen en nada: el ojo es mucho más sensible al verde que al azul. Por eso no puedes evaluar la accesibilidad a partir de HSL, y por eso el comprobador de contraste calcula en su lugar una luminancia relativa ponderada.

La opacidad no forma parte de esta conversión. La herramienta trabaja con colores opacos; no acepta hexadecimal de ocho dígitos con canal alfa. Mantén el alfa aparte: es una instrucción de composición, no una propiedad del color.

El hexadecimal es sRGB. Las notaciones de gama amplia, como oklch() y color(display-p3 ...), pueden expresar colores que no tienen ningún equivalente hexadecimal. Si un valor sale de una herramienta de diseño de gama amplia, convertirlo a hexadecimal lo recorta.