Ejercicio web safe colors, rgb, rgba y colores hexadecimales

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

Posted at 23:36h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS by Francesc Ricart 0 Comments

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

Colores css para web

Y hacer este ejercicio:

Genera una escala cromática con css

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>

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>

¡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!

Entradas relacionadas:

Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"

Estilizar un formulario html con css
Ejercicio en el que se estiliza mediante css un formulario html típico. Incluye solución.

Ejemplo de menú vertical con submenú desplegable vertical (CSS)
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.

Ejercicio sobre equivalencia entre em y px de CSS
¿Cómo afectaría a una página web un simple cambio como puede ser la propiedad font-size de un párrafo? Incluye solución.

Elementos en línea. Elementos bloque. Elementos inline-block.
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...

Diferencia entre visibility:hidden; y display:none;
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.

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

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

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

Enunciado

Solución del ejercicio

Entradas relacionadas:

Francesc Ricart

No Comments

Post A Comment