\u00bfPor qu\u00e9 cambiar el color de la fuente HTML?<\/h2>\n
Querr\u00e1s 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\u00f3n de colores m\u00e1s oscura, dejar el color de la fuente en negro dificultar\u00eda la lectura del texto en tu sitio web.<\/p>\n
Otra raz\u00f3n por la que deber\u00edas considerar cambiar el color de la fuente es si vas a utilizar un color m\u00e1s 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.<\/p>\n
Con esto fuera del camino, veamos c\u00f3mo puedes definir y cambiar el color de la fuente HTML<\/a>.<\/p>\n\n Existen varias formas de definir el color en el dise\u00f1o web, como el nombre, los valores RGB, los c\u00f3digos hexadecimales y los valores HSL. Veamos c\u00f3mo funcionan.<\/p>\n Los nombres de los colores<\/a> son la forma m\u00e1s sencilla de definir un color en tus estilos CSS. El nombre del color se refiere al nombre espec\u00edfico del color HTML. Actualmente, hay 140 nombres de color admitidos, y puedes utilizar cualquiera de esos colores en tus estilos. Por ejemplo, puedes utilizar \u00abazul\u00bb para establecer el color de un elemento individual en azul.<\/p>\n 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\u00e1 en la lista de colores admitidos, no podr\u00e1s utilizarlo en tu dise\u00f1o por su nombre de color.<\/p>\n A continuaci\u00f3n, tenemos los valores RGB y RGBA<\/a>. 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\u00edas un color en una paleta real.<\/p>\n El valor RGB tiene el siguiente aspecto RGB(153,0,255). El primer n\u00famero especifica la entrada de color rojo, el segundo especifica la entrada de color verde y el tercero especifica el azul.<\/p>\n El valor de cada entrada de color puede oscilar entre 0 y 255, donde 0 significa que el color no est\u00e1 presente en absoluto y 255 significa que el color concreto est\u00e1 en su m\u00e1xima intensidad.<\/p>\n El valor RGBA a\u00f1ade un valor m\u00e1s a la mezcla, y es el valor alfa que representa la opacidad. Va de 0 (no transparente) a 1 (totalmente transparente).<\/p>\n Los c\u00f3digos de color hexadecimales funcionan de forma similar a los c\u00f3digos RGB. Est\u00e1n formados por n\u00fameros del 0 al 9 y letras de la A a la F. El c\u00f3digo hexadecimal tiene el siguiente aspecto #800080. Las dos primeras letras especifican la intensidad del color rojo, los dos n\u00fameros del medio especifican la intensidad del color verde, y los dos \u00faltimos establecen la intensidad del color azul.<\/p>\n Otra forma de definir los colores en HTML es utilizar los valores HSL. HSL significa tono, saturaci\u00f3n y luminosidad.<\/p>\n El matiz utiliza grados de 0 a 360. En una rueda de color est\u00e1ndar, el rojo est\u00e1 en torno a 0\/360, el verde en 120 y el azul en 240.<\/p>\n La saturaci\u00f3n utiliza porcentajes para definir el grado de saturaci\u00f3n del color. El 0 representa el blanco y negro, y el 100 representa el color completo.<\/p>\n Por \u00faltimo, la luminosidad utiliza porcentajes similares a los de la saturaci\u00f3n. En este caso, el 0% representa el negro y el 100% el blanco.<\/p>\n Por ejemplo, el color p\u00farpura que hemos estado utilizando a lo largo de este art\u00edculo tendr\u00eda este aspecto en HSL: HSL, al igual que RGB, admite la opacidad. En ese caso, utilizar\u00edas el valor HSLA, donde A representa el alfa y se define en un n\u00famero de 0 a 1. Si quisi\u00e9ramos bajar la opacidad del morado del ejemplo, utilizar\u00edamos este c\u00f3digo Ahora que ya sabes c\u00f3mo definir el color, vamos a ver diferentes formas de cambiar el color de la fuente HTML.<\/p>\n Antes de que se introdujera HTML5<\/a> y se estableciera como est\u00e1ndar de codificaci\u00f3n, pod\u00edas cambiar el color de la fuente utilizando etiquetas de fuente. M\u00e1s concretamente, utilizabas la etiqueta font con el atributo color para establecer el color del texto. El Aqu\u00ed tienes un ejemplo de c\u00f3mo quedaba este c\u00f3digo con el c\u00f3digo de color hexadecimal:<\/p>\n Y as\u00ed es como se pod\u00eda establecer el color del texto en morado utilizando el nombre del color.<\/p>\n Sin embargo, la etiqueta Entonces, si la etiqueta <font> ya no se admite, \u00bfc\u00f3mo se cambia el color de la fuente en HTML? La respuesta es con hojas de estilo en cascada o CSS<\/a>.<\/p>\n Para cambiar el color de la fuente HTML con CSS, utilizar\u00e1s la propiedad de color de CSS junto con el selector apropiado. CSS<\/a> 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.<\/p>\n El CSS en l\u00ednea se a\u00f1ade directamente a tu archivo HTML. Utilizar\u00e1s la etiqueta HTML como <p> y luego le dar\u00e1s estilo con la propiedad de color CSS de esta manera:<\/p>\n Si quieres utilizar un valor hexadecimal, tu c\u00f3digo tendr\u00e1 este aspecto:<\/p>\n Si vas a utilizar el valor RGB, lo escribir\u00e1s as\u00ed:<\/p>\n Por \u00faltimo, si vas a utilizar los valores HSL, utilizar\u00e1s este c\u00f3digo<\/p>\n Los ejemplos anteriores te muestran c\u00f3mo cambiar el color de un p\u00e1rrafo en tu sitio web. Pero no est\u00e1s limitado s\u00f3lo a los p\u00e1rrafos. Puedes cambiar el color de la fuente de tus encabezados, as\u00ed como de los enlaces.<\/p>\n Por ejemplo, si sustituyes la etiqueta Si quieres cambiar el color de fondo de todo el p\u00e1rrafo o de un encabezado, es muy similar a c\u00f3mo cambiar\u00edas el color de la fuente. Tienes que utilizar el atributo El CSS incrustado est\u00e1 dentro de las etiquetas El c\u00f3digo tendr\u00e1 este aspecto si quieres utilizar el nombre del color:<\/p>\n El c\u00f3digo anterior cambiar\u00e1 el color de todos los p\u00e1rrafos de la p\u00e1gina a morado. De forma similar al m\u00e9todo CSS en l\u00ednea, puedes utilizar diferentes selectores para cambiar el color de la fuente de tus encabezados y enlaces.<\/p>\n Si quieres utilizar el c\u00f3digo hexadecimal, as\u00ed es como quedar\u00eda el c\u00f3digo:<\/p>\n El ejemplo siguiente utiliza los valores RBGA para que puedas ver un ejemplo de ajuste de la opacidad:<\/p>\n Y el c\u00f3digo HSL quedar\u00eda as\u00ed:<\/p>\n Por \u00faltimo, puedes utilizar CSS externo<\/a> 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.<\/p>\n Esta hoja de estilos es responsable de todos los estilos de tu sitio web y especifica los colores y tama\u00f1os de las fuentes, los m\u00e1rgenes, los rellenos, las familias de fuentes, los colores de fondo y mucho m\u00e1s. En resumen, la hoja de estilos es responsable del aspecto visual de tu sitio.<\/p>\n Para cambiar el color de la fuente con CSS externo, utilizar\u00edas selectores<\/a> para dar estilo a las partes del HTML que quieras. Por ejemplo, este c\u00f3digo cambiar\u00e1 todo el cuerpo de texto de tu sitio:<\/p>\n Recuerda que puedes utilizar valores RGB, hexadecimales y HSL y no s\u00f3lo 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\u00f3digo<\/a>.<\/p>\n Ahora ya sabes c\u00f3mo puedes utilizar CSS para cambiar el color de la fuente. Pero, \u00bfqu\u00e9 m\u00e9todo debes utilizar?<\/p>\n Si utilizas el c\u00f3digo CSS inline, lo a\u00f1adir\u00e1s directamente en tu archivo HTML. En general, este m\u00e9todo es adecuado para arreglos r\u00e1pidos. Si quieres cambiar el color de un p\u00e1rrafo o un encabezado espec\u00edfico en una sola p\u00e1gina, este m\u00e9todo es el m\u00e1s r\u00e1pido y el menos complicado.<\/p>\n Sin embargo, los estilos en l\u00ednea pueden aumentar el tama\u00f1o de tu archivo HTML. Cuanto m\u00e1s grande sea tu archivo HTML, m\u00e1s tardar\u00e1 en cargarse tu p\u00e1gina web. Adem\u00e1s, el CSS en l\u00ednea puede desordenar tu HTML. Por ello, se desaconseja generalmente el m\u00e9todo inline de utilizar CSS para cambiar el color de la fuente HTML.<\/p>\n El CSS incrustado se coloca entre las etiquetas <head> y dentro de las etiquetas <style>. Al igual que el CSS en l\u00ednea, es bueno para hacer arreglos r\u00e1pidos y anular los estilos especificados en una hoja de estilos externa.<\/p>\n Una distinci\u00f3n notable entre los estilos en l\u00ednea y los incrustados es que se aplicar\u00e1n a cualquier p\u00e1gina en la que se carguen las etiquetas head, mientras que los estilos en l\u00ednea s\u00f3lo se aplican a la p\u00e1gina espec\u00edfica en la que se encuentran, normalmente al elemento al que se dirigen en esa p\u00e1gina.<\/p>\n El \u00faltimo m\u00e9todo, 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 \u00fanico lugar, desde el que sean f\u00e1ciles de editar. Esto tambi\u00e9n separa la presentaci\u00f3n y el dise\u00f1o, por lo que el c\u00f3digo es f\u00e1cil de gestionar y mantener.<\/p>\n Ten en cuenta que los estilos en l\u00ednea e incrustados pueden anular los estilos establecidos en la hoja de estilos externa.<\/p>\n Los dos m\u00e9todos principales para cambiar los colores de las fuentes HTML son utilizar la etiqueta de fuente o los estilos CSS. Ambos m\u00e9todos tienen sus pros y sus contras.<\/p>\n La etiqueta de fuente HTML es f\u00e1cil de usar, as\u00ed que eso es un pro a su favor. Por lo general, el CSS es m\u00e1s complicado y lleva m\u00e1s tiempo aprenderlo que escribir Aunque la etiqueta font es f\u00e1cil de usar, no deber\u00edas 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\u00f3digo obsoleto, ya que los navegadores podr\u00edan dejar de soportarlo en cualquier momento. Esto puede hacer que tu sitio web se rompa y no funcione correctamente, o peor a\u00fan, que no se muestre en absoluto para tus visitantes.<\/p>\n El CSS, al igual que la etiqueta de fuente, tiene sus pros y sus contras. La ventaja m\u00e1s significativa de usar CSS es que es la forma adecuada de cambiar el color de la fuente y especificar todos los dem\u00e1s estilos para tu sitio web.<\/p>\n Como se ha mencionado anteriormente, separa la presentaci\u00f3n del dise\u00f1o, lo que hace que tu c\u00f3digo sea m\u00e1s f\u00e1cil de gestionar y mantener.<\/p>\n En el lado negativo, CSS y HTML5 pueden llevar tiempo para aprender y escribir correctamente en comparaci\u00f3n con la antigua forma de escribir c\u00f3digo.<\/p>\n Ten en cuenta que con CSS tienes diferentes formas de cambiar el color de la fuente, y cada uno de esos m\u00e9todos tiene su propio conjunto de pros y contras, como ya hemos comentado.<\/p>\n Ahora que sabes c\u00f3mo cambiar el color de la fuente HTML, aqu\u00ed tienes algunos consejos que te ayudar\u00e1n.<\/p>\n En lugar de elegir los colores al azar, utiliza los selectores de color<\/a> para seleccionar los colores adecuados. La ventaja de un selector de color es que te dar\u00e1 el nombre del color y los valores hexadecimales, RGB y HSL correctos que necesitas utilizar en tu c\u00f3digo.<\/p>\n Tanto el texto oscuro con fondo oscuro como el texto claro con fondo claro no funcionan bien juntos. Har\u00e1n que el texto de tu sitio sea dif\u00edcil de leer. Sin embargo, puedes utilizar un comprobador de contraste<\/a> para asegurarte de que los colores de tu sitio son accesibles y el texto es f\u00e1cil de leer.<\/p>\nFormas de definir el color<\/h2>\n
Nombre del color<\/h3>\n
![\"Nombres](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/red-color-name.png\")
Valores RGB y RGBA<\/h3>\n
![\"Valores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/rgb-values.png\")
Valor HEX<\/h3>\n
![\"Los](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/hex-values.png\")
Valores HSL y HSLA<\/h3>\n
![\"Valores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/HSL-color-values.png\")
hsl(276, 100%, 50%)<\/code>.<\/p>\nhsl(276, 100%, 50%, .85)<\/code>.<\/p>\nLo antiguo:
<font><\/code> Etiquetas<\/h2>\ncolor<\/code> se especificaba con su nombre o con su c\u00f3digo hexadecimal.<\/p>\n<font color=\"#800080\">This text is purple.<\/font><\/code><\/pre>\n<font color=\"purple\">This text is purple.<\/font> <\/code><\/pre>\n<font><\/code> est\u00e1 obsoleta en HTML5 y ya no se utiliza. Cambiar el color de la fuente es una decisi\u00f3n de dise\u00f1o, y el dise\u00f1o no es el objetivo principal de HTML. Por tanto, tiene sentido que las etiquetas <font><\/code> ya no se admitan en HTML5.<\/p>\nLo nuevo: Estilos CSS<\/h2>\n
CSS en l\u00ednea<\/h3>\n
<p style=\"color: purple\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:#800080\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:RGB(153,0,255)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:hsl(276, 100%, 50%)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p><\/code> de arriba por <h2><\/code> cambiar\u00e1s el color del texto de ese encabezado, mientras que si la sustituyes por la etiqueta <a><\/code> cambiar\u00e1s el color de ese enlace. Tambi\u00e9n puedes utilizar el elemento <span><\/a> para colorear cualquier cantidad de texto.<\/p>\nbackground-color<\/code> en su lugar y utilizar el nombre del color, los valores hexadecimales, RGB o HSL para establecer el color. Aqu\u00ed tienes un ejemplo<\/p>\n<p style=\"background-color: purple\"><\/code><\/pre>\nCSS incrustado<\/h3>\n
<style><\/code> y se coloca entre las etiquetas head de tu documento HTML.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: purple;\n }\n<\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: #800080;\n }\n <\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<style>\n\n<p> {\n\ncolor: RGB(153,0,255,0.75),\n\n}\n\n<\/style>\n\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: hsl(276, 100%, 50%),\n }\n <\/style>\n<\/head><\/code><\/pre>\nCSS externo<\/h3>\n
body {color: purple;}<\/code><\/pre>\n\u00bfEn linea, incrustado o externo?<\/h3>\n
Etiquetas de fuente o estilos CSS: Ventajas y desventajas<\/h2>\n
Etiquetas de fuente HTML: pros y contras<\/h3>\n
<font color=\"purple\"><\/code>. Si tienes un sitio web antiguo que no utiliza HTML5, la etiqueta de fuente es un m\u00e9todo viable para cambiar el color de la fuente.<\/p>\nVentajas e inconvenientes del CSS<\/h3>\n
Consejos para cambiar el color de la fuente en HTML<\/h2>\n
Utiliza un selector de color<\/h3>\n
![\"Los](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Color-picker-tool.png\")
Comprueba el contraste<\/h3>\n
![\"Utiliza](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Checking-contrast.png\")
Encuentra el color mediante el m\u00e9todo de inspecci\u00f3n<\/h3>\n
![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Using-Inspect-to-get-color-codes.png\")