Formatos de Colores que Soporta HTML 5

4 minuto(s)

Demo Github

Una página web sin colores no tiene vida, es una web sin vida que solo tiene texto y contenido multimedia, al día de hoy los sitios webs suelen ser valorados por la interface que presentan de manera amigable y que genere una buena experiencia, existen tipos de colores que HTML soporta junto con CSS y que podemos usar para darles colores a los elementos de una página web y en este Post te contaré acerca de ellos, vamos con este Post.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Formatos de Colores que Soporta HTML 5. 

Si eres  un desarrollador web con experiencia, los colores que mencionaré a continuación te parecerán familiares, pero pensemos en los usuarios nuevos que buscan información sobre los colores y ese es el objetivo de este Post, ayudar con el conocimiento de estos tipos de colores que se puede usar en HTML 5.

Nombre Nativo

En HTML 5 podemos hacer uso de un color colocando el nombre nativo del color en inglés, por ejemplo si queremos usar el color naranja, debemos de escribir orange.


Hacemos uso de la propiedad color o podemos aplicar alguna otra propiedad CSS que nos permita aplicar colores.

RGB

Las iniciales RGB significan Red, Green y Blue (Rojo, Verde y Azul), podemos usar colores en HTML 5 haciendo uso de código de colores de 3 campos RGB, por ejemplo si queremos usar el color naranja debemos escribir 255 165 0, en CSS se colocan estos número dentro del método rgb()


Ya que los colores RGB están conformados por valores numéricos, podemos seleccionar variantes de un color con mayor precisión.

Hexadecimal

El formato de color hexadecimal esta compuesto por 6 valores alfanuméricos, en algunos casos un color puede estar compuesto únicamente por letras o únicamente por números, antes de los 6 valores alfanuméricos se debe colocar un simbolo char o numeral “#”, bueno hasta HTML 5 y CSS 3 al menos aún se debe usar este simbolo char, por ejemplo si queremos usar el color naranja debemos escribir #ffa500


Al igual que los colores RGB, los colores hexadecimales nos permiten crear un color con mayor precisión mediante sus valores numéricos.

HSL

Las iniciales HSL significan Hue, Saturation y Lightness, traducido al español Tono, Saturación y Luminosidad, este formato de color esta compuesto por 3 valores numéricos similar al color RGB, solo que en HSL el segundo y tercer valor debe llevar un simbolo de porcentaje al final “%”, por ejemplo si queremos usar el color naranja, debemos de escribir 39 100% 50%


En el ejemplo anterior, 39 es el tono, 100% es la saturación y 50% es la luminosidad.

Extensión Alpha al color RGB (RGBA) y HSL (HSLA)

A los colores RGB y HSL les podemos agregar una extensión de tipo Alpha que hace que el color tenga cierto nivel de intensidad, por ejemplo basándonos en el color naranja, les agregamos un cuarto valor como 0.5 a nuestro color RGB y pasaria a ser RGBA por el cuarto valor Alpha.


Lo mismo para un color HSL, al agregarle un cuarto valor, pasaría a ser denominado HSLA.


A los colorer RGBA y HSLA les he bajado la intensidad al color naranja, por ende obtengo el siguiente resultado.

Conclusión

Después de conocer los tipos de colores que tienes a disposición, sabrás cuando y en que momento usarlos durante el desarrollo de un sitio web.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.