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:

Ejemplo de efecto parallax mediante propiedades de background
Como generar un parallax en una página web. Incluye ejemplo.

Genera una escala cromática con css
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.

Ejercicio nivel básico sobre selectores CSS
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.

¿Maquetar con float:left o con display:inline-block? Ejercicio css
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.

Como usar el contador counter() de css
Numerar listas css es como con el Word es posible gracias a la propiedad counter(). Veamos un ejemplo de uso.

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.

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