APRENDE ▶ Qué es el Modo de COLOR HEXADECIMAL | CURSO de CSS Básico desde cero 2021 #51

hola y bienvenidos a un nuevo vídeo de este curso de css básico desde cero en este vídeo os quiero hablar sobre el sistema de notación hexadecimal pero antes déjame decirte que si este es el primer vídeo que ves de mi canal este es un canal dedicado a desarrollo web y en él vas a poder encontrar todo lo que necesitas para convertirte en un desarrollador web siempre con las mejores prácticas y con la documentación oficial para respaldar todo lo que digo si tienes algún problema con este vídeo o hay algo que me quieras comentar te dejo un link en la descripción a mi comunidad de discos donde ya somos casi 7000 personas y si quieres preguntarme algo personalmente estoy todos los días en tweets lunes miércoles y viernes a las 10 de la noche hora de españa' y martes y jueves a las 7 de la tarde hora de españa y una vez hechas las presentaciones vamos a ver como dar colores con el sistema hexadecimal la notación hexadecimal es la más común en desarrollo web para dar colores se basa en los mismos principios que l rgb que vimos en el vídeo anterior solo que esta vez lo vamos a escribir en notación hexadecimal este sistema es un sistema basado en 16 valores que van del 0 al 15 esto es un poquito raro porque también utiliza letras utiliza los dígitos del 0 al 9 y las letras de la a la efe y en este tipo de notación también necesitamos 256 valores exactamente igual que teníamos en rgb se compone de 16 caracteres en parejas y esto es porque 16 x 16 son 256 que son los valores que necesitamos para indicar que vamos a usar la notación hexadecimal tenemos que utilizar el símbolo de hash o de almohadilla y a continuación utilizaremos la notación por parejas van a ir dos valores que van a corresponder al canal rojo otros dos que corresponderán al canal verde y otros dos al canal azul antes de continuar con la teoría vamos cómo funciona esto para que no os dejéis voy a quitar esto de aquí que no me hace falta que era para unas pruebas y aquí donde tenemos el background color de box en lugar de utilizar un light coral vamos a ver cómo funciona esto con sistema hexadecimal lo primero es poner la almohadilla que se pone con al xerez y 3 y después si quisiéramos que esto fuera blanco necesitaríamos poner todos los valores al máximo como el valor máximo de hexadecimal es la f el blanco correspondería a 6 efe es porque tienen que ir en parejas entonces tenemos efe efe en el canal rojo efe efe en el canal azul y ff en el canal verde y lo he dicho al revés el segundo es el verde y el tercero el azul si quisiéramos que esto fuera de color negro pues podríamos poner el valor mínimo que son seis ceros y de esta forma tendríamos un color negro si quisiéramos un rojo pues los dos primeros valores tendrían que tener el valor máximo porque este es el canal rojo si quisiéramos un verde pues estos dos valores serían los máximos y si lo quisiéramos azul pues tendríamos estos dos valores al máximo estos son los colores principales el rgb tenéis que tener en cuenta que esto tampoco es algo que tengáis que memorizar lo mismo que os dije con rgb simplemente tenéis que entender cómo funciona no sirve de nada memorizar colores en notación hexadecimal ahora que hemos visto esto vamos a ver que cuando una pareja usa el mismo valor se puede omitir el segundo valor siempre que se haga en las tres parejas es decir si yo tengo un blanco es decir efe efe como las parejas tienen el mismo valor yo puedo dejar esto simplemente en tres efes y con esto le estaremos diciendo que la primera pareja va a estar al máximo que puede la segunda también y la tercera también aquí hay algo que os puede confundir que es que no tienen que ser los mismos valores simplemente se tienen que repetir si quisiera poner un rojo con efe 0 0 me valdría porque en este punto los dos valores serían 0 y en este punto también serían 0 si quisiera un verde podría poner 0 efe 0 y si quisiera un azul podría poner 0 0 efe esto es algo que al principio yo entiendo que es un poco confuso pero al final es practicarlo y llega un momento en el que cuando ves un color en hexadecimal más o menos ya reduces cuál es el color de todas formas visual studio code nos va a dar el mismo color piquer si yo aquí pusiera el light coral que teníamos en un principio si pulsamos aquí arriba como veis en rgb es 240 128 128 y si hacemos clic aquí nos da la versión en hexadecimal que sería f 0 80 80 si os acordáis en rgb os dije que 128 equivale al gris puro que sería lo que está justo entre medias entre 0 y 255 tenemos el 128 en hexadecimal ese color es el 80 si yo aquí pongo 80 80 80 tenemos exactamente el mismo gris que tendríamos con 128 128 128 de hecho si me pongo aquí encima y lo cambiamos a rgb como veis esto es un gris puro que en hexadecimal equivale al 80 80 80 estos son ciertos detallitos que vas aprendiendo pero no los tenéis que memorizar os repito esto es algo que con el tiempo vais vais a asimilando porque lo usáis mucho por si alguien se lo está preguntando este código de aquí no lo podríamos simplificar porque si os dais cuenta si separamos esto en parejas para que lo veáis más claro no hay ninguna pareja que repita valores y se tendrían que repetir tres parejas es decir aquí podría ser 8 800 y yo que sé 77 y esto sí se podría simplificar pero cuando las parejas tienen valores distintos tenemos que utilizar los 6 caracteres no podemos utilizar 3 vamos a dejar esto como estaba y vamos a ver cómo funciona la notación hexadecimal cuando queremos trabajar con transparencias exactamente igual que hacíamos con rgb pero antes déjame decirte que si crees que este contenido es útil y que realmente está aportando valor compártelo en tus redes sociales etiqueta me te dejo por aquí las redes y utiliza el hashtag yo aprendo con dorian que es donde está compartiendo toda la comunidad los logros que va consiguiendo tened en cuenta que cuanto más apoyo reciba el canal más contenido gratuito y de calidad os voy a poder traer y con el tiempo entre todos vamos a poder conseguir que youtube no solo sea un sitio donde hay contenido gratuito sino que además sea un sitio donde el contenido realmente es de calidad y dicho eso vamos a ver cómo funciona la transparencia cuando utilizamos el modo hexadecimal y al igual que hacíamos en el modo rgb cuando trabajamos con hexadecimal también tenemos la opción de añadir un cuarto canal aquí tenemos rg&e si añadimos un cuarto canal podría ser por ejemplo otro 80 que esto equivale al 0.5 esto os lo digo porque si 80 es la mitad entre 0 y 255 en el cuarto canal que va de 0 a 1 el 80 será el 05 sí tenemos sólo tres valores también podemos trabajar de esta forma si yo pusiera un 333 y quisiera darle a un 50% lo lógico sería pensar que si ponemos aquí un 80 esto sería el 50% pero como estamos utilizando la forma abreviada no podemos poner un 80 porque esta pareja no se repite lo más cercano que podríamos poner es un 8 o un 7 estas dos formas nos dejan muy cerquita del 50% esto os lo comento para que lo tengáis en cuenta si en algún momento queréis hacer esto y para que veáis el resultado voy a poner esto como light coral y le voy a dar esta sombra pero con hexadecimal vamos a este boxeador lo voy a poner justo debajo y en lugar de utilizar rgb lo que voy a hacer es un 0 0 0 al 8 y si os dais cuenta si yo comento esto hay una pequeña variación pero muy pequeñita porque este 8 equivale bueno de hecho si nos ponemos encima ya nos lo dice es un hereje vea al 0 0 0 al 0 5 % 0.53 estamos muy cerca del 50% de la misma forma si ponemos aquí un 4 por ejemplo pues le bajaríamos la opacidad y esto equivaldría a un 0.26 en el gba esta es la forma de trabajar con transparencia utilizando notación hexadecimal en el siguiente vídeo vamos a hablar del último modo de color que existe que sería el hs l que es un poquito más complejo pero está más pensado para los humanos que para las máquinas así que muchísimas gracias por ver este vídeo déjame un like y un comentario diciéndome qué te ha parecido suscríbete si aún no lo has hecho y nos vemos en el siguiente vídeo un saludo y hasta luego