Sintaxis de color: keywords, hex, rgb y hsl

En CSS hay cuatro formas principales de especificar un color exacto. Son equivalentes: el navegador los convierte internamente al mismo formato. Elegís la que mejor se adapta al contexto.

1. Keywords — el nombre del color

CSS incluye 148 palabras clave de color con nombre. Son la forma más legible:

.alerta    { background-color: red; }
.aprobado  { background-color: green; }
.titulo    { color: navy; }
.boton     { background-color: teal; }

Keywords útiles: red, green, blue, teal, navy, orange, purple, pink, black, white, gray, coral, salmon.

transparent — keyword especial: equivale a rgba(0, 0, 0, 0). Útil para bordes invisibles que no colapsan el layout o para transiciones desde transparente.

2. Hexadecimal — `#RRGGBB` y `#RGB`

El formato hex especifica los tres canales de color (Rojo, Verde, Azul) como pares hexadecimales de 0 a FF (0–255 en decimal):

.boton  { background-color: #3a7bd5; }   /* R=0x3a=58, G=0x7b=123, B=0xd5=213 */
.alerta { background-color: #e53e3e; }   /* rojo */
.fondo  { background-color: #1a1a2e; }   /* azul muy oscuro */

El atajo #RGB: cuando cada par tiene los dos dígitos iguales, podés escribirlo con uno solo por canal:

#f00  →  #ff0000  (rojo puro)
#333  →  #333333  (gris oscuro)
#abc  →  #aabbcc  (azul grisáceo)

Si los dígitos de algún canal son distintos (#3a7bd5), el atajo no aplica.

También existe #RRGGBBAA (hex con canal alfa), pero el canal alfa se practica mejor con rgba().

3. `rgb()` — canales 0–255

rgb() especifica el color con tres números: rojo, verde, azul, cada uno de 0 a 255:

.precio { color: rgb(37, 99, 235); }          /* azul */
.titulo { color: rgb(220, 38, 38); }           /* rojo */
.fondo  { background-color: rgb(241, 245, 249); } /* gris muy claro */

Rango: cada canal va de 0 a 255 (enteros). No confundas con el canal alfa de rgba(), que va de 0 a 1.

rgba() es un alias de rgb() — son idénticos en CSS moderno. Para colores con transparencia, se practica en la siguiente lección.

La sintaxis moderna sin comas (rgb(37 99 235)) también es válida. Se enseña la versión con comas porque es más legible y más familiar.

4. `hsl()` — matiz, saturación, luminosidad

hsl() describe el color en términos humanos:

.verde    { background-color: hsl(120, 50%, 40%); }  /* verde medio */
.azul     { background-color: hsl(210, 70%, 55%); }  /* azul brillante */
.gris     { background-color: hsl(0, 0%, 50%); }     /* gris neutro */

Parámetro	Rango	Qué controla
Hue (H)	0–360 (sin `%`)	La rueda cromática: 0/360=rojo, 60=amarillo, 120=verde, 240=azul
Saturation (S)	0%–100%	0% = gris neutro, 100% = color puro y vivo
Lightness (L)	0%–100%	0% = negro, 50% = color “normal”, 100% = blanco

Por qué hsl() es más intuitivo para ajustar colores:

/* Variaciones del mismo azul — solo cambia 1 parámetro */
.azul-base   { background-color: hsl(210, 70%, 55%); }
.azul-claro  { background-color: hsl(210, 70%, 75%); }  /* más claro */
.azul-oscuro { background-color: hsl(210, 70%, 35%); }  /* más oscuro */
.azul-vivo   { background-color: hsl(210, 95%, 55%); }  /* más saturado */

Con hex o rgb, cambiar el tono requiere conocer la relación entre los tres canales. Con hsl, “aclarar” o “girar el matiz” son operaciones directas.

hsla() es un alias de hsl(), igual que rgba()/rgb().

El navegador canoniza todos los formatos

Internamente, el navegador convierte cualquier sintaxis de color a rgb() o rgba(). Por eso el validador compara el efecto, no el texto:

Escribís	El navegador computa
`teal`	`rgb(0, 128, 128)`
`#e53e3e`	`rgb(229, 62, 62)`
`rgb(37, 99, 235)`	`rgb(37, 99, 235)`
`hsl(120, 50%, 40%)`	`rgb(51, 153, 51)`

Esto significa que si escribís rgb(0, 128, 128) en lugar de teal, el check igual pasa — es el mismo color.

Tu turno: aplicá las cuatro sintaxis a los elementos de la tarjeta y verificá con “Comprobar”. Cada tarea usa una notación diferente.