En esta página:
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:
-
- Notificaciones Desktop con HTML5
- Hacer nuestro contenido Editable con HTML5
- Aprende los Códigos de Errores al hacer peticiones HTTP al servidor
- 5 Atributos Globales de HTML5 que nos pueden ser Útiles
- Manipular una Lista Ordenada con el Atributo Type en HTML
- Que es el Atributo Aria-* en HTML, como funciona y otros detalles
- Como habilitar el Dibujado con el mouse sobre un canvas HTML 5 (Desktop)
- Como Crear Notaciones Matemáticas en HTML 5
- Los Tipos de Rutas de Archivos que existen en HTML 5
- Puedes leer más en la categoría HTML 5
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.
|
1 2 3 4 5 6 |
<!-- Color con Nombre Nativo --> <h6 style="background-color:orange; color:white; padding: 10px;"> color: orange; </h6> |
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()
|
1 2 3 4 5 6 |
<!-- Color RGB --> <h6 style="background-color:rgb(255 165 0); color: rgb(255 255 255); padding: 10px;"> color: rgb(255 165 0); </h6> |
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
|
1 2 3 4 5 6 |
<!-- Color Hexadecimal --> <h6 style="background-color:#ffa500; color: #ffffff; padding: 10px;"> color: #ffa500; </h6> |
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%
|
1 2 3 4 5 6 |
<!-- Color HSL --> <h6 style="background-color:hsl(39 100% 50%); color: hsl(0 0% 100%); padding: 10px;"> color: 39 100% 50%; </h6> |
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.
|
1 2 3 4 5 6 |
<!-- Color RGBA --> <h6 style="background-color:rgba(255, 165, 0, 0.5); color: rgb(255 255 255); padding: 10px;"> color: 255, 165, 0, 0.5; </h6> |
Lo mismo para un color HSL, al agregarle un cuarto valor, pasaría a ser denominado HSLA.
|
1 2 3 4 5 6 |
<!-- Color HSLA --> <h6 style="background-color:hsla(39, 100%, 50%, 0.5); color: rgb(255 255 255); padding: 10px;"> color: 39, 100%, 50%, 0.5; </h6> |
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.