26 Nov Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
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!
Entradas relacionadas:
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
¿Existe alguna herramienta gratuita, rápida y sencilla de usar para dibujar el croquis de una maqueta web? + info en la publicación.
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
No Comments