Formatos de Color Explicados: Guía de Conversión HEX, RGB, HSL

Cada píxel en tu pantalla está definido por números. Pero el mismo color puede expresarse en múltiples formatos — HEX, RGB, HSL, HSB y más. Entender estos formatos y cuándo usar cada uno te convierte en un desarrollador y diseñador más efectivo.

Los Modelos de Color

RGB (Rojo, Verde, Azul)

RGB es un modelo de color aditivo basado en cómo funcionan las pantallas. Cada píxel es una combinación de luz roja, verde y azul a intensidades variables.

color: rgb(59, 130, 246);       /* Azul sólido */
color: rgba(59, 130, 246, 0.5); /* Azul 50% transparente */

Cada canal va de 0 (nada) a 255 (intensidad máxima):

• rgb(0, 0, 0) = Negro (sin luz)
• rgb(255, 255, 255) = Blanco (toda la luz)
• rgb(255, 0, 0) = Rojo puro

Cuándo usar RGB: Manipulación programática de color, operaciones de canvas, procesamiento de imágenes. RGB se mapea directamente al hardware, lo que hace los cálculos sencillos.

HEX (Hexadecimal)

HEX es simplemente RGB escrito en notación hexadecimal. Cada par de caracteres representa un canal (00-FF):

color: #3B82F6;   /* Mismo azul que rgb(59, 130, 246) */
color: #3B82F680; /* Con 50% de alfa (hex de 8 dígitos) */

La conversión es directa: 3B = 59, 82 = 130, F6 = 246.

Abreviatura: Cuando cada par tiene dígitos idénticos, puedes acortar: #AABBCC → #ABC

Cuándo usar HEX: Hojas de estilo CSS (formato más común), entregas de diseño, guías de marca. HEX es compacto y universalmente entendido.

HSL (Tono, Saturación, Luminosidad)

HSL representa los colores como los perciben los humanos. En lugar de mezclar canales de luz, describes el color por sus propiedades:

• Tono: El ángulo del color en la rueda cromática (0-360°). 0° = rojo, 120° = verde, 240° = azul
• Saturación: Qué tan vívido es el color (0% = gris, 100% = color completo)
• Luminosidad: Qué tan brillante es el color (0% = negro, 50% = color puro, 100% = blanco)

color: hsl(217, 91%, 60%);       /* Mismo azul */
color: hsla(217, 91%, 60%, 0.5); /* Con alfa */

Cuándo usar HSL: Crear paletas de colores, ajustar colores programáticamente (por ejemplo, crear estados hover ajustando la luminosidad), diseño de color accesible. HSL es el formato más intuitivo para el razonamiento humano sobre el color.

HSB/HSV (Tono, Saturación, Brillo/Valor)

HSB es similar a HSL pero define el brillo de manera diferente. Con brillo máximo, obtienes el color puro; con el mínimo, obtienes negro. Este modelo es utilizado por herramientas de diseño como Figma, Sketch y Photoshop.

Diferencia clave con HSL: En HSL, la luminosidad al 50% da el color puro. En HSB, el brillo al 100% da el color puro. Esto hace que HSB sea más intuitivo para algunas tareas pero menos útil en CSS (que no soporta HSB de forma nativa).

Conversión Entre Formatos

Convertir entre formatos involucra matemáticas sencillas. Aquí están las relaciones clave:

HEX a RGB

Divide la cadena hex en pares y convierte cada uno a decimal:

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

RGB a HSL

El algoritmo normaliza los valores RGB a 0-1, encuentra los canales máximo y mínimo, luego calcula el tono basándose en qué canal es dominante, la saturación a partir del rango y la luminosidad a partir del promedio.

En lugar de implementar estas conversiones manualmente, usa nuestro Color Converter para traducir instantáneamente entre cualquier formato.

Aplicaciones Prácticas

Construir Paletas de Color con HSL

HSL sobresale en la generación de paletas consistentes. Mantén el tono constante y varía la saturación y luminosidad:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Más claro */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Más oscuro */
}

Este enfoque garantiza pasos perceptualmente consistentes. ¿Creando una paleta completa a mano? Nuestro Color Palette Generator automatiza este proceso.

Estados Hover y Focus

Con HSL, crear estados interactivos es trivial:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% más oscuro */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% más oscuro */
}

Accesibilidad y 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. El componente de luminosidad en HSL te da una forma intuitiva de asegurar suficiente contraste:

• Fondos claros (luminosidad > 90%) combinan bien con texto oscuro (luminosidad < 30%)
• Fondos oscuros (luminosidad < 20%) combinan bien con texto claro (luminosidad > 80%)

Funciones Modernas de Color en CSS

CSS ahora soporta funciones poderosas de manipulación de color:

/* Sintaxis de color relativo (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Espacio de color perceptualmente uniforme */
color: oklch(0.7 0.15 250);

El formato oklch está ganando adopción porque es perceptualmente uniforme — cambios numéricos iguales producen cambios percibidos iguales, a diferencia de HSL donde un cambio del 10% en luminosidad se ve diferente a diferentes valores de tono.

FAQ

¿Qué formato de color debería usar en CSS?

Para la mayoría de los proyectos, usa HEX para colores simples y HSL cuando necesites crear variaciones o manipular colores programáticamente. HEX es el formato más compacto y ampliamente reconocido. HSL es más legible cuando construyes sistemas de color. CSS moderno soporta todos los formatos de manera intercambiable.

¿Cuál es la diferencia entre HSL y HSB?

HSL y HSB ambos usan tono y saturación, pero definen el brillo de manera diferente. En HSL, la luminosidad al 0% es negro, al 50% es el color puro y al 100% es blanco. En HSB, el brillo al 0% es negro y al 100% es el color puro (sin camino al blanco solo a través del brillo). CSS soporta HSL de forma nativa; HSB se usa principalmente en herramientas de diseño como Figma y Photoshop.

Recursos Relacionados

• Color Converter — Convierte entre HEX, RGB, HSL y HSB al instante
• Color Palette Generator — Genera paletas de colores armoniosas
• Guía de Gradientes CSS — Crea gradientes hermosos con CSS