Color RGB

El modelo RGB describe los colores combinando tres luces de color: rojo (Red), verde (Green) y azul (Blue). Es un modelo aditivo —sumar más luz produce colores más claros— y es la base de todas las pantallas digitales: monitores, móviles y televisores emiten luz RGB para crear cualquier color visible.

La notación rgb() en CSS

En CSS, el color se especifica con tres valores entre 0 y 255:

color: rgb(255, 0, 0);       /* rojo puro */
color: rgb(0, 128, 255);     /* azul eléctrico */
color: rgb(100, 100, 100);   /* gris medio */

También puedes usar porcentajes:

color: rgb(100%, 50%, 0%);   /* naranja */

Colores de referencia

Opacidad con rgba()

Para colores semitransparentes, el cuarto parámetro controla el canal alfa:

background-color: rgba(0, 0, 0, 0.5);   /* negro al 50 % de opacidad */
color: rgba(255, 255, 255, 0.8);          /* blanco casi opaco */
border: 1px solid rgba(128, 0, 0, 0.3);  /* borde burdeos muy sutil */

El valor alfa va de 0 (invisible) a 1 (totalmente opaco). A partir de CSS Color Level 4, puedes usar directamente rgb() con cuatro parámetros —la diferencia entre rgb() y rgba() ha desaparecido en los navegadores modernos.

¿Cómo mezclar colores con RGB?

El modelo aditivo funciona así:

• Rojo + Verde = Amarillo → rgb(255, 255, 0)
• Rojo + Azul = Magenta → rgb(255, 0, 255)
• Verde + Azul = Cian → rgb(0, 255, 255)
• Los tres al máximo = Blanco → rgb(255, 255, 255)
• Los tres a 0 = Negro → rgb(0, 0, 0)

Para aclarar un color RGB basta con acercar los tres valores a 255; para oscurecerlo, acercarlos a 0. Sin embargo, ajustar el tono resulta poco intuitivo con RGB: si quieres girar el matiz 30°, tendrás que recalcular los tres canales. Para eso es más cómodo Color HSL, donde el matiz, la saturación y la luminosidad son parámetros directos.

RGB frente a HEX

La notación rgb() y el código HEX representan exactamente el mismo espacio de color. La elección es principalmente de legibilidad:

• HEX (#FF8800) es más compacto y lo que copian los diseñadores desde Figma o Photoshop.
• RGB es más legible para los desarrolladores que necesitan entender o manipular los valores individualmente.
• RGBA es imprescindible cuando necesitas transparencia y no quieres usar la notación HEX de 8 dígitos.

¿Qué es el espacio de color sRGB?

La mayoría de pantallas y navegadores usan el perfil sRGB (standard RGB), que cubre aproximadamente el 72 % del espectro visible. Pantallas de alta gama como las OLED o P3 cubren una gama más amplia; CSS Color Level 4 permite especificar colores fuera de sRGB con color(display-p3 1 0.5 0). Para el trabajo web cotidiano, sRGB es el estándar universal y es el espacio que usan las funciones rgb() y rgba().