Dominando el Color en CSS: Hexadecimal, RGB, HSL y Variables Modernas

Publicado: 05/12/2025 Por: Juan Felipe Orozco Cortés

📚 Contenido de la guía ⌃

Lo que vas a aprender
Mapa rápido
1. Colores hexadecimales
Hex corto
Hex con transparencia
2. RGB y RGBA
¿Por qué sigue siendo tan usado?
3. HSL y HSLA
4. Variables de color (CSS Custom Properties)
Modo oscuro sin drama
5. Accesibilidad básica del color
6. Mini proyecto: paleta completa + botón de tema
Checklist profesional
Conclusión

Elegir y escribir colores parece simple… hasta que tu UI se ve inconsistente, el modo oscuro no cuadra o empiezas a pelear con tonos que “casi” son el mismo azul. En esta guía vamos a dominar los formatos más usados en CSS: hexadecimal, RGB, HSL y las variables de color para construir sistemas de diseño reales.

La meta no es memorizar sintaxis: es aprender cuándo usar cada formato y cómo convertir tu paleta en una arquitectura mantenible.

Lo que vas a aprender

Cómo funciona el color en la web (y por qué a veces “se siente raro”).
Hex corto, largo y con alfa.
rgb() / rgba() con casos reales.
hsl() / hsla() para ajustar tonos como un pro.
Variables CSS para paletas escalables y modo oscuro.
Buenas prácticas de naming y accesibilidad.

Mapa rápido

Piensa así:

HEX: ideal para valores fijos y diseño tradicional.
RGB: perfecto cuando trabajas con transparencia o efectos directos.
HSL: el más cómodo para ajustar tonos, saturación y luminosidad.
Variables: la base de un sistema de diseño moderno (light/dark, tokens, escalas).

<div class="swatches">
  <div class="swatch hex">HEX</div>
  <div class="swatch rgb">RGB</div>
  <div class="swatch hsl">HSL</div>
</div>

.swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.swatch {
  padding: 1.25rem 1rem;
  border-radius: 12px;
  color: white;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.hex { background: #2563eb; }
.rgb { background: rgb(37, 99, 235); }
.hsl { background: hsl(217, 83%, 53%); }

1. Colores hexadecimales

El formato hex representa colores en base 16. La forma clásica es #RRGGBB.

#000000 → negro
#ffffff → blanco
#2563eb → azul tipo “brand”

Hex corto

Cuando cada par es repetido, puedes usar la versión abreviada: #RGB.

#fff → #ffffff
#000 → #000000

Hex con transparencia

También existe #RRGGBBAA (alfa al final). Útil si quieres mantener todo en hex.

/* HEX clásico */
.button-primary{
  background: #2563eb;
  color: #ffffff;
}

/* HEX corto */
.badge{
  background: #0ea; /* equivalente a #00eeaa */
}

/* HEX con alfa */
.overlay{
  background: #0f172a80; /* ~50% de opacidad */
}

2. RGB y RGBA

RGB describe la intensidad de rojo, verde y azul en un rango de 0 a 255. Es el formato más directo cuando necesitas controlar transparencias o hacer overlays.

¿Por qué sigue siendo tan usado?

Es súper explícito.
Se integra muy bien con efectos y sombras.
Es fácil de generar desde JS.

/* RGB */
.alert{
  background: rgb(239, 68, 68);
  color: white;
}

/* RGBA */
.card{
  box-shadow: 0 10px 30px rgba(2, 6, 23, .12);
}

/* Overlay clásico */
.modal-backdrop{
  background: rgba(0,0,0,.5);
}

3. HSL y HSLA

HSL es el formato más “humano” para diseñar:

H (Hue) → el tono (rueda de color).
S (Saturation) → cuán vivo o apagado.
L (Lightness) → qué tan claro u oscuro.

Si tu objetivo es crear variaciones de un mismo color para estados (hover, active, muted), HSL te hace la vida más fácil.

/* Base blue */
:root{
  --brand-h: 217;
  --brand-s: 83%;
  --brand-l: 53%;
}

.button{
  background: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  color: white;
}

.button:hover{
  background: hsl(var(--brand-h) var(--brand-s) 48%);
}

.button:active{
  background: hsl(var(--brand-h) var(--brand-s) 42%);
}

$$ \text{Un color puede verse como un vector } \mathbf{c} = (R,G,B), \quad R,G,B \in [0,255]. $$ $$ \text{En HSL trabajamos con } (H,S,L) \text{ para ajustar el color de forma perceptual.} $$

4. Variables de color (CSS Custom Properties)

Las variables son el paso definitivo entre “poner colores” y construir un sistema de diseño. La regla de oro:

No nombres por color literal (--blue-1).
Nombra por intención (--color-primary, --surface-1).

Así tu UI no se rompe cuando cambias identidad visual.

root{
  /* Brand */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;

  /* Semantic roles */
  --color-primary: var(--brand-600);
  --color-primary-hover: var(--brand-700);

  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f8fafc;
  --surface-2: #f1f5f9;

  /* Text */
  --text-strong: #0f172a;
  --text-muted:  #475569;

  /* Border */
  --border: #e2e8f0;
}

.button{
  background: var(--color-primary);
  color: white;
  border-radius: 10px;
  padding: .75rem 1rem;
}
.button:hover{
  background: var(--color-primary-hover);
}

Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.

← Volver a Guías