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.