Convertidor de código de color (HEX, RGB, HSL)

Cómo funciona

Escriba un color por línea: cada línea se reconoce por su cuenta, así que una lista puede mezclar HEX, RGB y HSL sin ningún orden. El HEX se acepta en su forma de seis caracteres (#2F6FED) y en la forma corta de tres (#2F6), y la almohadilla inicial es opcional. Para RGB escriba rgb(154, 52, 18) o simplemente los tres números separados por comas o espacios; un canal fuera del rango 0-255 se rechaza en vez de recortarse en silencio, de modo que una errata se ve en lugar de devolver un color equivocado. El HSL espera el tono en grados de 0 a 360 y la saturación y la luminosidad en porcentaje; también se leen las formas rgba() y hsla(), aunque el valor de transparencia no pasa a la salida. Cada color que se lee bien aparece como una muestra junto a su código HEX, así que puede ver lo que convirtió en lugar de fiarse de los números. Toda línea que no se entienda queda marcada en la salida, lo que le indica exactamente cuál hay que corregir.

Esta herramienta también se busca como convertir hex a rgb, rgb a hex, convertidor de codigo de color, codigo de color hexadecimal, hex a hsl, sacar el codigo de un color.

¿Qué es código de color HEX?

Un código HEX escribe las componentes roja, verde y azul de un color en base 16, con seis caracteres detrás de una almohadilla: #9A3412, por ejemplo. El primer par lleva el rojo, el del medio el verde y el último el azul, y una abreviatura de tres caracteres como #F00 se lee duplicando cada carácter. Por ser corto, inequívoco y fácil de copiar se ha convertido en el idioma por defecto del color en CSS, en los programas de diseño y en los manuales de marca: es la forma en la que casi siempre le llega un color desde diseño, y la que conviene guardar como original.

¿Qué es RGB?

El RGB describe un color tal como lo fabrica de verdad una pantalla: como la intensidad de una luz roja, una verde y una azul, cada una en una escala de 0 a 255. La notación rgb(154, 52, 18) enseña los tres canales abiertamente, lo que deja ver qué le pasa al resultado cuando uno de ellos sube o baja. Lleva exactamente la misma información que un código HEX, solo cambia la base de numeración, así que elegir entre los dos es una cuestión práctica y no técnica. El RGB se impone en cuanto un programa tiene que calcular sobre los canales, por ejemplo para aclarar un color o medir un contraste.

¿Qué es HSL?

El HSL describe un color con tres componentes más cercanas a como lo percibe una persona: el tono, que es la posición en el círculo cromático de 0 a 360 grados, la saturación y la luminosidad. Sacar una versión más clara, más oscura o más apagada del mismo color es cambiar un solo número, y por eso los diseñadores recurren al HSL para armar una paleta o derivar un tema oscuro. CSS admite la notación hsl() directamente, así que un valor leído aquí se pega en una hoja de estilos sin ninguna conversión más.

¿HEX y RGB son el mismo color?

Sí — HEX y RGB son dos maneras de escribir la misma información: #9A3412 y rgb(154, 52, 18) describen exactamente el mismo color, porque 9A en hexadecimal es 154 en decimal. Elegir entre los dos depende de adónde va el valor, no de lo que significa. El HSL sí es distinto de raíz: describe ese mismo color mediante tono, saturación y luminosidad en lugar de tres canales de luz. Como esas componentes se redondean a enteros para que se puedan leer, una ida y vuelta pasando por HSL puede volver corrida una o dos unidades. El color se sigue viendo igual en pantalla; lo que ya no coincide carácter por carácter es el código, y eso importa justo cuando lo que se está especificando es el código mismo.

Qué formato conviene en cada caso

Las tres notaciones pueden llevar exactamente el mismo color; lo que decide entre ellas es adónde va el valor. Para un código suelto que se pega en una hoja de estilos, el HEX es el más corto y el que se reconoce en todas partes, y es la forma en la que un manual de marca le va a entregar casi siempre sus colores.

Si tiene que hacer cuentas con los canales, el RGB le pone los tres números delante. Si lo que busca es la variante más clara o más oscura del mismo color, el HSL le deja cambiar un solo número en lugar de tres.

• HEX → corto y estándar en CSS y en las herramientas de diseño
• RGB → cuando hace falta tocar los canales por separado
• HSL → para armar una familia de tonos y variantes claras u oscuras

Por qué a veces un valor vuelve corrido una unidad

Las componentes del HSL son fraccionarias y se redondean a números enteros para que la salida se pueda leer. Si convierte un código HEX a HSL y luego vuelve atrás, puede encontrarse una diferencia de una o dos unidades en algún canal.

El desvío no se aprecia en pantalla, pero existe. Cuando un código tiene que quedar exactamente como se lo entregaron — un color corporativo, un valor escrito en un pliego de especificaciones — guarde el HEX como referencia y trate la lectura en HSL como un valor derivado de él.

Preguntas frecuentes

¿Cómo convierto un código HEX a RGB?

Escriba el código en el panel izquierdo y ponga el formato de salida en RGB. El resultado aparece a la derecha mientras escribe, con una muestra al lado que enseña el color en sí.

¿Puedo convertir varios colores a la vez?

Sí. Ponga un color por línea. La lista entera se convierte de una pasada y mantiene el orden, así que una paleta vuelve siendo una paleta.

¿Se admite la forma corta del HEX?

Sí. Un código de tres caracteres como #2F6 se expande duplicando cada carácter, que es exactamente como lo lee un navegador. La almohadilla inicial también es opcional aquí.

¿Por qué aparece mi color como no reconocido?

Casi siempre porque un canal se sale de rango o falta un paréntesis. Los canales RGB tienen que estar entre 0 y 255, el tono entre 0 y 360, y la saturación y la luminosidad entre 0 y 100. Las líneas que fallan salen listadas, así que corrija una en vez de revisarlas todas.

¿Salen mis colores a algún servidor?

No. La lectura y la conversión ocurren dentro de su navegador; lo que pega no llega a ningún servidor, lo que importa cuando la paleta pertenece a una identidad de marca que todavía no es pública.

Fuentes

• W3C — CSS Color Module Level 4 (hex, rgb(), hsl())