En resumen: HEX, RGB y HSL describen todos los mismos colores, pero de forma distinta. HEX y RGB son dos notaciones de los mismos valores rojo-verde-azul; el HSL los reexpresa como tono, saturación y luminosidad, mucho más fáciles de ajustar a mano. Saber qué formato usar ahorra muchas conjeturas al igualar o retocar colores.
Un color en la web es al final tres canales — rojo, verde y azul — pero la forma de escribir esos canales cambia lo fácil que es razonar con ellos.
HEX y RGB: lo mismo, escrito dos veces
RGB lista los tres canales directamente: rgb(37, 99, 235). HEX empaqueta los valores idénticos en una cadena hexadecimal: #2563EB, donde 25, 63 y EB son los bytes de rojo, verde y azul. Son intercambiables — HEX es compacto y común en herramientas de diseño, RGB es cómodo en código porque puedes calcular cada canal. Ninguno es más «exacto»; son dos grafías de un mismo color.
HSL: el formato pensado para retocar
HSL describe un color como tono (su posición en la rueda de color, 0–360°), saturación (cuán vivo, 0–100%) y luminosidad (cuán claro, 0–100%). Es el formato para ajustar en vez de reemplazar un color: baja la luminosidad para un estado hover, reduce la saturación para una variante apagada, o desplaza el tono para hallar un color complementario. Hacer los mismos cambios en HEX es adivinar valores de bytes.
Alfa y HEX de 8 dígitos
La transparencia se expresa con un canal alfa: rgba() y hsla() añaden un cuarto valor de 0 (transparente) a 1 (opaco). El CSS moderno también admite HEX de 8 dígitos, donde los dos últimos caracteres codifican el alfa — #2563EB80 es el mismo azul a cerca del 50% de opacidad.
El CMYK es otro mundo
HEX, RGB y HSL son todos modelos de color de pantalla (luz aditiva). El CMYK es para impresión (tinta sustractiva). Una conversión entre ellos siempre es aproximada porque no pueden reproducir exactamente la misma gama, así que trata una conversión pantalla-a-impresión como un punto de partida a comprobar, no como una coincidencia exacta.
Un flujo práctico
- Pega el color de partida — en cualquier formato — en el Convertidor de Colores para ver todos los formatos a la vez.
- Cambia a HSL para construir variantes: ajusta la luminosidad para los estados, la saturación para los tonos apagados.
- Añade alfa con
rgba()/hsla()o el HEX de 8 dígitos donde necesites transparencia. - Usa la vista previa del degradado para generar un fragmento CSS listo para dos o más colores.
Si trabajas una paleta en lote, convierte varios colores a la vez (separados por comas o saltos de línea) y ten los resultados junto a tus notas con el Contador de Caracteres.
Errores comunes que evitar
- Retocar colores en HEX cuando HSL haría obvio el ajuste.
- Esperar que una conversión CMYK coincida exactamente con la pantalla.
- Olvidar el canal alfa y obtener un color opaco donde querías transparencia.
- Mezclar formatos de forma incoherente en una hoja de estilos.