Colores y fondo en CSS, atributos y propiedades

5. Colores y fondo

Los valores de los colores se pueden definir mediante su nombre, en código hexadecimal (#RRGGBBAA) o mediante sus valores en los siguientes formatos:

• RGB (Red, Green, Blue)
• HSL (Hue, Saturation, Lightness)
• RGBA (Red, Green, Blue, Alpha) 
• HSLA (Hue, Saturation, Lightness, Alpha)

5.1. Tabla de colores básicos

HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:

Table 5.1. Colores básicos

Color	Nombre	HEX	RGB
	black	#000000	0,0,0
	white	#ffffff	255,255,255
	red	#ff0000	255,0,0
	blue	#0000ff	0,0,255
	yellow	#ffff00	255,255,0
	gray	#808080	128,128,128
	green	#008000	0,128,0

Ejemplo de colores en hexadecimal con transparencia:

0

5.2. Propiedades más utilizadas

Algunas de las propiedades relacionadas con el color y el fondo más utilizadas son las siguientes:

Tabla 5.2: Propiedades colores y fondo

Propiedad	Descripción	Valores
color	Color del texto	RGB | HSL | HEX | nombre del color | RGBA | HSLA
background-color	Color de fondo	RGB | HSL | HEX | nombre del color | RGBA | HSLA
background-image	Imagen de fondo	url(«…») | none
background-repeat	Repetición de la imagen de fondo	repeat | repeat-x | repeat-y | no-repeat
background-attachment	Desplazamiento de la imagen de fondo	scroll | fixed
background-position	Posición de la imagen de fondo	percentage | length | left | center | right
background-size	Tamaño de la imagen de fondo	valor
Opacity	Transparencia de un elemento	[ 0 – 1 ] (0 → totalmente transparente)

Ejercicio propuesto

Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.

.a { background-color: red; }
.b { background-color: #FF0000; }
.c { background-color: RGB(255,0,0); }
.d { background-color: HSL(0,100%,50%); }
.e { background-color: red; opacity: 0.5; }
.f { background-color: rgba(255, 0, 0, 0.5); }

0

Ejercicio propuesto

Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:

body { background-image: url("https://bit.ly/2slA7jo");}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}

dark

Ejercicio propuesto

La propiedad background-attachment indica si una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:

body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}

dark

Comprueba tu aprendizaje