HEX vs RGB vs HSL: Elige el formato de color correcto para tu proyecto

Códigos de color en el desarrollo web

Cada color que ves en la web está representado por un código. Comprender estos códigos es esencial para los desarrolladores y diseñadores web, no solo para escribir CSS, sino para comunicarse con los diseñadores, depurar problemas de diseño y crear interfaces accesibles.

Hay tres formatos de color principales que encontrarás a diario: HEX, RGB y HSL. Cada uno tiene sus fortalezas y debilidades, y saber cuándo usar cada uno hará tu vida notablemente más fácil.

Colores HEX

HEX (hexadecimal) es el formato de color más común en la web. Ha existido desde los primeros días del HTML, y lo verás en todas partes: en archivos CSS, herramientas de diseño como Figma y Sketch, y guías de marca.

Formato: #RRGGBB

• Cada par representa Rojo, Verde y Azul (0-255)
• Los valores van de 00 (0) a FF (255)
• El prefijo # le indica al navegador que es un color HEX

Ejemplos

• #FF0000 = Rojo puro
• #00FF00 = Verde puro
• #0000FF = Azul puro
• #FFFFFF = Blanco
• #000000 = Negro

Notación abreviada

Cuando cada par tiene dígitos idénticos, puedes abreviar: #FF6633 → #F63

Esto funciona porque el navegador expande cada dígito repitiéndolo: #F63 se convierte en #FF6633. Pero #F37A21 no se puede abreviar porque los dígitos de cada par son diferentes.

HEX con alpha (transparencia)

Los navegadores modernos soportan códigos HEX de 8 dígitos donde los últimos dos controlan la opacidad:

color: #3B82F680;  /* Azul al 50% de opacidad */

El valor alpha 80 en hexadecimal equivale a 128 en decimal, que es aproximadamente el 50% del máximo 255. Algunos valores alpha comunes para recordar:

• FF = 100% (completamente opaco)
• BF = 75%
• 80 = 50%
• 40 = 25%
• 00 = 0% (completamente transparente)

Colores RGB

RGB significa Rojo (Red), Verde (Green), Azul (Blue). Usa números decimales (0-255) para cada canal, lo que muchos encuentran más intuitivo que la notación hexadecimal.

Formato: rgb(red, green, blue)

color: rgb(59, 130, 246);    /* Azul */
color: rgba(59, 130, 246, 0.5);  /* Azul al 50% de transparencia */

La sintaxis moderna de RGB

CSS tiene una sintaxis más nueva que abandona rgba() en favor de solo rgb() con un alpha opcional:

/* Sintaxis moderna -- funciona en todos los navegadores actuales */
color: rgb(59 130 246);           /* sin comas */
color: rgb(59 130 246 / 0.5);    /* alpha con barra */
color: rgb(59 130 246 / 50%);    /* alpha como porcentaje */

Esta sintaxis más limpia es completamente compatible con todos los navegadores modernos y vale la pena adoptar si no estás apuntando a sistemas heredados.

Por qué RGB es útil

RGB brilla cuando necesitas manipular colores mediante programación. Como cada canal es un número simple del 0 al 255, es fácil ajustar colores en JavaScript o en cualquier lenguaje de programación:

// Aclarar un color aumentando todos los canales
function lighten(r, g, b, amount) {
  return [
    Math.min(255, r + amount),
    Math.min(255, g + amount),
    Math.min(255, b + amount)
  ];
}

RGB también es el formato nativo de la mayoría de las APIs de selector de color y bibliotecas de procesamiento de imágenes, evitando así la sobrecarga de conversión.

Colores HSL

HSL significa Tono (Hue), Saturación (Saturation), Luminosidad (Lightness). Es más intuitivo para los humanos porque se corresponde más con la forma en que realmente pensamos sobre el color.

Formato: hsl(hue, saturation%, lightness%)

• Tono: 0-360 (posición en la rueda de color)
  • 0/360 = Rojo
  • 120 = Verde
  • 240 = Azul
• Saturación: 0-100% (de gris a vivo)
  • 0% = completamente desaturado (gris)
  • 100% = completamente saturado (color vivo)
• Luminosidad: 0-100% (de negro a blanco)
  • 0% = negro puro
  • 50% = el color puro
  • 100% = blanco puro

color: hsl(217, 91%, 60%);   /* Azul */
color: hsl(0, 100%, 50%);    /* Rojo */
color: hsl(120, 100%, 50%);  /* Verde */

Por qué HSL revoluciona los sistemas de diseño

El verdadero poder de HSL se hace evidente cuando necesitas crear variaciones de color. Digamos que tu color de marca principal es hsl(217, 91%, 60%). Construir una paleta de tonos completa es trivial:

:root {
  --blue-50:  hsl(217, 91%, 97%);   /* Casi blanco */
  --blue-100: hsl(217, 91%, 93%);
  --blue-200: hsl(217, 91%, 84%);
  --blue-300: hsl(217, 91%, 72%);
  --blue-400: hsl(217, 91%, 60%);   /* Color base */
  --blue-500: hsl(217, 91%, 50%);
  --blue-600: hsl(217, 91%, 40%);
  --blue-700: hsl(217, 91%, 30%);
  --blue-800: hsl(217, 91%, 20%);
  --blue-900: hsl(217, 91%, 10%);   /* Casi negro */
}

Mantienes el mismo tono y saturación, y solo ajustas la luminosidad. El resultado es un conjunto armonioso de tonos que parecen pertenecer juntos. Intenta hacer eso con códigos HEX: necesitarías una calculadora o una herramienta de diseño.

Creando armonías de color con HSL

Como el tono es una posición en la rueda de color (0-360 grados), crear armonías de color es solo aritmética:

