🎨
← Volver a guías

HEX vs. RGB vs. HSL: ¿qué formato de color deberías usar?

· Etiquetas: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs. RGB vs. HSL: ¿qué formato de color deberías usar?

CSS ofrece múltiples formas de definir colores, pero los tres formatos más comunes son HEX, RGB y HSL. Cada formato tiene fortalezas distintas, y saber cuándo usar cada uno puede mejorar drásticamente el mantenimiento de tus hojas de estilo y tu capacidad para crear sistemas de color dinámicos. Esta guía desglosa cada formato para que puedas elegir el adecuado para cualquier situación.

Formato de color HEX: el estándar de la industria

Los colores HEX (hexadecimales) son el formato más utilizado en el diseño web. Un color hex se escribe como un # seguido de seis dígitos hexadecimales que representan los valores de rojo, verde y azul en ese orden.

#FF5733
  • #FF — Rojo (255 en decimal)
  • #57 — Verde (87 en decimal)
  • #33 — Azul (51 en decimal)

Variaciones de HEX

HEX admite varias notaciones para diferentes necesidades:

/* Hex estándar de seis dígitos */
color: #FF5733;

/* Abreviado: los pares idénticos se reducen a tres dígitos */
color: #F53; /* Se expande a #FF5533 */

/* Hex de ocho dígitos con canal alfa */
color: #FF573380; /* 50 % de opacidad */

HEX abreviado funciona cuando cada par usa caracteres coincidentes: #AABBCC se convierte en #ABC. Esto es puramente una convención para ahorrar espacio compatible con todos los navegadores.

