Color en CSS
Nombres y hexadecimal
La forma más simple: nombres de color predefinidos.
p { color: red; }
h1 { background-color: lightblue; }Son fáciles de leer, pero hay un número limitado y no dan control fino. Para eso están los valores hexadecimales: seis dígitos (0-9 y A-F) que representan rojo, verde y azul, dos dígitos cada uno.
body { color: #ff0000; } /* rojo puro */
div { background-color: #00ff00; } /* verde puro */#ff0000 es rojo al máximo (255), sin verde ni azul. Cuanto más alto el número en cada par, más intenso ese color.
RGB y transparencia con RGBA
rgb() es lo mismo que el hexadecimal, pero escrito en números del 0 al 255 en vez de dígitos hexadecimales — muchas veces más fácil de leer.
p { color: rgb(255, 0, 0); }rgba() agrega un cuarto número: qué tan transparente es el color, de 0 (invisible) a 1 (sólido).
div {
background-color: rgba(0, 0, 255, 0.5);
}Esto es algo que un color con nombre o hexadecimal no puede hacer — para transparencia, rgba() es la herramienta.
Probá vos
Ponele a .fondo un color de fondo semi-transparente con rgba() (el cuarto valor, el de transparencia, tiene que ser menor a 1), y al texto h1 un color usando cualquiera de las formas que viste.
Reconocer formas de color
Responde estas preguntas para verificar tu comprensión.