• Complementario: agrega 180 al tono (hsl(217, 91%, 60%) → hsl(37, 91%, 60%))
• Triádico: agrega 120 y 240 (hsl(217, ...), hsl(337, ...), hsl(97, ...))
• Análogo: agrega/resta 30 (hsl(187, ...), hsl(217, ...), hsl(247, ...))

Esta es una de las razones por las que muchos sistemas de diseño y frameworks CSS usan HSL internamente.

HSL con alpha

Al igual que RGB, HSL soporta transparencia:

color: hsl(217, 91%, 60%, 0.5);      /* Sintaxis antigua */
color: hsl(217 91% 60% / 50%);       /* Sintaxis moderna */

Colores con nombre de CSS

CSS también incluye 147 colores con nombre como red, steelblue, papayawhip y rebeccapurple. Son convenientes para prototipos o demos rápidas, pero rara vez los ves en código de producción porque:

• No son flexibles (no puedes ajustar fácilmente el brillo o la opacidad)
• Los nombres pueden ser confusos (darkgray en realidad es más claro que gray)
• Los colores de tu marca nunca coincidirán exactamente con un color con nombre

Dicho esto, transparent y currentColor son dos valores con nombre genuinamente útiles. currentColor hereda el color de texto actual, lo cual es útil para iconos SVG y bordes que deben coincidir con el texto circundante.

Cuándo usar cada uno

Formato	Ideal para
HEX	Colores en línea rápidos, la mayoría de CSS, guías de marca
RGB/RGBA	Manipulación programática de color, trabajo con canvas
HSL/HSLA	Sistemas de diseño, creación de paletas de tonos, tematización

Mi recomendación práctica: usa HSL como predeterminado para nuevos proyectos. Define los colores de tu tema como propiedades personalizadas HSL y obtendrás una alternancia fácil entre modo claro/oscuro ajustando los valores de luminosidad. Cuando pegues colores desde herramientas de diseño, HEX está bien; solo conviértelo a HSL para tus variables.

Fórmulas de conversión de color

HEX a RGB

Divide la cadena hexadecimal de 6 dígitos en tres pares y convierte cada uno de hexadecimal a decimal:

#3B82F6 → 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGB a HSL

Esta conversión implica más matemáticas. Los pasos aproximados:

1. Normaliza R, G, B al rango 0-1 (divide por 255)
2. Encuentra los valores máximo y mínimo
3. Luminosidad = (max + min) / 2
4. Si max es igual a min, la saturación es 0 (gris)
5. De lo contrario, calcula la saturación basada en la luminosidad
6. Calcula el tono basado en qué canal es el máximo

No necesitas memorizar esto, usa una herramienta. Pero entender la relación te ayuda a depurar problemas de color.

Errores comunes de color y cómo evitarlos

1. Ignorar las relaciones de contraste

WCAG 2.1 requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande. Ese texto gris claro sobre fondo blanco puede parecer elegante en tu maqueta, pero no cumple con los estándares de accesibilidad y es genuinamente difícil de leer bajo luz solar brillante o en monitores baratos.

2. Usar negro puro sobre blanco puro

#000000 sobre #FFFFFF crea el contraste máximo (21:1), lo que puede causar fatiga visual durante la lectura prolongada. Muchos sistemas de diseño usan una combinación ligeramente más suave como #1a1a1a sobre #FAFAFA, que aún pasa WCAG AAA siendo más amigable con los ojos.

3. No probar los colores en contexto

Un color que luce genial como muestra pequeña puede ser abrumador cuando se aplica a un área de fondo grande. Siempre prueba tus colores a escala real: llena toda una pantalla con el color de fondo y coloca texto real sobre él antes de comprometerte.

4. Demasiados colores

Un error común de principiantes es usar demasiados colores distintos. La mayoría de los sitios profesionales se limitan a 2-3 colores primarios más una paleta neutral (grises). Si te encuentras buscando un sexto o séptimo tono distinto, da un paso atrás y simplifica.

5. Depender solo del color

Nunca uses el color como el único medio para transmitir información. Si los mensajes de error solo están marcados con texto rojo, los usuarios daltónicos (aproximadamente el 8% de los hombres) los perderán. Siempre combina color con iconos, patrones o etiquetas de texto.

Flujo de trabajo de color real

Aquí hay un flujo de trabajo práctico que funciona bien para la mayoría de los proyectos web:

1. Elige un tono principal en HSL (por ejemplo, hsl(217, 91%, 60%))
2. Genera una escala de tonos variando la luminosidad del 5% al 97%
3. Elige un gris neutro con un toque de tu tono principal (por ejemplo, hsl(217, 10%, 50%))
4. Genera tonos de gris de la misma manera
5. Agrega colores de acento con moderación: uno para éxito (verde), uno para error (rojo), uno para advertencia (ámbar)
6. Verifica el contraste para cada combinación texto/fondo
7. Define todo como propiedades personalizadas CSS para que cambiar de tema sea sencillo

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 93%);
  --primary-dark: hsl(217, 91%, 35%);
  --text: hsl(217, 15%, 15%);
  --text-muted: hsl(217, 10%, 45%);
  --surface: hsl(217, 20%, 98%);
  --error: hsl(0, 72%, 51%);
  --success: hsl(142, 71%, 45%);
}

Intenta ajustar el color a continuación para ver cómo se representa el mismo color en los formatos HEX, RGB y HSL:

Convierte colores ahora

Usa nuestro Selector y Convertidor de Colores para convertir instantáneamente entre HEX, RGB, HSL y RGBA. También puedes verificar las relaciones de contraste con nuestro Verificador de Contraste de Colores.