HEX de ocho dígitos (#RRGGBBAA) añadió transparencia alfa. El valor alfa va de 00 (totalmente transparente) a FF (totalmente opaco). El soporte de navegadores para el hex de 8 dígitos es excelente en todos los navegadores modernos.

Abreviado de cuatro dígitos (#RGBA) también existe: #F538 se expande a #FF553388.

Cuándo usar HEX

  • Copiar y pegar desde herramientas de diseño — Figma, Sketch y Adobe XD generan hex por defecto
  • Colores de marca codificados — El hex es inequívoco y compacto para valores que nunca cambian
  • Documentación y maquetas — El hex es el formato más reconocible entre diseñadores y desarrolladores
  • Propiedades personalizadas de CSS — Almacenar tokens de marca en hex es una práctica común

Cuándo evitar HEX

  • Manipulación programática del color — Ajustar canales individuales requiere analizar cadenas
  • Crear sistemas de color — Generar variantes más claras u oscuras implica cálculos no triviales
  • Comunicar la intención del color — El hex no da ninguna información semántica sobre el color

Formato de color RGB: control de canales

RGB significa Rojo, Verde, Azul. En CSS, se escribe como una función con valores de 0 a 255 o porcentajes (0 % a 100 %).

/* Sintaxis heredada separada por comas */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Sintaxis moderna separada por espacios */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Valores porcentuales */
color: rgb(100% 34% 20%);

Mejoras de la sintaxis RGB moderna

La especificación del Nivel 4 de Color CSS modernizó la función rgb() de dos maneras importantes:

  1. Valores separados por espacios — Las comas ya no son necesarias, lo que hace la sintaxis más limpia
  2. Alfa separado por barra — El alias rgba() ya no es necesario; rgb() ahora acepta un canal alfa opcional

Tanto la sintaxis heredada como la moderna son totalmente compatibles, pero se recomienda la sintaxis moderna para el código nuevo.

Cuándo usar RGB

  • Canvas y WebGL — Las API de datos de imágenes devuelven valores de píxeles en RGB
  • Ajustes numéricos de color — Cuando tienes valores de rojo, verde y azul almacenados como variables separadas
  • Traducir desde especificaciones de diseño — Algunos sistemas de diseño especifican los colores como tríos RGB
  • Trabajar con selectores de color — Muchas interfaces de selectores de color usan controles deslizantes de 0-255

Cuándo evitar RGB

  • Crear paletas de colores cohesivas — Ajustar los tres canales de forma independiente dificulta los ajustes consistentes
  • Legibilidad humana — rgb(123, 45, 67) no da una idea inmediata de qué color representa

Formato de color HSL: colores fáciles para humanos

HSL significa Tono, Saturación y Luminosidad. Este formato es más intuitivo para los humanos porque separa el color en sí (tono) de su intensidad (saturación) y su brillo (luminosidad).

/* Sintaxis heredada */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Sintaxis moderna */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Comprender los canales HSL

Tono (0-360) — El ángulo de color en la rueda de colores. Este es el componente "qué color es":

| Valor de tono | Color | |-----------|---------| | 0 o 360 | Rojo | | 30 | Naranja | | 60 | Amarillo | | 120 | Verde | | 180 | Cian | | 240 | Azul | | 300 | Magenta |

Saturación (0-100 %) — Qué tan intenso o vívido es el color. El 0 % produce un tono de gris; el 100 % es la versión más pura del tono.

Luminosidad (0-100 %) — Qué tan claro u oscuro es el color. El 0 % es siempre negro, el 50 % es la versión "normal" del tono y el 100 % es siempre blanco.

Por qué HSL es superior para sistemas de color

HSL hace que las tareas difíciles en HEX o RGB sean trivialmente simples:

/* Color principal de marca */
--brand: hsl(220, 80%, 50%);

/* Estado de hover: ligeramente más claro */
--brand-hover: hsl(220, 80%, 60%);

/* Estado activo: ligeramente más oscuro */
--brand-active: hsl(220, 80%, 40%);

/* Estado deshabilitado: desaturado */
--brand-disabled: hsl(220, 30%, 70%);

/* Tinte de fondo: muy claro */
--brand-bg: hsl(220, 40%, 95%);

Con HSL, cada variante es un cambio de una variable. Esto es imposible con HEX y engorroso con RGB.

Cuándo usar HSL

  • Crear paletas de colores — HSL es el estándar de facto para la generación de tokens de diseño
  • Temas y modo oscuro — Intercambia los valores de luminosidad para crear variantes de modo oscuro
  • Estados de hover y enfoque — Ajusta la luminosidad en un porcentaje fijo
  • Ajustes de accesibilidad — Aumenta el contraste de luminosidad sin cambiar el color
  • Selectores de color interactivos — Los controles deslizantes de HSL son más intuitivos que los de RGB

Tabla de comparación rápida

| Característica | HEX | RGB | HSL | |---------|-----|-----|-----| | Legibilidad a nivel de píxeles | Pobre | Moderada | Buena | | Semántica de canales | Opaca | Numérica | Perceptual | | Ajuste programático | Difícil | Moderado | Fácil | | Transparencia alfa | Hex de 8 dígitos | rgb(R G B / A) | hsl(H S% L% / A) | | Soporte de navegadores | Excelente | Excelente | Excelente | | Sintaxis moderna | No | Sí | Sí | | Predeterminado de herramientas de diseño | Sí | Común | Raro | | Idoneidad para sistemas de color | Pobre | Regular | Excelente |

Soporte de navegadores: los tres son seguros

HEX, RGB y HSL disfrutan de un soporte de navegadores idéntico. Los tres funcionan en todos los navegadores lanzados desde Internet Explorer 9. La sintaxis moderna separada por espacios (rgb(255 0 0 / 0.5)) es compatible con todos los navegadores lanzados desde 2020. No hay ninguna razón de compatibilidad para elegir uno sobre otro.

Marco práctico de decisión

Elige tu formato según lo que estés haciendo:

  1. ¿Copiando desde una maqueta de diseño? Usa HEX — es lo que generan las herramientas de diseño.
  2. ¿Construyendo un sistema de tokens de diseño? Usa HSL — hace trivial la generación de paletas.
  3. ¿Trabajando con canvas o datos de imágenes? Usa RGB — las APIs de píxeles usan RGB de forma nativa.
  4. ¿Escribiendo una regla de estilo puntual? Usa HEX — es el más compacto.
  5. ¿Creando transiciones de color dinámicas? Usa HSL — interpolar el tono crea efectos de arcoíris; interpolar RGB crea intermedios turbios.

Convierte entre cualquier formato

Usa nuestro conversor de colores en línea gratuito para convertir al instante entre HEX, RGB, HSL y otros formatos de color CSS. No más cálculos manuales ni exploración en los DevTools del navegador.