Genera una escala cromática con css

Genera una escala cromática con css

En este ejercicio vamos a aplicar el concepto de colores css.

Repasar esta entrada te será de utilidad.

Vayamos al enunciado del ejercicio.

Enunciado

Dado el siguiente código html haz que se represente la escala cromática del color #ff0064

<div id="contenedor">
	<div class="color-1"></div>
	<div class="color-2"></div>
	<div class="color-3"></div>
	<div class="color-4"></div>
	<div class="color-5"></div>
	<div class="color-6"></div>
	<div class="color-7"></div>
	<div class="color-8"></div>
	<div class="color-9"></div>
	<div class="color-10"></div>
<div>
Escala cromática ff0064
Escala cromática ff0064

Solución del ejercicio

Una vez escrito el css que muestre los contenedores como una cuadrícula, el primer paso es averiguar a que color rgba corresponde el #ff0064.

Por ejemplo puedes usar esta página web que transforma los colores de hexadecimal a rgb.

<style>
	#contenedor{
		margin:20px auto;
		width:100%;
		max-width:652px;
		border:1px solid red;
	}
	div[class *= "color-"]{
		width:100%;
		max-width:600px;
		border:1px solid #000000;
		padding:25px;
	}

	.color-1{background-color:rgba(255,0,100,1);}
	.color-2{background-color:rgba(255,0,100,0.9);}
	.color-3{background-color:rgba(255,0,100,0.8);}
	.color-4{background-color:rgba(255,0,100,0.7);}
	.color-5{background-color:rgba(255,0,100,0.6);}
	.color-6{background-color:rgba(255,0,100,0.5);}
	.color-7{background-color:rgba(255,0,100,0.4);}
	.color-8{background-color:rgba(255,0,100,0.3);}
	.color-9{background-color:rgba(255,0,100,0.2);}
	.color-10{background-color:rgba(255,0,100,0.1);}

	</style>

¡Hola!

Querido lector,

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