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>

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!