X

Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales

ejercicio sobre colores web

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

Y hacer este ejercicio:

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>
enunciado colores web css

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>
solución resultado final

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

¿Te ha gustado esta publicación?