HEX, RGB y HSL: qué cambia y qué no

Un color, tres notaciones útiles

Aurora Indigo puede escribirse como #4F46E5, rgb(79 70 229) o, aproximadamente, hsl(243 75% 59%). El navegador resuelve cada declaración como un color sRGB. Con los valores HSL redondeados que se muestran aquí, el resultado puede diferir en el valor de algún canal después de una conversión de ida y vuelta; conservar más precisión elimina la mayor parte de esa desviación.

.sample {
  color: #4F46E5;
  color: rgb(79 70 229);
  color: hsl(243.4 75.4% 58.6%);
}

Cómo se corresponde un HEX de seis dígitos con RGB

Un valor HEX de seis dígitos consta de tres números hexadecimales de dos dígitos en el orden #RRGGBB. Cada pareja va de 00 a FF, es decir, de 0 a 255 en decimal. En #4F46E5, 4F se convierte en 79 de rojo, 46 en 70 de verde y E5 en 229 de azul.

• RR controla el canal rojo de sRGB.
• GG controla el canal verde de sRGB.
• BB controla el canal azul de sRGB.
• Una cuarta pareja opcional en #RRGGBBAA controla el canal alfa.

El HEX de tres dígitos solo es una abreviatura cuando cada pareja completa repite el mismo dígito: #4AE se expande como #44AAEE. No permite representar todos los colores de seis dígitos, por lo que #4F46E5 no tiene una abreviatura exacta de tres dígitos.

Cuándo RGB es la opción más clara

La sintaxis moderna rgb() muestra directamente los mismos canales rojo, verde y azul. Los canales enteros suelen usar valores de 0 a 255, mientras que los porcentuales van de 0% a 100%. Una barra introduce el canal alfa sin necesidad de cambiar a una función rgba() independiente.

.solid {
  background: rgb(79 70 229);
}

.translucent {
  background: rgb(79 70 229 / 60%);
}

• Usa RGB cuando los valores de los canales procedan de una imagen, una API o una herramienta basada en bytes.
• Usa la sintaxis con barra cuando la opacidad pertenezca al color y no al elemento completo.
• Mantén una misma convención numérica dentro de un componente para facilitar su revisión.

Qué facilita HSL y qué no

HSL separa el ángulo de tono, la saturación y la luminosidad. Girar el tono resulta práctico para establecer relaciones deterministas, mientras que modificar la saturación o la luminosidad es más fácil de razonar que editar por separado tres canales RGB.

• El tono 0° es rojo, 120° es verde sRGB y 240° es azul sRGB.
• Una saturación de 0% produce un gris acromático; 100% usa la máxima saturación HSL para ese tono y esa luminosidad.
• Una luminosidad de 0% es negro, 50% es el punto medio del modelo HSL y 100% es blanco.

Por qué a veces difieren los valores convertidos

La conversión de RGB a HSL suele producir valores fraccionarios. Si una herramienta redondea el tono, la saturación y la luminosidad para mostrarlos, convertir esos números redondeados de nuevo a RGB puede desplazar uno o varios canales en una pequeña cantidad. Es un problema de precisión, no una prueba de que una notación tenga un rango más amplio.

• Conserva el valor HEX o RGB original como fuente canónica cuando importen los bytes sRGB exactos.
• Mantén los decimales de HSL durante los cálculos y redondea solo para presentar el resultado.
• Al comprobar la igualdad, compara los valores resueltos de los canales y no las cadenas visibles.
• No conviertas y sobrescribas repetidamente el valor de origen dentro de un flujo de edición.

¿Qué formato conviene utilizar?

No existe una notación universalmente superior. Elige según cómo se genera y mantiene el valor. El navegador puede representar las tres; la diferencia útil reside en la claridad con la que el código fuente comunica la tarea.

• Elige HEX para tokens sRGB compactos y estables y para valores copiados de herramientas de diseño habituales.
• Elige RGB para canales explícitos, cálculos y valores alfa fáciles de leer.
• Elige HSL para girar manualmente el tono o para controles sencillos de saturación y luminosidad.
• Elige OKLCH en lugar de HSL al crear paletas con pasos perceptualmente uniformes.
• Usa propiedades personalizadas de CSS para que los componentes consuman tokens semánticos en vez de repetir valores sin procesar.

:root {
  --color-brand: #4F46E5;
  --color-brand-muted: rgb(79 70 229 / 60%);
}

.button {
  color: white;
  background: var(--color-brand);
}

Lista de comprobación para una conversión

• Confirma que tanto el origen como el destino pretenden describir sRGB.
• Conserva el alfa por separado y comprueba si está expresado como porcentaje o como un número de 0 a 1.
• Mantén suficientes decimales para las conversiones de ida y vuelta.
• Comprueba el contraste del texto después de elegir el fondo definitivo; la notación por sí sola no dice nada sobre accesibilidad.
• Guarda un valor canónico y deriva de él los formatos de presentación.

Color Atlas sigue esta última regla: PostgreSQL almacena el valor HEX canónico revisado, mientras que la página SSR calcula de forma determinista RGB, HSL, HWB, luminancia, contraste y colores relacionados.