El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Entiende las formas de expresar y usar colores en CSS

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
10:27
  Añadir a marcadores

Transcripción

¿Cuántas veces no te has enfrentado a esos conceptos de colores en CSS que no sabes qué significan, o por qué deberías usar una u otra opción? O simplemente "Yo soy desarrollador, ¿qué tengo que saber sobre teoría del color y esas cosas raras? ¡Nada!" Pues, si te das el espacio, esas cosas raras realmente no lo son tanto. Al contrario, si entiendes de qué se tratan, puedes lograr resultados visuales muy interesantes. Los colores en CSS digamos que vienen en varios sabores, hexadecimales, RGB y HSLA, con sus respectivas variantes con el canal alpha y los más sencillos que son los nombres de los colores. Si bien el objetivo no es saber la razón absoluta de cada tipo de color, sí lo es saber su estructura. Por ejemplo, los colores hexadecimales están basados en un sistema de seis caracteres entre números y letras para representar los canales de los colores primarios. Los tipos RGB especifican el color en términos de intensidad de los colores primarios. Mientras que los de tipo HSLA generan colores basados en los conceptos de tono, saturación y luminosidad. Estos dos tienen un canal alpha para trabajar con la transparencia u opacidad de cada color. Y los más sencillos son los nombres de colores que lo único que tenemos que hacer es revisar la paleta existente y elegir el que más deseemos. Como ves, hay formas de uso de colores para todos los gustos y especialidades. Experimentemos un poco con estos métodos. Para ese ejemplo utilizaremos tres divisiones. Una división dedicada al azul, otro al color rojo y otro al color verde. Estas divisiones podemos verlas aquí en pantalla donde ya tenemos un primer estilo que está definiendo la forma del cuadro y la está centrando. Vamos a escribir el estilo para el color azul. En este caso, vamos a escribir el nombre de la clase, y será azul, y aquí adentro podremos definir cualquiera de los tres colores. De hecho, las definiciones de colores que se manejan con CSS trabajan con tres canales de colores, lo que sería el color rojo, el color azul y el color verde. La idea es que tú puedas ir adicionando colores conforme los vayas necesitando. Es decir, si necesitas más rojo o más verde, o necesitas cualquier cantidad de esos colores simplemente los vas agregando. Es por eso que en este caso se trabajan con los tipos de colores. El primer color que nosotros podemos utilizar, vamos a mandarlo aquí con el background-color, es el color hexadecimal. El color hexadecimal tiene una forma muy peculiar, ya que se compone del símbolo de numeral, "gato" o "michi", dos espacios dedicados al color rojo, dos espacios dedicados al color verde, y dos espacios dedicados al color azul. De hecho, para que mantengamos este orden, vamos a escribirlo de esta forma y listo. Ahora, esta forma de colores va a definir lo que es un color hexadecimal. Igual, voy a comentar esto. Y la idea de un color hexadecimal es que tengamos números enteros entre el 0 y el F, es decir, yo voy a poder estar asignando colores del número 0 hasta la letra F. Donde del 0 puedo abarcar del 0 al 9, todos los dígitos, y con la letra F puedo abarcar de la letra A a la letra F. Combinando estos colores en estos canales es que yo puedo llegar a obtener un color. Ahora, para poder definir, en este caso, el primer color, que será el azul con el cual estaremos trabajando en esta caja, vamos a definir los canales que vamos a ocupar. En este caso, primero escribimos el símbolo de numeral y escribimos los dos primeros, es decir, el más bajo, que sería un 0 para el rojo, y aquí seguimos igual con otro 0 y 0 para el canal verde, y solamente vamos a levantar todo el canal azul. Y para poder levantar este canal azul vamos a alcanzar la máxima expresión de los colores que es FF, es decir, el último color existente. De hecho, algunos editores te van a ayudar a que puedas identificar los colores con este símbolo. Vamos a guardar y probemos aquí. Y vemos cómo ahora este ya es de color azul. Repitamos estos pasos para los siguientes colores. Así que aquí voy a eliminar esto nada más. Y vamos a poner un par de colores nuevos, en este caso, vamos a cambiar el nombre de la clase y vamos a poner que este va a ser para la clase rojo y este va a ser para la clase verde. De los cuales, en estos colores vamos a definir que el color rojo estará encontrado con el primer canal a su máxima expresión y después los demás en la forma más baja. Así tenemos el color rojo. Y, en este caso, nos va a quedar el color verde, que, si nosotros tenemos en cuenta, podremos alcanzar algo de esta manera. Donde el escribir #00FF00 tenemos el color verde. Actualizamos nuevamente y aquí tenemos ya nuestra lista de colores primarios. ¡Listo! Ahora, la otra manera que nosotros tenemos de manejar también los colores es cuando trabajamos directamente con el canal RGB. Y en este canal RGB nosotros podemos escribir de nueva cuenta para el primer campo, rojo; para el segundo, verde; y para el tercero, azul. Y, de la misma forma yo puedo trabajar y agregar aquí valores. Pero en este caso yo no voy a agregar valores de textos, simplemente, voy a agregar valores de números, números que van del 0 al 255. Vamos a comentar esto también. Y vamos a escribir este color pero ya directamente con esta nueva forma. Así que para hacerlo, yo puedo utilizar aquí background-color y vamos a escribir el RGB. De hecho, te puedes ayudar por los snippets que aparecen aquí. Y, simple y sencillo. Una vez que nosotros lo ponemos podemos asignar los valores. Voy a eliminar estos valores que teníamos primero por defecto y voy a agregar los valores en números, es decir, en este caso, para el color azul yo puedo estar trabajando igual, 0, si se dan cuenta coincide con el primer canal, después 0 con el segundo, y después llegamos a la máxima expresión, que, en este caso, el número máximo sería 255. Actualizamos nuestro navegador, y tenemos exactamente el mismo resultado. Pero ahora el color lo estamos generando con este otro método. Vamos a replicar este mismo ejemplo pero en los demás. Y vamos a dejar comentados los ejemplos anteriores para que los puedas tener disponibles en caso de que desees consultar. ¡Listo! Ahora, si yo actualizo todos se van a volver azules. Vamos a mover un poco por aquí los colores y vamos a dejar de nuevo el rojo en su máxima expresión. Y si tenemos entendido, es el 255, y todos los demás en 0, es decir, hasta abajo de sus niveles. Y aquí mismo, el editor de texto me ayuda mostrándome un pedazo de este color para que yo sepa si va a quedar bien o no. Y vamos a aplicar lo mismo para el último ejemplo, donde vamos a tener 0; 255, la máxima expresión; y otro 0. ¡Listo! Ya recuperamos los colores. Y, por último, vamos a trabajar con el canal alpha de este tipo de colores. El canal alpha solamente se radica en que vamos a poder agregar una letra "a" para este método. Y en este canal alpha simplemente vamos a trabajar cantidades que irán del 0 al 1. Es decir, vamos a poder trabajar 0, 0.1, 0.2, 0.3 y todos los números que queden intermedios hasta llegar al 1. Voy a escribir aquí este comentario para que te quede de referencia. Y, simplemente, vamos a agregarlo al final después del 255 y vamos a escribir 0.2, por ejemplo. En el siguiente vamos a ponerle coma, 0.5. Y en el último, vamos a acercarnos al color y pondremos 0.8. Guardamos, y ahora que actualizamos el navegador, podemos ver cómo esta opacidad ha cambiado ya que hemos afectado el valor alpha. También, y de la misma forma, tenemos el último color, que será HSL. Este HSL viene por sus siglas en inglés Hue, Saturation and Lightness. Este tipo de elementos también me van a servir a mí para que yo pueda declarar colores pero basados en otro tipo de esquemas. Es decir, en un esquema donde primero voy a tener el tono, que va a ser el color en su estado más puro, la saturación de colores, o el brillo. Es decir, como voy descomponiendo los otros colores. Y para este caso yo puedo utilizar números que van, igual, del 0 al 255, y para esta caso también puedo utilizar números y también puedo utilizar porcentajes. Por ejemplo, para poder expresar este color rojo, vamos a escribir esto, y vamos comentar. ¡Listo! Así ahora, para poder expresar yo el color azul, simplemente estoy utilizando estas cantidades. Obviamente, cambia el modelo de expresión pero a veces los diseñadores utilizan este tipo de colores, por lo cual si tú estás trabajando con un diseñador que te está enviando este tipo de colores, ya tienes el método adecuado para poder trabajar con ellos. Y así vamos a ver de nuevo cuáles van a ser los cambios que existirán por ejemplo, para el color rojo. Simplemente, para el color rojo vamos a enviar otro tono de colores donde tengo 0, 100 y 50 %. Y, por último, vamos a enviar para el color verde. Y aquí en este color verde yo puedo trabajar con estos colores, solamente fíjate cómo hemos estado cambiando este tono. Y, en este caso, vamos a dejar este por aquí del 120 aproximadamente, y con esto ¡voilá! Tenemos el color verde. Así entonces, tenemos ya tres formas distintas de poder representar los colores y entenderlos para saber de qué se tratan y cómo se conforman. Si tú estás programando, recuerda que también podrás asignar o inyectar colores desde JavaScript y lo podrás hacer de manera dinámica. Entonces, imagínate poder cambiar todos los colores que necesites. Ahora que ya entiendes estos conceptos, puede quedar una aplicación visual bastante buena.