Colores en CSS: RGB, HEX y HSL

En el desarrollo web, la representación de colores es fundamental para la experiencia de usuario y la identidad visual de un proyecto. Los tres formatos más usados en CSS son RGB, HEX y HSL. Cada uno tiene ventajas y casos de uso específicos. En este artículo profundizamos en sus conceptos, ejemplos, conversiones, accesibilidad y mejores prácticas.

1. Modelo RGB (Red, Green, Blue)

RGB es un modelo aditivo basado en la combinación de luz roja, verde y azul. Cada canal se expresa con un número entero entre 0 y 255 (8 bits). En CSS se escribe como:

/* rojo puro */
color: rgb(255, 0, 0);
/* verde medio */
background-color: rgb(0, 128, 0);

Ventajas:

• Intuitivo para diseñadores que trabajan con iluminación.
• Permite manipular cada canal de forma independiente con calc() o var().

2. Notación HEX (#RRGGBB)

HEX representa los mismos valores que RGB, pero en base 16. Cada par de dígitos corresponde a rojo, verde y azul (00‑FF). Es la forma más compacta y la que históricamente se usó en la web.

/* azul claro */
color: #00aaff;
/* gris medio */
background-color: #777777;

Ventajas:

• Formato corto (3 o 4 dígitos) para colores simples: #f00 es equivalente a #ff0000.
• Amplio soporte en navegadores antiguos.

3. Modelo HSL (Hue, Saturation, Lightness)

HSL separa la matiz (0‑360°), la saturación y la luminosidad (0‑100%). Resulta más natural para crear variaciones de tono, tonos pastel o temas oscuros.

/* verde lima */
color: hsl(120, 100%, 50%);
/* azul pastel con 30% de luz */
background-color: hsl(210, 60%, 70%);

Ventajas:

• Facilita la generación de paletas mediante ajuste de hue, saturation y lightness.
• Mejor control de contraste para accesibilidad.

4. Comparación rápida (uso de dos columnas)

5. Ejemplos prácticos en CSS

A continuación, un pequeño componente UI que muestra cómo combinar los tres formatos.

.card {
  /* Fondo usando HEX */
  background: #1e1e1e;
  /* Borde usando RGB con opacidad */
  border: 2px solid rgba(255, 165, 0, 0.8); /* naranja */
  color: hsl(0, 0%, 100%); /* blanco puro */
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.card:hover {
  /* Aumentamos la luz del color de fondo con HSL */
  background: hsl(210, 15%, 30%);
}

6. Conversión entre formatos (JavaScript)

En algunos casos necesitas transformar un color recibido en HEX a HSL o RGB. A continuación, una función reutilizable:

function hexToHsl(hex) {
  // Elimina el # si está presente
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const r = parseInt(hex.slice(0, 2), 16) / 255;
  const g = parseInt(hex.slice(2, 4), 16) / 255;
  const b = parseInt(hex.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0; // gris
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h = Math.round(h * 60);
  }
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  return `hsl(${h}, ${s}%, ${l}%)`;
}
console.log(hexToHsl('#ff4500')); // → hsl(16, 100%, 50%)

7. Accesibilidad y contraste

El WCAG recomienda una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande. HSL facilita el cálculo del contraste porque solo necesitas ajustar la lightness:

/* Texto blanco sobre fondo azul */
color: hsl(0, 0%, 100%);
background: hsl(210, 50%, 30%); /* luz 30% → contraste alto */

Herramientas recomendadas:

• WebAIM Contrast Checker
• Colorable

8. Buenas prácticas y rendimiento

• Variables CSS: Define tus colores en :root usando el formato que más convenga y reutilízalos con var().

  :root {
    --primary: #0066ff;          /* HEX */
    --primary-rgb: 0, 102, 255;  /* RGB sin la función */
    --primary-hsl: 210, 100%, 50%;
  }
  .button { background: var(--primary); }
  

• Preferencia del usuario: Usa @media (prefers-color-scheme: dark) y adapta los valores HSL para reducir el brillo.
• Minimiza repeticiones: Cuando el mismo color se usa en varios lugares, centralízalo en variables o en un archivo SCSS map.
• Compresión: HEX ocupa menos bytes que RGB; en hojas de estilo muy grandes puede marcar diferencia.
• Evita valores abreviados incorrectos: #abcd no es válido; solo #abc o #aabbcc.

9. Herramientas y recursos

• ColorZilla (extensión de navegador) – selector y generador de gradientes.
• Adobe Color – creación de paletas basadas en HSL.
• CSS Tricks – Convert Hex to RGB
• VS Code – Color Highlight extension para ver colores en línea.

10. Conclusión

RGB, HEX y HSL son tres caras de la misma moneda. Elegir el formato correcto depende del contexto: compactación (HEX), cálculos por canal (RGB) o generación de temas y accesibilidad (HSL). Dominar sus conversiones y buenas prácticas te permitirá crear interfaces más consistentes, accesibles y mantenibles.