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>
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!
Deja una respuesta