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:

Embellecer código html, css o javascript para entenderlo mejor
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.

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.

Pseudo Clases :link, :active, :hover y :visited
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.

Excalidraw, una herramienta para hacer mockups web rápidos
¿Existe alguna herramienta gratuita, rápida y sencilla de usar para dibujar el croquis de una maqueta web? + info en la publicación.

Ejemplo de creación de menú horizontal en CSS: inline-block y float
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.

Dimensiones reales de una caja en CSS
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.

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