Sistemas de Color

Domina cómo aplicar color en CSS con hexadecimal, RGB, HSL, alfa (RGBA) y nombres de color. Verás cómo estos sistemas controlan el background-color, el texto y los bordes, con ejemplos claros para evitar dudas comunes y lograr tonos exactos.

¿Qué formatos de color usar en CSS?

Estos son los formatos más usados para estilos consistentes. Cada uno controla rojo, verde y azul con una lógica distinta, pero todos sirven para definir el mismo resultado: un color en pantalla.

• Hexadecimal (#RRGGBB): valores 0–9 y A–F. Dos dígitos por canal. Empieza con numeral. 000000 es negro. FFFFFF es blanco.
• RGB (rgb(r, g, b)): tres valores del 0 al 255 por canal. 0 apaga el canal, 255 lo lleva al máximo.
• HSL (hsl(h, s%, l%)): tono en grados 0–360, saturación 0–100 %, luminosidad 0–100 %.
• Alfa (rgba): cuarto valor 0–1 para transparencia. 1 es sólido; 0, totalmente transparente.
• Nombres de color: palabras como green o gold. Lista amplia y práctica para ajustes rápidos.

¿Cómo aplicar cada sistema con ejemplos en código?

Cada sistema tiene su sintaxis y rango. La clave es entender cómo se combinan los canales y qué hace cada número en el resultado visual.

¿Cómo funciona el color hexadecimal en CSS?

El formato #RRGGBB combina rojo, verde y azul en alfanumérico 0–9 y A–F. Los dos primeros dígitos son rojo, los dos siguientes verde y los últimos azul.

/* Blanco y negro. */
.box-blanco { background-color: #FFFFFF; }
.box-negro  { background-color: #000000; }

/* Rojo con combinación alta en R y valores menores en G y B. */
.box-rojo   { background-color: #FF5733; }

Claves prácticas: - Empieza con #. Siempre seis dígitos. - FF es el máximo del canal. 00 es el mínimo.

¿Qué hacen rgb y rgba con el color y la transparencia?

En rgb(r, g, b) cada canal va de 0 a 255. Es muy directo para ajustar intensidad por canal y es como se renderizan las imágenes en el navegador: píxel a píxel combinando RGB.

/* Primarios. */
.box-negro  { background-color: rgb(0, 0, 0); }
.box-rojo   { background-color: rgb(255, 0, 0); }
.box-verde  { background-color: rgb(0, 255, 0); }
.box-azul   { background-color: rgb(0, 0, 255); }

/* Azul verdoso medio tenue. */
.box-azul-tenue { background-color: rgb(52, 152, 219); }

Con rgba(r, g, b, a) agregas el alfa para transparencia del 0 al 1.

/* Sólido. */
.box-solida { background-color: rgba(231, 76, 60, 1); }
/* Media transparencia. */
.box-media  { background-color: rgba(231, 76, 60, 0.5); }
/* Más tenue. */
.box-tenue  { background-color: rgba(231, 76, 60, 0.25); }

Pautas rápidas: - Alfa en 1: color 100 % sólido. - Alfa en 0.5: semítransparente. - Alfa en 0.25: muy tenue.

¿Cómo leer y ajustar hsl con tono, saturación y luminosidad?

En hsl(h, s%, l%): - h es el tono en grados 0–360. Se recorre por los principales: del 0 hacia rangos cercanos se perciben rojos; más adelante verdes; después azules. - s es saturación en %: 0 % da grises, 100 % da color puro. - l es luminosidad en %: 0 % es negro, 50 % color “normal”, 100 % blanco.

/* Rojo con saturación media y luminosidad media. */
.box-hsl { background-color: hsl(0, 50%, 50%); }

Nota sobre nombres de color: también puedes declarar colores por nombre cuando necesitas rapidez en background-color o color de texto.

.titulo { color: green; }
.destacado { background-color: gold; }

¿Qué habilidades y conceptos clave practicar?

Potencia tu dominio con estas prácticas. Te darán control fino del color según el contexto de diseño y accesibilidad.

• Identificar canales: rojo, verde y azul en hex, rgb y rgba.
• Usar rangos correctos: 0–9 y A–F en hex; 0–255 en rgb; 0–360/0–100 %/0–100 % en hsl.
• Ajustar saturación para pasar de gris a color puro.
• Controlar luminosidad para moverte de negro a blanco.
• Aplicar alfa para superposiciones y fondos con transparencia.
• Cambiar color en propiedades: background-color, color (texto), border.
• Elegir formato según necesidad: hex para compactar, rgb para precisión por canal, hsl para manipular tono, rgba para transparencia, nombres para rapidez.

¿Con qué formato te sientes más cómodo y por qué? Comparte tu ejemplo favorito en CSS y qué problema de color te ayudó a resolver.