Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales

Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales

En este ejercicio vamos a comprobar la relación que existe entre los web safe colors, los colores rgb, rgba y los colores hexadecimales.

A partir de un web safe colors comprobaremos la traducción de este color en otros sistemas.

Te será útil leer esta entrada

Y hacer este ejercicio:

Pasemos al ejercicio propuesto.

Enunciado

A continuación se te proporciona un código html en el que algunas instrucciones css dentro de la etiqueta <style> están todavía por rellenar.

Rellena las instrucciones según el código de color indicado y usando para cada contenedor la clase indicada.

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="author" content="francesc ricart"/>
 	<title>06 - colores web</title>
 	<style>
		div{
			width:300px;
			height:16px;
			border:1px solid #000000;
			margin:1px;
		}

		/*negro*/
		.negro-safeColor{background-color:black;}
		.negro-rgb{background-color:;}
		.negro-rgba{background-color:;}
		.negro-hex{background-color:;}

		/*gris*/
		.gris-safeColor{background-color:grey;}
		.gris-rgb{background-color:;}
		.gris-rgba{background-color:;}
		.gris-hex{background-color:;}

		/*rojo*/
		.rojo-safeColor{background-color:red;}
		.rojo-rgb{background-color:;}
		.rojo-rgba{background-color:;}
		.rojo-hex{background-color:;}

		/* rgba */
 		.rosa-1{background-color:rgba(255,20,147,);}
		.rosa-2{background-color:rgba(255,20,147,);}
		.rosa-3{background-color:rgba(255,20,147,);}
		.rosa-4{background-color:rgba(255,20,147,);}
		.rosa-5{background-color:rgba(255,20,147,);}
		.rosa-6{background-color:rgba(255,20,147,);}		
		.rosa-7{background-color:rgba(255,20,147,);}
		.rosa-8{background-color:rgba(255,20,147,);}
		.rosa-9{background-color:rgba(255,20,147,);}
		.rosa-10{background-color:rgba(255,20,147,1);}	
 	</style>
 </head>
 <body>

<h2>color negro</h2>
	<div class="negro-safeColor"></div>
	<div class="negro-rgb"></div>
	<div class="negro-rgba"></div>
	<div class="negro-hex"></div>

<h2>color gris</h2>
	<div class="gris-safeColor"></div>
	<div class="gris-rgb"></div>
	<div class="gris-rgba"></div>
	<div class="gris-hex"></div>

<h2>color rojo</h2>
	<div class="rojo-safeColor"></div>
	<div class="rojo-rgb"></div>
	<div class="rojo-rgba"></div>
	<div class="rojo-hex"></div>

<h2>escala cromática del rosa</h2>
	<!-- div.rosa-$*10 -->
	<div class="rosa-1"></div>
	<div class="rosa-2"></div>
	<div class="rosa-3"></div>
	<div class="rosa-4"></div>
	<div class="rosa-5"></div>
	<div class="rosa-6"></div>
	<div class="rosa-7"></div>
	<div class="rosa-8"></div>
	<div class="rosa-9"></div>
	<div class="rosa-10"></div>

 	
 </body>
 </html>
enunciado colores web css
enunciado colores web css

Solución del ejercicio

El negro es el color rgb(0,0,0) o #000;

El gris es el color rgb(127,127,127) o #888;

El rojo es el color rgb(255,0) o #f00;

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="author" content="francesc ricart"/>
 	<title>06- colores web</title>
 	<style>
		div{
			width:300px;
			height:16px;
			border:1px solid #000000;
			margin:1px;
		}

		/*negro*/
		.negro-safeColor{background-color:black;}
		.negro-rgb{background-color:rgb(0,0,0);}
		.negro-rgba{background-color:rgba(0,0,0,1);}
		.negro-hex{background-color:#000000;}

		/*gris*/
		.gris-safeColor{background-color:grey;}
		.gris-rgb{background-color:rgb(127,127,127);}
		.gris-rgba{background-color:rgba(127,127,127,1);}
		.gris-hex{background-color:#888;}

		/*rojo*/
		.rojo-safeColor{background-color:red;}
		.rojo-rgb{background-color:rgb(255,0,0);}
		.rojo-rgba{background-color:rgba(255,0,0,1);}
		.rojo-hex{background-color:#ff0000;}
	/* 
		web safe colors
 		rgb()
 		rgba()
 		hexadecimal, #
 		hay más pero no los veremos en clase
 	*/
	/* rgba */
 		.rosa-1{background-color:rgba(255,20,147,0.1);}
		.rosa-2{background-color:rgba(255,20,147,0.2);}
		.rosa-3{background-color:rgba(255,20,147,0.3);}
		.rosa-4{background-color:rgba(255,20,147,0.4);}
		.rosa-5{background-color:rgba(255,20,147,0.5);}
		.rosa-6{background-color:rgba(255,20,147,0.6);}		
		.rosa-7{background-color:rgba(255,20,147,0.7);}
		.rosa-8{background-color:rgba(255,20,147,0.8);}
		.rosa-9{background-color:rgba(255,20,147,0.9);}
		.rosa-10{background-color:rgba(255,20,147,1.0);}	
 	</style>
 </head>
 <body>

<h2>color negro</h2>
	<div class="negro-safeColor"></div>
	<div class="negro-rgb"></div>
	<div class="negro-rgba"></div>
	<div class="negro-hex"></div>

<h2>color gris</h2>
	<div class="gris-safeColor"></div>
	<div class="gris-rgb"></div>
	<div class="gris-rgba"></div>
	<div class="gris-hex"></div>

<h2>color rojo</h2>
	<div class="rojo-safeColor"></div>
	<div class="rojo-rgb"></div>
	<div class="rojo-rgba"></div>
	<div class="rojo-hex"></div>

<h2>escala cromática del rosa</h2>
	<!-- div.rosa-$*10 -->
	<div class="rosa-1"></div>
	<div class="rosa-2"></div>
	<div class="rosa-3"></div>
	<div class="rosa-4"></div>
	<div class="rosa-5"></div>
	<div class="rosa-6"></div>
	<div class="rosa-7"></div>
	<div class="rosa-8"></div>
	<div class="rosa-9"></div>
	<div class="rosa-10"></div>

 	
 </body>
 </html>
solución resultado final
solución resultado final

¡Hola!

Querido lector,

Deseo que este ejercicio te haya resultado de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.