Si alguna vez has copiado un color de una herramienta de diseño y lo has pegado en CSS, has trabajado con al menos dos formatos de color: un código HEX de seis caracteres del cuentagotas y un valor rgb() de las especificaciones de diseño. Ambos representan el mismo color — simplemente lo codifican de forma diferente. Entender cómo se relacionan HEX y RGB, y dónde encaja HSL, hace que las decisiones de color en el código sean más rápidas e intencionadas.
¿Qué Es un Código de Color HEX?
Un código de color HEX es una cadena de seis caracteres que representa un color en notación hexadecimal — el sistema de base 16 que usa los dígitos 0–9 y las letras A–F. La cadena se divide en tres pares de dos caracteres: el primer par representa el canal rojo, el segundo el verde y el tercero el azul. Cada par va de 00 (intensidad mínima, decimal 0) a FF (intensidad máxima, decimal 255).
#FF5733 se descompone así: FF para rojo (255), 57 para verde (87) y 33 para azul (51) — un naranja-rojo vivo. #000000 es negro puro (todos los canales a cero), #FFFFFF es blanco puro (todos al máximo) y #808080 es gris neutro (todos los canales a decimal 128, exactamente la mitad de la intensidad máxima).
HEX es el formato más común en CSS y las herramientas de diseño web. Es compacto, fácil de copiar y pegar, y reconocido universalmente por aplicaciones de diseño, herramientas de desarrollador del navegador y preprocesadores CSS. La forma abreviada usa tres caracteres cuando los dos dígitos de cada canal son idénticos: #FF0000 se convierte en #F00, #AABBCC en #ABC.
¿Qué Es RGB?
RGB especifica colores usando tres números decimales que representan la intensidad de los canales rojo, verde y azul en una escala del 0 al 255. En CSS se escribe como rgb(255, 87, 51) — el mismo color que #FF5733. El formato decimal es más inmediatamente legible: rgb(0, 0, 0) es obviamente negro y rgb(255, 255, 255) es obviamente blanco sin ningún paso de conversión.
RGB es color aditivo — estás mezclando luz, no pigmento. Llevar todos los canales al máximo (255, 255, 255) produce blanco porque la luz blanca combina todas las longitudes de onda visibles. Llevar todos a cero produce negro porque no se emite luz. Esto es lo contrario del color sustractivo (CMYK) usado en impresión, donde mezclar todas las tintas produce negro.
CSS también admite rgba() con un cuarto parámetro para la opacidad (alfa), de 0 (completamente transparente) a 1 (completamente opaco). rgba(255, 87, 51, 0.5) es el mismo naranja-rojo al 50% de transparencia. Los códigos HEX pueden codificar opacidad con un formato de 8 caracteres — #FF573380 añade el byte alfa al final — aunque el soporte del navegador para este formato es menos consistente que rgba() y debe usarse con un fallback.
Cómo Convertir HEX a RGB: La Aritmética
Para convertir un par HEX a decimal, multiplica el primer dígito hexadecimal por 16 y añade el segundo. Para FF: F = 15, así que (15 × 16) + 15 = 255. Para 57: (5 × 16) + 7 = 87. Para 33: (3 × 16) + 3 = 51. El resultado es rgb(255, 87, 51). Para dígitos hexadecimales superiores a 9, usa la correspondencia: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Para convertir de RGB a HEX, divide cada valor decimal entre 16 y expresa el cociente y el resto como dígitos hexadecimales. Para 255: 255 ÷ 16 = 15 con resto 15, por tanto FF. Para 87: 87 ÷ 16 = 5 con resto 7, por tanto 57. Para 51: 51 ÷ 16 = 3 con resto 3, por tanto 33. El resultado es #FF5733. La mayoría de los desarrolladores usan una herramienta de color o el panel de desarrollador del navegador para estas conversiones en lugar de hacer la aritmética manualmente.
Una diferencia práctica clave en el código: HEX es preferible para tokens de diseño estáticos porque es compacto y produce diffs limpios en control de versiones. RGB es preferible cuando necesitas valores dinámicos — animar la opacidad con propiedades personalizadas de CSS, calcular colores derivados en JavaScript, o sobrescribir canales específicos de forma condicional. Ninguno es técnicamente superior; la elección depende de lo que necesites hacer con el valor a continuación en tu hoja de estilos.
HSL: El Formato Diseñado para la Percepción Humana
HSL — Tono, Saturación, Luminosidad — representa los colores tal como los percibimos en lugar de cómo los codifica el hardware. El tono es el color base expresado como un grado en una rueda de color de 360 puntos (0° es rojo, 120° es verde, 240° es azul). La saturación indica qué tan vívido o desvanecido es el color (0% es gris, 100% es completamente saturado). La luminosidad determina el brillo (0% es negro, 100% es blanco, 50% es el color puro).
HSL es especialmente útil para generar paletas de color de forma programática. Para crear una variante más clara, aumenta la luminosidad. Para desaturar, disminuye la saturación. Para cambiar el tono base, ajusta el primer valor. Estas operaciones son ajustes intuitivos en HSL y requerirían tanteo por prueba y error en HEX o RGB. Los sistemas de diseño que definen variantes primarias, claras, oscuras y apagadas de un color suelen calcularlas en HSL y convertirlas a HEX para la salida final.
hsl(9, 100%, 60%) es aproximadamente el mismo naranja-rojo que #FF5733 y rgb(255, 87, 51). En CSS las tres notaciones se renderizan de forma idéntica. La elección entre ellas es una decisión de legibilidad del código: HEX para tokens de diseño y valores estáticos, RGB para transparencia alfa y cálculos con JavaScript, HSL para relaciones de color manipulables por humanos y generación de paletas.
Convierte entre HEX, RGB, HSL y más — ve todas las representaciones de formatos de color lado a lado al instante.
Abrir el Selector de Color →HEX y RGB son dos codificaciones de la misma información — la intensidad de los canales rojo, verde y azul. HEX usa pares hexadecimales compactos; RGB usa valores decimales. Convertir entre ellos es aritmética, y cualquier herramienta de color o panel de desarrollador del navegador lo hace al instante. Donde importa la elección es en el flujo de trabajo: HEX es el estándar universal para copiar-pegar y tokens de diseño, RGB abre la puerta a la transparencia alfa, y HSL hace que las relaciones entre colores sean manipulables de forma intuitiva. Usa el formato que haga más claras tus intenciones CSS en ese punto del código.