CSS desde cero (2020) | 8.4 - Notación Hexadecimal

Julian Levy@julianilevy

Por lo visto en el vídeo, entendemos que el sistema hexadecimal usa 16 símbolos distintos:

  • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 para representar esos mismos números.

  • A, B, C, D, E, F para representar los números 10, 11, 12, 13, 14, 15.

También sabemos que en hexadecimal podemos representar los 3 canales RGB usando 3 pares de valores, o sea, un par para cada canal:

  • Los 2 primeros valores para R (Red).

  • Los 2 valores del medio para G (Green).

  • Los 2 últimos valores para B (Blue).

Por ejemplo: con el valor hexadecimal #19BD1E, asignamos 19 a R, BD a G, y 1E a B.

Sabiendo todo lo anterior, ¿Cómo convertimos cualquier valor hexadecimal en RGB? Esto es bastante simple, tenemos que hacer lo siguiente en los 3 canales (R,G y B): multiplicar el primer valor * 16, y al resultado de esa multiplicación sumarle el segundo valor.

De manera que la explicación quede lo más clara posible, vamos a convertir el hexadecimal del ejemplo (#19BD1E) en RGB:

  • Para el canal R: multiplicamos 1 (primer valor) * 16, lo que nos da un resultado de 16. A eso le sumamos 9 (segundo valor), lo que nos termina dando 25.

  • Para el canal G: multiplicamos B (11, primer valor) * 16, lo que nos da un resultado de 176. A eso le sumamos D (13, segundo valor), lo que nos termina dando 189.

  • Para el canal B: multiplicamos 1 (primer valor) * 16, lo que nos da un resultado de 16. A eso le sumamos E (14, segundo valor), lo que nos termina dando 30.

Habiendo hecho el cálculo en los 3 canales, ya tenemos el valor convertido a RGB (25, 189, 30). Ahora podremos hacer la misma conversión con cualquier otro valor hexadecimal sin ningún problema.

Espero que les sea de utilidad.


Escribe una respuesta

Pregunta a ChatEDT