Aprendiendo HTML y CSS parte 14 – Código Hexadecimal y RGB

Utiliza código hexadecimal para colores específicos.

¿Sabías que hay otras maneras de representar colores en CSS? Una de estas maneras es llamada código hexadecimal, o código hex para abreviarlo. Usualmente utilizamos números decimales, los cuales son símbolos del 0 al 9 para cada dígito. Los hexadecimales (o hex) están basados en 16 números, esto significa que usan dieciséis símbolos distintos. Como en los decimales, los símbolos 0-9 representan los valores del cero al nueve, pero luego, A, B, C, D, E, F representan los valores del diez al quince. Juntos, 0 al F representan un dígito en hexadecimal, dándonos 16 posibles valores totales. Puedes encontrar mas información acerca de los números hexadecimales aquí.

En CSS, podemos usar 6 dígitos hexadecimales para representar colores, dos para cada componente rojo (R), verde (V) y azul (A). Por ejemplo, #000000 es el negro y es también el más bajo valor posible. Puedes encontrar más información acerca del sistema de colores RGB (por las siglas de rojo, verde y azul en inglés) aquí.

Reemplaza la palabra “black” de nuestro color en nuestro elemento body con su representación en código hex, #000000.

 

<style>
body {
background-color: black;
}
</style>

 

  1. Dale a tu elemento body un color de fondo negro.
  2. Usa el código hex en vez de la palabra black. Por ejemplo: body { color: #000000; }

 

Usa código hex para mezclar colores

Habíamos mencionado que el código hex usa 6 dígitos hexadecimales para representar lo colores, dos para cada componente rojo (R), verde (V) y azul (A). De estos tres colores puros (rojo, verde y azul), podemos variar la cantidad de cada uno para crear más de 16 millones de otros colores. Por ejemplo, naranja es rojo puro mezclado con algo de verde y nada de azul. En código hex, esto se traduce en #FFA500. El dígito 0 es el número más bajo en el código hex, y representa completa abstinencia de color. El dígito F corresponde, en cambio al número más alto en código hex y representa el máximo posible de brillo.

Abre nuestro editor online (Try it editor) y reemplaza las palabras de color en nuestro elemento style con su correspondiente código hex.

 

Color Azul Dodger Verde Naranja Rojo
Código Hex #2998E4 #00FF00 #FFA500 #FF0000

 

<style>
.texto-rojo {
color: red;
}
.texto-verde {
color: green;
}
.texto-azul-dodger {
color: blue;
}
.texto-naranja {
color: orange;
}
</style>

<h1 class="texto-rojo">¡Soy Rojo!</h1>

<h1 class="texto-verde">¡Soy Verde!</h1>

<h1 class="texto-azul-dodger">¡Soy Azul Dodger!</h1>

<h1 class="texto-naranja">¡Soy Naranja!</h1>

 

  1. Dale a tu elemetno h1 con texto “¡Soy Rojo!” color rojo usando código hex.
  2. Dale a tu elemetno h1 con texto “¡Soy Verde!” color verde usando código hex.
  3. Dale a tu elemetno h1 con texto “¡Soy Azul Dodger!” color azul dodger usando código hex.
  4. Dale a tu elemetno h1 con texto “¡Soy Naranja!” color naranja usando código hex.

 

Usa código hex abreviado

Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores, y es difícil recordar código hex. Afortunadamente, podemos abreviarlo, por ejemplo, código hex del rojo #FF0000 puede ser abreviado a #F00. Esta versión abreviada da un dígito para el rojo, un dígito para el verde y un dígito para el azul.

Esto reduce el total número de posibles colores a alrededor de 4000, pero el navegador interpretara #FF0000 y #F00 como si fueran exactamente el mismo color.

Intenta usar los códigos hex abreviados par colorear los elementos correspondientes.

Color Cyan Verde Rojo Fuchsia
Código Hex Abreviado #0FF #0F0 #F00 #F0F

 

<style>
.texto-rojo {
color: #FF0000;
}
.texto-fuchsia {
color: #FF00FF;
}
.texto-cyan {
color: #00FFFF;
}
.texto-verde {
color: #00FF00;
}
</style>

<h1 class="texto-rojo">¡Soy Rojo!</h1>

<h1 class="texto-fuchsia">¡Soy Fuchsia!</h1>

<h1 class="texto-cyan">¡Soy Cyan!</h1>

<h1 class="texto-verde">¡Soy Verde!</h1>

 

  1. Dale a tu elemento h1 con texto “¡Soy Rojo!” color rojo usando código hex abreviado.
  2. Dale a tu elemento h1 con texto “¡Soy Fuchsia!” color verde usando código hex abreviado.
  3. Dale a tu elemento h1 con texto “¡Soy Cyan!” color azul dodger usando código hex abreviado.
  4. Dale a tu elemento h1 con texto “¡Soy Verde!” color naranja usando código hex abreviado.

 

Usa valores RGB para darle color a elementos HTML

Otra manera de representar colores en CSS es usando valores RGB.

El valor RGB para el color negro luce asi:

rgb(0, 0, 0)

El valor RGB para el color blanco luce asi:

rgb(255, 255, 255)

 

En vez de usar seis dígitos hexadecimales con el código hex, con RGB puedes especificar la claridad de cada color con un numero entre 0 y 255.

Si hacemos el cálculo, los dos dígitos para cada color son 16 veces 16, que da un total de 256 valores. Así que RGB, que comienza desde cero, tiene exactamente el mismo número de posibles valores que el código hex.

Vamos a reemplazar el código hex del color de fondo en nuestro elemento body con el valor RGB del negro: rgb(0, 0, 0)

 

<style>
body {
color-fondo: #000;
}
</style>

 

  1. Tu elemento body debe tener un fondo color negro.
  2. Usa RGB para darle a tu elemento body el color de fondo negro. Por ejemplo: body { background-color: rgb(255, 165, 0); }

 

Usa RGB para mezclar colores en HTML

Así como en el código hexadecimal, puedes mezclar colores en RGB usando combinaciones de diferentes valores.

Reemplaza el color de las palabras en nuestro elemento style con su correspondiente valor RGB.

 

Color Azul Rojo Lila Ocre
RGB rgb(0, 0, 255) rgb(255, 0, 0) rgb(218, 112, 214) rgb(160, 82, 45)

<style>
.texto-rojo {
color: #FF0000;
}
.texto-lila {
color: #DA70D6;
}
.texto-ocre {
color: #C58A3E;
}
.texto-azul {
color: #0000FF;
}
</style>

<h1 class="texto-rojo">¡Soy Rojo!</h1>

<h1 class="texto-lila">¡Soy Lila!</h1>

<h1 class="texto-ocre">¡Soy Ocre!</h1>

<h1 class="texto-azul">¡Soy Azul!</h1>

 

  1. Dale a tu elemento h1 con texto “¡Soy Rojo!” color rojo usando RGB.
  2. Dale a tu elemento h1 con texto “¡Soy Lila!” color rojo usando RGB.
  1. Dale a tu elemento h1 con texto “¡Soy Ocre!” color rojo usando RGB.
  2. Dale a tu elemento h1 con texto “¡Soy Azul!” color rojo usando RGB.

 

 

Con esta tarea damos por finalizada ésta entrega y la guía para aprender HTML y CSS. Para seguir y completar nuestra App necesitaremos conocimientos de Bootstrap, al cual le dedicaremos otra guia, que puedes comenzar aquí.

También puedes regresar a la anterior entrada si deseas.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *