Cómo cambiar el color de la fuente HTML
Cuando se trata de personalizar su sitio, el color de la fuente a menudo se pasa por alto. En la mayoría de los casos, los propietarios de sitios web dejan el color de fuente predeterminado como negro o lo que sea que hayan definido sus estilos de tema para el cuerpo y el color del texto del encabezado.
Sin embargo, es una buena idea cambiar el color de la fuente HTML en su sitio web por varias razones. Cambiar el color de la fuente HTML puede parecer abrumador, pero es bastante simple. Hay varias formas de cambiar el color de la fuente en su sitio web.
En esta publicación, le mostraremos diferentes formas de cambiar el color de las fuentes de su sitio web, así como también discutiremos por qué le gustaría hacerlo en primer lugar.
¿Por qué cambiar el color de la fuente HTML?
Le conviene cambiar el color de la fuente porque hacerlo puede ayudar a mejorar la legibilidad y accesibilidad de su sitio web. Por ejemplo, si su sitio utiliza un esquema de color más oscuro, dejar el color de fuente en negro dificultaría la lectura del texto en su sitio web.
Otra razón por la que debería considerar cambiar el color de la fuente es si va a utilizar un color más oscuro de la paleta de colores de su marca. Esta es otra oportunidad más para reforzar su marca. Desarrolla la coherencia de la marca y garantiza que el texto en todos sus canales de marketing tenga el mismo aspecto.
Con eso fuera del camino, veamos cómo puede definir y cambiar el color de la fuente HTML.
Maneras de definir el color
Hay varias formas de definir el color en el diseño web, incluidos el nombre, los valores RGB, los códigos hexadecimales y los valores HSL. Echemos un vistazo a cómo funcionan.
Nombre del color
Los nombres de los colores son la forma más sencilla de definir un color en sus estilos CSS. El nombre del color se refiere al nombre específico del color HTML. Actualmente, se admiten 140 nombres de colores y puede usar cualquiera de esos colores en sus estilos. Por ejemplo, puede utilizar «azul» para establecer el color de un elemento individual en azul.
Sin embargo, la desventaja de este enfoque es que no se admiten todos los nombres de colores. En otras palabras, si usa un color que no está en la lista de colores admitidos, no podrá usarlo en su diseño por su nombre de color.
Valores RGB y RGBA
A continuación, tenemos los valores RGB y RGBA. El RGB significa rojo, verde y azul. Define el color mezclando valores de rojo, verde y azul, de manera similar a como mezclarías un color en una paleta real.
El valor RGB se ve así: 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 en particular está en su máxima intensidad.
El valor RGBA agrega un valor más a la mezcla, y ese 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 manera similar a los códigos RGB. Consisten en números del 0 al 9 y letras de la A a la F. El código hexadecimal se ve así: # 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 colores en HTML es usar valores HSL. HSL significa tono, saturación y luminosidad.
Hue usa grados de 0 a 360. En una rueda de color estándar, el rojo está alrededor de 0/360, el verde está en 120 y el azul en 240.
La saturación usa porcentajes para definir qué tan saturado está el color. 0 representa blanco y negro y 100 representa todo color.
Por último, la luminosidad utiliza porcentajes de forma similar a la saturación. En este caso, 0% representa negro y 100% representa blanco.
Por ejemplo, el color púrpura que hemos estado usando a lo largo de este artículo se vería así en HSL: hsl(276, 100%, 50%).
HSL, como RGB, admite opacidad. En ese caso, usaría el valor HSLA donde A significa alfa y se define en un número de 0 a 1. Si quisiéramos reducir la opacidad del ejemplo púrpura, usaríamos este código: hsl(276, 100%, 50%, .85).
Ahora que sabe cómo definir el color, veamos diferentes formas de cambiar el color de la fuente HTML.
El viejo: <font> Etiquetas
Antes de que se introdujera HTML5 y se estableciera como estándar de codificación, se podía cambiar el color de la fuente mediante etiquetas de fuente. Más específicamente, usaría la etiqueta de fuente con el atributo de color para establecer el color del texto. El color se especificó con su nombre o con su código hexadecimal.
Aquí hay un ejemplo de cómo se ve este código con código de color hexadecimal:
<font color="#800080">This text is purple.</font>Y así es como puede establecer el color del texto en violeta usando el nombre del color.
<font color="purple">This text is purple.</font> sin embargo, el <font> La etiqueta 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 propósito principal de HTML. Por lo tanto, tiene sentido que el <font> Las etiquetas ya no son compatibles con HTML5.
Entonces, si la etiqueta ya no es compatible, ¿cómo se cambia el color de la fuente 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, usará la propiedad de color CSS emparejada con el selector apropiado. CSS le permite usar nombres de color, valores RGB, hexadecimales y HSL para especificar el color. Hay tres formas de usar CSS para cambiar el color de la fuente.
CSS en línea
El CSS en línea se agrega directamente a su archivo HTML. Utilizará la etiqueta HTML como
y luego ajústelo con la propiedad de color CSS así:
<p style="color: purple">This is a purple paragraph.</p>Si desea utilizar un valor hexadecimal, su código se verá así:
<p style="color:#800080">This is a purple paragraph.</p>Si va a utilizar el valor RGB, lo escribirá así:
<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>Por último, usando los valores HSL, usaría este código:
<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>Los ejemplos anteriores le muestran cómo cambiar el color de un párrafo en su sitio web. Pero no está limitado solo a los párrafos. Puede cambiar el color de fuente de sus títulos y enlaces.
Por ejemplo, reemplazando el <p> etiqueta arriba con <h2> cambiará el color de ese texto de encabezado, mientras lo reemplaza con el <a> La etiqueta cambiará el color de ese enlace. También puede utilizar el elemento para colorear cualquier cantidad de texto.
Si desea cambiar el color de fondo de todo el párrafo o un encabezado, es muy similar a cómo cambiaría el color de la fuente. Tienes que usar el background-color en su lugar y utilice el nombre del color, los valores hexadecimales, RGB o HSL para establecer el color. He aquí un ejemplo:
<p style="background-color: purple">CSS incrustado
CSS incrustado está dentro del <style> etiquetas y colocadas entre las etiquetas de cabecera de su documento HTML.
El código se verá así si desea utilizar el nombre del color:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>El código anterior cambiará el color de cada párrafo de la página a violeta. De manera similar al método CSS en línea, puede usar diferentes selectores para cambiar el color de fuente de sus encabezados y enlaces.
Si desea utilizar el código hexadecimal, así es como se vería el código:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>El siguiente ejemplo utiliza los valores RBGA para que pueda ver un ejemplo de configuración de la opacidad:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>Y el código HSL se vería así:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>CSS externo
Por último, puede utilizar CSS externo para cambiar el color de la fuente en su sitio web. CSS externo es CSS que se coloca en un archivo de hoja de estilo separado, generalmente llamado style.css o stylesheet.css.
Esta hoja de estilo es responsable de todos los estilos de su sitio y especifica los colores y tamaños de fuente, márgenes, rellenos, familias de fuentes, colores de fondo y más. En resumen, la hoja de estilo es responsable del aspecto visual de su sitio.
Para cambiar el color de la fuente con CSS externo, usaría selectores para diseñar las partes de HTML que desee. Por ejemplo, este código cambiará todo el texto del cuerpo de su sitio:
body {color: purple;}Recuerde, puede usar valores RGB, hexadecimales y HSL y no solo los nombres de los colores para cambiar el color de la fuente. Si desea editar la hoja de estilo, se recomienda hacerlo en un editor de código.
¿En línea, integrado o externo?
Entonces, ahora sabe cómo puede usar CSS para cambiar el color de la fuente. Pero, ¿qué método deberías utilizar?
Si usa el código CSS en línea, lo agregará directamente a su archivo HTML. En términos generales, este método es adecuado para soluciones rápidas. Si desea cambiar el color de un párrafo o encabezado específico en una sola página, este método es la forma más rápida y menos complicada de hacerlo.
Sin embargo, los estilos en línea pueden aumentar el tamaño de su archivo HTML. Cuanto más grande sea su archivo HTML, más tardará en cargarse su página web. Además de eso, CSS en línea puede ensuciar su HTML. Como tal, generalmente se desaconseja el método en línea de usar CSS para cambiar el color de la fuente HTML.
El CSS incrustado se coloca entre
etiquetas y dentro de la
Una distinción notable entre los estilos en línea e incrustados es que se aplicarán a cualquier página en la que se carguen las etiquetas de encabezado, mientras que los estilos en línea se aplican solo a la página específica en la que se encuentran, generalmente el elemento al que se dirigen en esa página.
El último método, CSS externo, utiliza una hoja de estilo dedicada para definir sus estilos visuales. En términos generales, es mejor utilizar una hoja de estilo externa para mantener todos sus estilos en un solo lugar, desde donde son 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 administrar y mantener.
Tenga en cuenta que los estilos en línea e incrustados pueden anular los estilos establecidos en la hoja de estilo externa.
Etiquetas de fuente o estilos CSS: pros y contras
Los dos métodos principales para cambiar los colores de fuente HTML son usar la etiqueta de fuente o estilos CSS. Ambos métodos tienen sus pros y sus contras.
Pros y contras de las etiquetas de fuente HTML
La etiqueta de fuente HTML es fácil de usar, por lo que es un profesional a su favor. Normalmente, CSS es más complicado y lleva más tiempo aprenderlo que escribirlo. <font color="purple">. Si tiene un sitio web antiguo que no usa HTML5, la etiqueta de fuente es un método viable para cambiar el color de la fuente.
Aunque la etiqueta de fuente es fácil de usar, no debe usarla si su sitio web usa HTML. Como se mencionó anteriormente, la etiqueta de fuente quedó obsoleta en HTML5. Se debe evitar el uso de código obsoleto, ya que los navegadores podrían dejar de admitirlo en cualquier momento. Esto puede provocar que su sitio web se rompa y no funcione correctamente, o peor aún, que no se muestre en absoluto para sus visitantes.
Pros y contras de CSS
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 correcta de cambiar el color de la fuente y especificar todos los demás estilos para su sitio web.
Como se mencionó anteriormente, separa la presentación del diseño, lo que hace que su código sea más fácil de administrar y mantener.
En el lado negativo, CSS y HTML5 pueden tomar tiempo para aprender y escribir correctamente en comparación con la antigua forma de escribir código.
Tenga en cuenta que con CSS, tiene diferentes formas de cambiar el color de la fuente, y cada uno de esos métodos tiene su propio conjunto de ventajas y desventajas, como se discutió anteriormente.
Consejos para cambiar el color de la fuente HTML
Ahora que sabe cómo cambiar el color de la fuente HTML, aquí hay algunos consejos que lo ayudarán.
Utilice un selector de color
En lugar de elegir colores al azar, use selectores de color para seleccionar los colores correctos. El beneficio de un selector de color es que le dará el nombre del color y los valores hexadecimales, RGB y HSL correctos que necesita usar en su código.
Comprobar el contraste
El texto oscuro con fondo oscuro y el texto claro con fondo claro no funcionan bien juntos. Harán que el texto de su sitio sea difícil de leer. Sin embargo, puede utilizar un verificador de contraste para asegurarse de que los colores de su sitio sean accesibles y el texto sea fácil de leer.
Encuentre el color usando el método de inspección
Si ve un color que le gusta en un sitio web, puede inspeccionar el código para obtener el valor hexadecimal, RGB o HSL del color. En Chrome, todo lo que tiene que hacer es apuntar el cursor a la parte de la página web que desea inspeccionar, hacer clic con el botón derecho y seleccionar Inspeccionar. Esto abrirá el panel de inspección de código, donde puede ver el código HTML de un sitio web y los estilos correspondientes.
Resumen
Cambiar el color de la fuente HTML puede ayudar a mejorar la legibilidad y accesibilidad de su sitio web. También puede ayudarlo a establecer la coherencia de marca en los estilos de su sitio web.
En esta guía, ha aprendido acerca de cuatro formas diferentes de cambiar el color de la fuente HTML: con nombres de color, códigos hexadecimales, valores RGB y HSL.
También cubrimos cómo puede cambiar el color de la fuente con CSS en línea, incrustado y externo y cómo usar la etiqueta de fuente y los pros y contras de cada método. A estas alturas, ya debe comprender bien qué método debe utilizar para cambiar el color de la fuente HTML, por lo que lo único que queda por hacer ahora es implementar estos consejos en su sitio.
¿Qué piensas sobre cambiar el color de la fuente con CSS y la etiqueta de fuente? ¡Infórmenos en la sección para comentarios!
Ahorre tiempo, costos y maximice el rendimiento del sitio con:
- Ayuda instantánea de expertos en alojamiento de WordPress, 24 horas al día, 7 días a la semana.
- Integración de Cloudflare Enterprise.
- Alcance de audiencia global con 29 centros de datos en todo el mundo.
- Optimización con nuestro monitoreo de rendimiento de aplicaciones integrado.
Todo eso y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución de dinero de 30 días. Consulte nuestros planes o hable con ventas para encontrar el plan adecuado para usted.
