Convertidor de colores HEX, RGB y HSL

Qué es un conversor de color HEX, RGB y HSL

El color de una web se describe con distintos sistemas numéricos y cada uno se usa en un sitio. HEX es el que aparece al copiar un color desde el inspector del navegador o desde herramientas como Figma: se escribe como #1468A3 y es el formato que aceptan las variables CSS. RGB usa tres números de 0 a 255 y es el que ves en la mayoría de ajustes de imagen y en el background-color de los frameworks. HSL describe el color con matiz, saturación y luminosidad en porcentajes, y es el más cómodo cuando quieres crear variantes de un mismo color adjusting su brillo sin que el tono se desvíe.

Por qué importa no inventar el color a ojo

Un error frecuente es escribir un valor HEX aproximado y esperar que se parezca al original. La diferencia de un solo dígito en un canal RGB se nota en los fondos claros y en los textos sobre imagen. Convertir de forma exacta lo que te da el cliente o la maqueta evita ese tipo de sorpresas, y además te permite documentar la paleta en un formato que cada herramienta entiende.

Cómo se relacionan los tres formatos

El HEX y el RGB describen exactamente lo mismo: el primero codifica los tres canales en hexadecimal y el segundo en decimal de 0 a 255. El HSL es una forma distinta de medir lo mismo, pero separada por tono, saturación y luminosidad. Esa separación es la que hace útil el HSL cuando quieres construir una escala de sombras: mantienes el matiz fijo y solo mueves la luminosidad para ir de la tinta clara al color profundo.