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:

Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css
Los selectores css a veces son intuitivos y otras veces no. ¿Tienes una buena intuición?. ¿De qué color ser verá? Incluye solución.

Sintaxis CSS básica. Cómo se escribe el CSS.
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.

Resumen de propiedades css para hacer tablas con display:table
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de css.

FontPair, un recurso para emparejar tipografías y alternativas
¿Cómo emparejar tipografías en una página web sin morir en el intento? Pocas decisiones en el mundo web causan tanta controversia. ¿Necesitas herramientas para acertar?

Estilizar un formulario html con css
Ejercicio en el que se estiliza mediante css un formulario html típico. 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.

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