Programación
29 ago 2022
Tutorial: ¿Cómo indicar colores en HTML?
Hay millones de variantes disponibles para escoger. Dar con la tonalidad adecuada es clave para el exitoso despliegue de plataformas digitales. Paso a paso para configurar los colores del texto, del fondo y de los bordes.
¿Qué colores están disponibles para HTML?
Los colores disponibles para HTML superan los 16 millones.
Para ser específicos, son 16.777.216 colores los que pueden emplearse en diseño web. ¿Por qué se habla de esa cifra, ni una más, ni una menos? Para comprenderlo es preciso conocer acerca de los gráficos digitales.
El píxel es la unidad básica de las imágenes por computadora, que se compone por 3 bytes que representan el rojo, el verde y el azul. A su vez, cada uno se compone de 8 bits.
En tanto, cada píxel está compuesto por 24 bits (3 bytes multiplicado por 8 bits).
Luego, debes saber lo siguiente. Cada byte puede tener un valor que va del 0 al 255, de acuerdo al grado de luminosidad. En otras palabras, hay 256 combinaciones posibles.
Un detalle a tener en cuenta: 0 es la tonalidad más oscura y se agrega luminosidad hasta llegar al máximo (255).
Cada uno de los canales tiene un valor que va del 0 al 255, lo que se traduce en 16.777.216 combinaciones posibles, siendo el resultado de 256 x 256 x 256.
¿Qué son los colores hexadecimales?
Los colores hexadecimales son los más utilizados en HTML, en sitios web y aplicaciones.
También se lo conoce como “colores HEX”.
Están compuestos por códigos de 3 bytes precedidos por el símbolo numeral. De este modo se representa la intensidad de los colores primarios y se forma un sistema de numeración con 16 símbolos.
Cada color puede tener 256 valores diferentes, igual que ocurre en el modelo RGB.
Algunos aspectos a considerar sobre los colores HEX:
Cada código hexadecimal tiene 3 pares (6 caracteres en total).
Pueden estar compuestos por cualquier combinación de diez números (del 0 al 9) y 6 letras (de la “A” a la “F”).
“00” representa la intensidad más baja del color primario; y “FF” la intensidad más alta.
Hay 16.777.216 combinaciones posibles.
Tabla de colores para HTML
Si buscas una tabla de colores para HTML, la respuesta está a pocos clics de distancia.
En la Web hay páginas con todos los códigos de los colores HEX, así como RGB y HSL.
El uso es sumamente sencillo: hay que colocar el puntero del mouse en la paleta de tonalidades y en pantalla aparecen las numeraciones.
Esos códigos o valores pueden ser empleados para general documentos HTML y CSS (hojas de estilo en cascada).
Los siguientes ejemplos de códigos de colores HEX para HTML profundizan los conceptos hasta aquí repasados.
El blanco es #FFFFFF: se mezclan a su máxima intensidad los tres colores primarios.
El negro es #000000: ausencia total de color primario.
El rojo (puro) es #FF0000: indica la mayor intensidad de ese color primario, y la más baja de azul y verde.
El azul es #0000FF: la intensidad máxima está en ese color primario.
En RGB, esos códigos son los siguientes:
Blanco: 255, 255, 255
Negro: 0, 0, 0
Rojo: 255, 0, 0
Azul: 0, 0, 255
En la tabla que sigue puedes ver algunos de los colores más frecuentes en HTML, con sus códigos HEX y RGB.
Tal como señalamos, las tonalidades disponibles en HTML superan los 16 millones. Una vez realizada la selección en alguno de los selectores de color es preciso anotar el código o valor.
Cuando se emplean colores específicos y “complejos” (que no son blanco, negro, rojo, verde o azul; sino que suponen una mezcla) es de suma importancia conocer su código.
Por ejemplo, el código HEX para un verde manzana específico es #11EE0A, y si apenas nos movemos hacia un tono algo más oscuro cambia a #14EA0E.
Dicho esto, se comprende que para un diseño e imagen consistente de un sitio web (tanto de la tipografía como del fondo) es clave tener anotados los códigos de color correspondientes.
¿Cómo indicar color de texto?
Para indicar el color del texto en HTML hay que enfocarse en la propiedad <style="color: ;">. En el espacio vacío es preciso colocar el color.
Puedes hacerlo con un nombre (por ejemplo, “yellow”) o bien con un código.
Veamos esto en una estructura HTML.
<p style=”color: yellow”>Este texto se mostrará en amarillo en el sitio web</p>O, usando código hexadecimal:
<p style=”color: #1a73e8”>Este texto se mostrará en color azul en el sitio web</p><DOCTYPE! html>
¿Cómo indicar color de fondo?
Para indicar un color de fondo es preciso hacer foco en la propiedad <style="background-color: ;">.
Una vez más, en el espacio que está sin completar es preciso colocar el color o su código.
En una estructura HTML, se ve del siguiente modo.
<div style=”background-color: red”>Este contenedor tendrá un color de fondo rojo</p>
O, usando código hexadecimal:
<div style=”background-color: #00ac47>Este contenedor tendrá un color de fondo verde</div>
¿Cómo indicar el color de borde?
Para indicar el color de borde en HTML el parámetro a tener en cuenta es <style="border:2px solid ;">.
En este caso, 2px refiere a un borde de 2 pixeles, mientras que “solid” señala que se trata de un borde de color sólido.
En la estructura, lo veremos así.
<div style=”border: 2px solid black”>Este contenedor tendrá un color de borde negro</p>
O, usando código hexadecimal:
<div style=”border: 2px solid #fbbc04>Este contenedor tendrá un color de fondo amarillo</div>
La importancia de los colores en un sitio web
La elección de los colores es una tarea clave en el diseño web. Más allá de las preferencias particulares, las tonalidades tienen los siguientes “poderes”.
Enfatizan elementos, destacando los necesarios.
Favorecen el reconocimiento de una marca, por eso son relevantes para el éxito comercial.
Hace que un sitio web sea más memorable, atrayendo clientes (en el caso de las buenas decisiones).
Es clave para la legibilidad, que además debe pensar en los diferentes soportes de los acceso.
Provoca sensaciones y estados de ánimo.
Pueden incitar acciones.
Respecto a los dos últimos ítems, es conocida la teoría del color que estudia la influencia de las tonalidades en las personas y cómo las elecciones dentro de la paleta cromática afectan nuestro comportamiento.
Por último, es esencial tener en consideración que los colores escogidos para un sitio web –por mucha atención que se preste a ello- no se verán del mismo modo en todos los dispositivos y soportes.
Aunque se indique un código preciso, la visualización varía de acuerdo a los monitores, la configuración escogida por los usuarios, las diferentes placas de video, ¡e incluso la suciedad en las pantallas!
Además de ello, es clave escoger una paleta de colores que no sólo sea agradable, sino que además transmita el mensaje que se quiere comunicar en el sitio web.
Tal como señala Recruiter Digital Harbor en una interesante entrada publicada en LinkedIn, los colores tienen un gran peso en el marketing digital.
“Varios estudios afirman que el color representa un 85% de la importancia en la decisión de comprar un producto o servicio debido al efecto emocional que tiene en el consumidor”, indican.
El artículo menciona que los consumidores demoran un promedio de 90 segundos para formar una opinión sobre un producto y que entre el 62% y el 90% de la interacción está determinada por la tonalidad. “Por eso, no sorprende la inversión millonaria que las grandes corporaciones hacen para determinar el color perfecto para su marca”, concluyen.
Hay millones de variantes disponibles para escoger. Dar con la tonalidad adecuada es clave para el exitoso despliegue de plataformas digitales. Paso a paso para configurar los colores del texto, del fondo y de los bordes.
¿Qué colores están disponibles para HTML?
Los colores disponibles para HTML superan los 16 millones.
Para ser específicos, son 16.777.216 colores los que pueden emplearse en diseño web. ¿Por qué se habla de esa cifra, ni una más, ni una menos? Para comprenderlo es preciso conocer acerca de los gráficos digitales.
El píxel es la unidad básica de las imágenes por computadora, que se compone por 3 bytes que representan el rojo, el verde y el azul. A su vez, cada uno se compone de 8 bits.
En tanto, cada píxel está compuesto por 24 bits (3 bytes multiplicado por 8 bits).
Luego, debes saber lo siguiente. Cada byte puede tener un valor que va del 0 al 255, de acuerdo al grado de luminosidad. En otras palabras, hay 256 combinaciones posibles.
Un detalle a tener en cuenta: 0 es la tonalidad más oscura y se agrega luminosidad hasta llegar al máximo (255).
Cada uno de los canales tiene un valor que va del 0 al 255, lo que se traduce en 16.777.216 combinaciones posibles, siendo el resultado de 256 x 256 x 256.
¿Qué son los colores hexadecimales?
Los colores hexadecimales son los más utilizados en HTML, en sitios web y aplicaciones.
También se lo conoce como “colores HEX”.
Están compuestos por códigos de 3 bytes precedidos por el símbolo numeral. De este modo se representa la intensidad de los colores primarios y se forma un sistema de numeración con 16 símbolos.
Cada color puede tener 256 valores diferentes, igual que ocurre en el modelo RGB.
Algunos aspectos a considerar sobre los colores HEX:
Cada código hexadecimal tiene 3 pares (6 caracteres en total).
Pueden estar compuestos por cualquier combinación de diez números (del 0 al 9) y 6 letras (de la “A” a la “F”).
“00” representa la intensidad más baja del color primario; y “FF” la intensidad más alta.
Hay 16.777.216 combinaciones posibles.
Tabla de colores para HTML
Si buscas una tabla de colores para HTML, la respuesta está a pocos clics de distancia.
En la Web hay páginas con todos los códigos de los colores HEX, así como RGB y HSL.
El uso es sumamente sencillo: hay que colocar el puntero del mouse en la paleta de tonalidades y en pantalla aparecen las numeraciones.
Esos códigos o valores pueden ser empleados para general documentos HTML y CSS (hojas de estilo en cascada).
Los siguientes ejemplos de códigos de colores HEX para HTML profundizan los conceptos hasta aquí repasados.
El blanco es #FFFFFF: se mezclan a su máxima intensidad los tres colores primarios.
El negro es #000000: ausencia total de color primario.
El rojo (puro) es #FF0000: indica la mayor intensidad de ese color primario, y la más baja de azul y verde.
El azul es #0000FF: la intensidad máxima está en ese color primario.
En RGB, esos códigos son los siguientes:
Blanco: 255, 255, 255
Negro: 0, 0, 0
Rojo: 255, 0, 0
Azul: 0, 0, 255
En la tabla que sigue puedes ver algunos de los colores más frecuentes en HTML, con sus códigos HEX y RGB.
Tal como señalamos, las tonalidades disponibles en HTML superan los 16 millones. Una vez realizada la selección en alguno de los selectores de color es preciso anotar el código o valor.
Cuando se emplean colores específicos y “complejos” (que no son blanco, negro, rojo, verde o azul; sino que suponen una mezcla) es de suma importancia conocer su código.
Por ejemplo, el código HEX para un verde manzana específico es #11EE0A, y si apenas nos movemos hacia un tono algo más oscuro cambia a #14EA0E.
Dicho esto, se comprende que para un diseño e imagen consistente de un sitio web (tanto de la tipografía como del fondo) es clave tener anotados los códigos de color correspondientes.
¿Cómo indicar color de texto?
Para indicar el color del texto en HTML hay que enfocarse en la propiedad <style="color: ;">. En el espacio vacío es preciso colocar el color.
Puedes hacerlo con un nombre (por ejemplo, “yellow”) o bien con un código.
Veamos esto en una estructura HTML.
<p style=”color: yellow”>Este texto se mostrará en amarillo en el sitio web</p>O, usando código hexadecimal:
<p style=”color: #1a73e8”>Este texto se mostrará en color azul en el sitio web</p><DOCTYPE! html>
¿Cómo indicar color de fondo?
Para indicar un color de fondo es preciso hacer foco en la propiedad <style="background-color: ;">.
Una vez más, en el espacio que está sin completar es preciso colocar el color o su código.
En una estructura HTML, se ve del siguiente modo.
<div style=”background-color: red”>Este contenedor tendrá un color de fondo rojo</p>
O, usando código hexadecimal:
<div style=”background-color: #00ac47>Este contenedor tendrá un color de fondo verde</div>
¿Cómo indicar el color de borde?
Para indicar el color de borde en HTML el parámetro a tener en cuenta es <style="border:2px solid ;">.
En este caso, 2px refiere a un borde de 2 pixeles, mientras que “solid” señala que se trata de un borde de color sólido.
En la estructura, lo veremos así.
<div style=”border: 2px solid black”>Este contenedor tendrá un color de borde negro</p>
O, usando código hexadecimal:
<div style=”border: 2px solid #fbbc04>Este contenedor tendrá un color de fondo amarillo</div>
La importancia de los colores en un sitio web
La elección de los colores es una tarea clave en el diseño web. Más allá de las preferencias particulares, las tonalidades tienen los siguientes “poderes”.
Enfatizan elementos, destacando los necesarios.
Favorecen el reconocimiento de una marca, por eso son relevantes para el éxito comercial.
Hace que un sitio web sea más memorable, atrayendo clientes (en el caso de las buenas decisiones).
Es clave para la legibilidad, que además debe pensar en los diferentes soportes de los acceso.
Provoca sensaciones y estados de ánimo.
Pueden incitar acciones.
Respecto a los dos últimos ítems, es conocida la teoría del color que estudia la influencia de las tonalidades en las personas y cómo las elecciones dentro de la paleta cromática afectan nuestro comportamiento.
Por último, es esencial tener en consideración que los colores escogidos para un sitio web –por mucha atención que se preste a ello- no se verán del mismo modo en todos los dispositivos y soportes.
Aunque se indique un código preciso, la visualización varía de acuerdo a los monitores, la configuración escogida por los usuarios, las diferentes placas de video, ¡e incluso la suciedad en las pantallas!
Además de ello, es clave escoger una paleta de colores que no sólo sea agradable, sino que además transmita el mensaje que se quiere comunicar en el sitio web.
Tal como señala Recruiter Digital Harbor en una interesante entrada publicada en LinkedIn, los colores tienen un gran peso en el marketing digital.
“Varios estudios afirman que el color representa un 85% de la importancia en la decisión de comprar un producto o servicio debido al efecto emocional que tiene en el consumidor”, indican.
El artículo menciona que los consumidores demoran un promedio de 90 segundos para formar una opinión sobre un producto y que entre el 62% y el 90% de la interacción está determinada por la tonalidad. “Por eso, no sorprende la inversión millonaria que las grandes corporaciones hacen para determinar el color perfecto para su marca”, concluyen.
