Cómo cambiar el color de fuente HTML
Publicado: 2021-11-29Cuando 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 los sitios web dejan el color de fuente predeterminado como el negro o cualquiera 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 desalentador, 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é querría hacerlo en primer lugar.
¿Por qué cambiar el color de la fuente HTML?
Le gustaría 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 negro dificultaría la lectura del texto en su sitio web.
Otra razón por la que le gustarí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. Crea consistencia de marca y garantiza que el texto en todos sus canales de marketing se vea igual.
Con eso fuera del camino, veamos cómo puede definir y cambiar el color de la fuente HTML.
Formas de definir el color
Hay varias formas de definir el color en el diseño web, incluido 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 colores son la forma más fácil de definir un color en sus estilos CSS. El nombre del color hace referencia 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 usar "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 forma similar a como mezclaría un color en una paleta real.
El valor RGB tiene este 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 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 hexadecimal
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 colores estándar, el rojo está alrededor de 0/360, el verde está en 120 y el azul está en 240.
La saturación utiliza porcentajes para definir qué tan saturado está el color. 0 representa blanco y negro y 100 representa a todo color.
Por último, la luminosidad usa porcentajes de manera similar a la saturación. En este caso, el 0 % representa el negro y el 100 % representa el 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 del 0 al 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 HTML5 se introdujera y se estableciera como el estándar de codificación, podía cambiar el color de la fuente usando 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 especificaba con su nombre o con su código hexadecimal.
Aquí hay un ejemplo de cómo se veía este código con el código de color hexadecimal:
<font color="#800080">This text is purple.</font>Y así es como podría establecer el color del texto en púrpura usando 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 usa. 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 lo tanto, tiene sentido que las etiquetas <font> ya no sean compatibles con HTML5.
Entonces, si la etiqueta <font> ya no es compatible, ¿cómo 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, utilizará la propiedad de color CSS junto 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. Usará la etiqueta HTML como <p> y luego la diseñará con la propiedad de color CSS de la siguiente manera:
<p>This is a purple paragraph.</p>Si desea utilizar un valor hexadecimal, su código se verá así:
<p>This is a purple paragraph.</p>Si vas a usar el valor RGB, lo escribirás así:
<p>This is a purple paragraph.</p>Por último, usando los valores HSL, usaría este código:
<p>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ás limitado solo a los párrafos. Puede cambiar el color de fuente de sus encabezados y enlaces.
Por ejemplo, reemplazar la etiqueta <p> anterior con <h2> cambiará el color del texto del encabezado, mientras que reemplazarla con la etiqueta <a> cambiará el color de ese enlace. También puede usar el elemento <span> para colorear cualquier cantidad de texto.
¿Quiere saber cómo aumentamos nuestro tráfico en un 1000 %?
¡Únase a más de 20,000 personas que reciben nuestro boletín semanal con consejos internos de WordPress!
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. En su lugar, debe usar el atributo background-color y usar el nombre del color, los valores hexadecimales, RGB o HSL para establecer el color. Aquí hay un ejemplo:
<p>CSS incrustado
El CSS incrustado se encuentra dentro de las etiquetas <style> y se coloca entre las etiquetas de encabezado de su documento HTML.
El código se verá así si desea usar 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 púrpura. 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 usa 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 usar 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 en 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 de cómo se ve visualmente 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 en 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.
¿Necesita alojamiento ultrarrápido, confiable y totalmente seguro para su sitio de WordPress? Kinsta proporciona todo esto y soporte de clase mundial las 24 horas, los 7 días de la semana por parte de expertos en WordPress. Consulta nuestros planes.
¿En línea, integrado o externo?
Ahora ya sabes cómo puedes usar CSS para cambiar el color de la fuente. Pero, ¿qué método debería usar?
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 hacer que su HTML sea desordenado. 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 las etiquetas <head> y dentro de las etiquetas <style>. Al igual que el CSS en línea, es bueno para soluciones rápidas y anular los estilos especificados en una hoja de estilo 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 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 usar 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 la fuente HTML son usar 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, por lo que es un profesional a su favor. Por lo general, CSS es más complicado y lleva más tiempo aprenderlo que escribir <font color="purple"> . Si tiene un sitio web antiguo que no usa HTML5, entonces 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. Debe evitarse el uso de código obsoleto, ya que los navegadores podrían dejar de admitirlo en cualquier momento. Esto puede hacer 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, como 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 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 forma anterior 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 mencionó anteriormente.
Consejos para cambiar el color de fuente HTML
Ahora que sabe cómo cambiar el color de la fuente HTML, aquí hay algunos consejos que lo ayudarán.
Use 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.
Compruebe 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 usar un verificador de contraste para asegurarse de que los colores de su sitio sean accesibles y que 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 con 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.
twittear
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 consistencia de la 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 colores, códigos hexadecimales, valores RGB y HSL.
También hemos cubierto cómo puede cambiar el color de la fuente con CSS en línea, incrustado y externo y usar la etiqueta de fuente y los pros y los contras de cada método. A estas alturas, debería tener una buena comprensión de qué método debe usar 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!