Cuando se trata de personalizar tu sitio, a menudo se pasa por alto el color de la fuente. En la mayoría de los casos, los propietarios de sitios web dejan el color de la fuente por defecto, como el negro, o lo que sus estilos de tema hayan definido para el color del cuerpo y del texto del encabezado.
Sin embargo, es una buena idea cambiar el color de la fuente HTML en tu sitio web por varias razones. Cambiar el color de la fuente HTML puede parecer desalentador, pero es bastante sencillo. Existen varias formas de cambiar el color de la fuente en tu sitio web.
En este post, te mostraremos diferentes formas de cambiar el color de las fuentes de tu sitio web, así como discutiremos por qué querrías hacerlo en primer lugar.
Mira nuestro Videotutorial para Cambiar el Color de la Fuente en HTML
¿Por qué cambiar el color de la fuente HTML?
Querrás cambiar el color de la fuente porque hacerlo puede ayudar a mejorar la legibilidad y accesibilidad de tu sitio web. Por ejemplo, si tu sitio utiliza una combinación de colores más oscura, dejar el color de la fuente en negro dificultaría la lectura del texto en tu sitio web.
Otra razón por la que deberías considerar cambiar el color de la fuente es si vas a utilizar un color más oscuro de la paleta de colores de tu marca. Esta es otra oportunidad para reforzar tu marca. Construye la consistencia de la marca y asegura que el texto en todos tus canales de marketing tenga el mismo aspecto.
Con esto fuera del camino, veamos cómo puedes definir y cambiar el color de la fuente HTML.
Formas de definir el color
Existen varias formas de definir el color en el diseño web, como el nombre, los valores RGB, los códigos hexadecimales y los valores HSL. Veamos cómo funcionan.
Nombre del color
Los nombres de los colores son la forma más sencilla de definir un color en tus estilos CSS. El nombre del color se refiere al nombre específico del color HTML. Actualmente, hay 140 nombres de color admitidos, y puedes utilizar cualquiera de esos colores en tus estilos. Por ejemplo, puedes utilizar «azul» para establecer el color de un elemento individual en azul.
Sin embargo, el inconveniente de este enfoque es que no todos los nombres de colores son compatibles. En otras palabras, si utilizas un color que no está en la lista de colores admitidos, no podrás utilizarlo en tu diseño por su nombre de color.
Valores RGB y RGBA
A continuación, tenemos los valores RGB y RGBA. El RGB son las siglas de Rojo, Verde y Azul. Define el color mezclando los valores de rojo, verde y azul, de forma similar a como mezclarías un color en una paleta real.
El valor RGB tiene el siguiente aspecto RGB(153,0,255). El primer número especifica la entrada de color rojo, el segundo especifica la entrada de color verde y el tercero especifica el azul.
El valor de cada entrada de color puede oscilar entre 0 y 255, donde 0 significa que el color no está presente en absoluto y 255 significa que el color concreto está en su máxima intensidad.
El valor RGBA añade un valor más a la mezcla, y es el valor alfa que representa la opacidad. Va de 0 (no transparente) a 1 (totalmente transparente).
Valor HEX
Los códigos de color hexadecimales funcionan de forma similar a los códigos RGB. Están formados por números del 0 al 9 y letras de la A a la F. El código hexadecimal tiene el siguiente aspecto #800080. Las dos primeras letras especifican la intensidad del color rojo, los dos números del medio especifican la intensidad del color verde, y los dos últimos establecen la intensidad del color azul.
Valores HSL y HSLA
Otra forma de definir los colores en HTML es utilizar los valores HSL. HSL significa tono, saturación y luminosidad.
El matiz utiliza grados de 0 a 360. En una rueda de color estándar, el rojo está en torno a 0/360, el verde en 120 y el azul en 240.
La saturación utiliza porcentajes para definir el grado de saturación del color. El 0 representa el blanco y negro, y el 100 representa el color completo.
Por último, la luminosidad utiliza porcentajes similares a los de la saturación. En este caso, el 0% representa el negro y el 100% el blanco.
Por ejemplo, el color púrpura que hemos estado utilizando a lo largo de este artículo tendría este aspecto en HSL: hsl(276, 100%, 50%).
HSL, al igual que RGB, admite la opacidad. En ese caso, utilizarías el valor HSLA, donde A representa el alfa y se define en un número de 0 a 1. Si quisiéramos bajar la opacidad del morado del ejemplo, utilizaríamos este código hsl(276, 100%, 50%, .85).
Ahora que ya sabes cómo definir el color, vamos a ver diferentes formas de cambiar el color de la fuente HTML.
Lo antiguo: <font> Etiquetas
Antes de que se introdujera HTML5 y se estableciera como estándar de codificación, podías cambiar el color de la fuente utilizando etiquetas de fuente. Más concretamente, utilizabas la etiqueta font con el atributo color para establecer el color del texto. El color se especificaba con su nombre o con su código hexadecimal.
Aquí tienes un ejemplo de cómo quedaba este código con el código de color hexadecimal:
<font color="#800080">This text is purple.</font>Y así es como se podía establecer el color del texto en morado utilizando el nombre del color.
<font color="purple">This text is purple.</font> Sin embargo, la etiqueta <font> está obsoleta en HTML5 y ya no se utiliza. Cambiar el color de la fuente es una decisión de diseño, y el diseño no es el objetivo principal de HTML. Por tanto, tiene sentido que las etiquetas <font> ya no se admitan en HTML5.
Entonces, si la etiqueta <font> ya no se admite, ¿cómo se cambia el color de la fuente en HTML? La respuesta es con hojas de estilo en cascada o CSS.
Lo nuevo: Estilos CSS
Para cambiar el color de la fuente HTML con CSS, utilizarás la propiedad de color de CSS junto con el selector apropiado. CSS te permite utilizar nombres de colores, valores RGB, hexadecimales y HSL para especificar el color. Hay tres formas de utilizar CSS para cambiar el color de la fuente.
CSS en línea
El CSS en línea se añade directamente a tu archivo HTML. Utilizarás la etiqueta HTML como <p> y luego le darás estilo con la propiedad de color CSS de esta manera:
<p style="color: purple">This is a purple paragraph.</p>Si quieres utilizar un valor hexadecimal, tu código tendrá este aspecto:
<p style="color:#800080">This is a purple paragraph.</p>Si vas a utilizar el valor RGB, lo escribirás así:
<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>Por último, si vas a utilizar los valores HSL, utilizarás este código
<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>Los ejemplos anteriores te muestran cómo cambiar el color de un párrafo en tu sitio web. Pero no estás limitado sólo a los párrafos. Puedes cambiar el color de la fuente de tus encabezados, así como de los enlaces.
Por ejemplo, si sustituyes la etiqueta <p> de arriba por <h2> cambiarás el color del texto de ese encabezado, mientras que si la sustituyes por la etiqueta <a> cambiarás el color de ese enlace. También puedes utilizar el elemento <span> para colorear cualquier cantidad de texto.
Si quieres cambiar el color de fondo de todo el párrafo o de un encabezado, es muy similar a cómo cambiarías el color de la fuente. Tienes que utilizar el atributo background-color en su lugar y utilizar el nombre del color, los valores hexadecimales, RGB o HSL para establecer el color. Aquí tienes un ejemplo
<p style="background-color: purple">CSS incrustado
El CSS incrustado está dentro de las etiquetas <style> y se coloca entre las etiquetas head de tu documento HTML.
El código tendrá este aspecto si quieres utilizar el nombre del color:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>El código anterior cambiará el color de todos los párrafos de la página a morado. De forma similar al método CSS en línea, puedes utilizar diferentes selectores para cambiar el color de la fuente de tus encabezados y enlaces.
Si quieres utilizar el código hexadecimal, así es como quedaría el código:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>El ejemplo siguiente utiliza los valores RBGA para que puedas ver un ejemplo de ajuste de la opacidad:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>Y el código HSL quedaría así:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>CSS externo
Por último, puedes utilizar CSS externo para cambiar el color de la fuente en tu sitio web. El CSS externo es el CSS que se coloca en un archivo de hoja de estilos separado, normalmente llamado style.css o stylesheet.css.
Esta hoja de estilos es responsable de todos los estilos de tu sitio web y especifica los colores y tamaños de las fuentes, los márgenes, los rellenos, las familias de fuentes, los colores de fondo y mucho más. En resumen, la hoja de estilos es responsable del aspecto visual de tu sitio.
Para cambiar el color de la fuente con CSS externo, utilizarías selectores para dar estilo a las partes del HTML que quieras. Por ejemplo, este código cambiará todo el cuerpo de texto de tu sitio:
body {color: purple;}Recuerda que puedes utilizar valores RGB, hexadecimales y HSL y no sólo los nombres de los colores para cambiar el color de la fuente. Si quieres editar la hoja de estilos, se recomienda hacerlo en un editor de código.
¿En linea, incrustado o externo?
Ahora ya sabes cómo puedes utilizar CSS para cambiar el color de la fuente. Pero, ¿qué método debes utilizar?
Si utilizas el código CSS inline, lo añadirás directamente en tu archivo HTML. En general, este método es adecuado para arreglos rápidos. Si quieres cambiar el color de un párrafo o un encabezado específico en una sola página, este método es el más rápido y el menos complicado.
Sin embargo, los estilos en línea pueden aumentar el tamaño de tu archivo HTML. Cuanto más grande sea tu archivo HTML, más tardará en cargarse tu página web. Además, el CSS en línea puede desordenar tu HTML. Por ello, se desaconseja generalmente el método inline de utilizar CSS para cambiar el color de la fuente HTML.
El CSS incrustado se coloca entre las etiquetas <head> y dentro de las etiquetas <style>. Al igual que el CSS en línea, es bueno para hacer arreglos rápidos y anular los estilos especificados en una hoja de estilos externa.
Una distinción notable entre los estilos en línea y los incrustados es que se aplicarán a cualquier página en la que se carguen las etiquetas head, mientras que los estilos en línea sólo se aplican a la página específica en la que se encuentran, normalmente al elemento al que se dirigen en esa página.
El último método, el CSS externo, utiliza una hoja de estilos dedicada para definir tus estilos visuales. En general, es mejor utilizar una hoja de estilos externa para mantener todos tus estilos en un único lugar, desde el que sean fáciles de editar. Esto también separa la presentación y el diseño, por lo que el código es fácil de gestionar y mantener.
Ten en cuenta que los estilos en línea e incrustados pueden anular los estilos establecidos en la hoja de estilos externa.
Etiquetas de fuente o estilos CSS: Ventajas y desventajas
Los dos métodos principales para cambiar los colores de las fuentes HTML son utilizar la etiqueta de fuente o los estilos CSS. Ambos métodos tienen sus pros y sus contras.
Etiquetas de fuente HTML: pros y contras
La etiqueta de fuente HTML es fácil de usar, así que eso es un pro a su favor. Por lo general, el CSS es más complicado y lleva más tiempo aprenderlo que escribir <font color="purple">. Si tienes un sitio web antiguo que no utiliza HTML5, la etiqueta de fuente es un método viable para cambiar el color de la fuente.
Aunque la etiqueta font es fácil de usar, no deberías utilizarla si tu sitio web utiliza HTML. Como se ha mencionado anteriormente, la etiqueta font fue obsoleta en HTML5. Hay que evitar el uso de código obsoleto, ya que los navegadores podrían dejar de soportarlo en cualquier momento. Esto puede hacer que tu sitio web se rompa y no funcione correctamente, o peor aún, que no se muestre en absoluto para tus visitantes.
Ventajas e inconvenientes del CSS
El CSS, al igual que la etiqueta de fuente, tiene sus pros y sus contras. La ventaja más significativa de usar CSS es que es la forma adecuada de cambiar el color de la fuente y especificar todos los demás estilos para tu sitio web.
Como se ha mencionado anteriormente, separa la presentación del diseño, lo que hace que tu código sea más fácil de gestionar y mantener.
En el lado negativo, CSS y HTML5 pueden llevar tiempo para aprender y escribir correctamente en comparación con la antigua forma de escribir código.
Ten en cuenta que con CSS tienes diferentes formas de cambiar el color de la fuente, y cada uno de esos métodos tiene su propio conjunto de pros y contras, como ya hemos comentado.
Consejos para cambiar el color de la fuente en HTML
Ahora que sabes cómo cambiar el color de la fuente HTML, aquí tienes algunos consejos que te ayudarán.
Utiliza un selector de color
En lugar de elegir los colores al azar, utiliza los selectores de color para seleccionar los colores adecuados. La ventaja de un selector de color es que te dará el nombre del color y los valores hexadecimales, RGB y HSL correctos que necesitas utilizar en tu código.
Comprueba el contraste
Tanto el texto oscuro con fondo oscuro como el texto claro con fondo claro no funcionan bien juntos. Harán que el texto de tu sitio sea difícil de leer. Sin embargo, puedes utilizar un comprobador de contraste para asegurarte de que los colores de tu sitio son accesibles y el texto es fácil de leer.
Encuentra el color mediante el método de inspección
Si ves un color que te gusta en un sitio web, puedes inspeccionar el código para obtener el valor hexadecimal, RGB o HSL del color. En Chrome, todo lo que tienes que hacer es apuntar el cursor a la parte de la página web que quieres inspeccionar, hacer clic con el botón derecho y seleccionar Inspeccionar. Esto abrirá el panel de inspección de código, donde puedes ver el código HTML de una página web y los estilos correspondientes.
Resumen
Cambiar el color de la fuente HTML puede ayudar a mejorar la legibilidad y la accesibilidad de tu sitio web. También puede ayudarte a establecer una coherencia de marca en los estilos de tu sitio web.
En esta guía, has conocido cuatro formas diferentes de cambiar el color de la fuente HTML: con nombres de colores, códigos hexadecimales, RGB y valores HSL.
También hemos cubierto cómo puedes cambiar el color de la fuente con CSS en línea, incrustado y externo, y utilizar la etiqueta de fuente, y los pros y contras de cada método. A estas alturas, deberías tener una buena comprensión de qué método debes utilizar para cambiar el color de la fuente HTML, así que lo único que queda por hacer ahora es poner en práctica estos consejos en tu sitio.
¿Qué opinas sobre el cambio del color de la fuente con CSS y la etiqueta de fuente? ¡Háznoslo saber en la sección de comentarios!
Deja una respuesta