Cómo cambia el color de fuente HTML

Cuando se trata de personalizar su sitio, el color de fuente a menudo se pasa por alto. En la mayoría de los casos, los propietarios del sitio web dejan el color de la fuente predeterminada, como el negro o cualquiera que sea su estilo definido para el color del cuerpo y el título.
Sin embargo, es una buena idea cambiar el color de la fuente HTML a su sitio 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 fuente en su sitio web. En esta publicación, le mostraremos diferentes formas de cambiar el color de las fuentes de su sitio, así como por qué le gustaría hacer esto primero.
¿Por qué cambiar el color de fuente HTML? Le gustaría cambiar el color de la fuente, ya que esto puede ayudarlo a mejorar la legibilidad y la accesibilidad de su sitio web. Por ejemplo, si su sitio usa un esquema de color más oscuro, dejar el color de la fuente negra dificultaría leer el texto en su sitio. Otra razón por la que le gustaría considerar cambiar el color de la fuente es si usa un color más oscuro. Desde la paleta de colores de su marca. Esta sigue siendo una oportunidad para fortalecer su marca. Consolida la coherencia de la marca y garantiza que el texto en todos sus canales de comercialización se vea igual.
Con esto fuera de la carretera, veamos cómo puede definir y 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 … ¡pero es una edición simple que puede agregar mucha personalidad! Haga clic para enviar formas de tweet para definir el color Hay varias formas de definir el color en el diseño web, incluidos los nombres, los valores RGB, los códigos hexadecimales y los valores de HSL. Echemos un vistazo a cómo funciona. El nombre del color Los nombres de color son la forma más fácil de definir un color en sus estilos CSS. El nombre del color se refiere al nombre específico del color HTML. Actualmente, se aceptan 140 nombres de color y puede usar cualquiera de estos colores en sus estilos, por ejemplo, puede usar “azul” para establecer el color para un elemento azul individual. Color HTML. Sin embargo, la desventaja de este enfoque es que no se aceptan todos los nombres de color. En otras palabras, si usa un color que no está en la lista de colores aceptado, no podrá usarlo en su diseño con el nombre de su color. Valores RGB y RGBA, tenemos los valores RGB y RGBA. RGB significa rojo, verde y azul. Define el color mezclando los valores de rojo, verde y azul, similar a la forma en que mezcla un color en una paleta real.

Valores de RGB. El valor RGB se ve así: RGB (153,0,255). El primer número especifica el color de entrada roja, el segundo especifica el color de entrada verde y el tercero especifica el azul.

El valor de cada color introducido puede variar entre 0 y 255, donde 0 significa que el color no está presente en absoluto y 255 significa que el color está en la máxima intensidad. El valor RGBA agrega otro valor a la mezcla y este es el valor alfa que representa la opacidad. Varía de 0 (no transparente) a 1 (completamente transparente). Valor Hexcodes Hex es otra opción para seleccionar el color fácil de usar. Los códigos de color hexadecimales funcionan similar a los códigos RGB. Consisten en números de 0 a 9 y letras de A a F. El código hexadecimal se muestra de la siguiente manera: #800080. Las dos primeras letras especifican la intensidad del color rojo, los dos números medios especifican la intensidad del color verde y las dos últimas establecen la intensidad del color azul.
HSL y HSLA valora Otra forma de definir los colores en HTML es el uso de valores HSL. HSL significa sombra, saturación y brillo.

Valores de color HSL. Hue usa grados de 0 a 360. En una rueda de color estándar, el rojo es de alrededor de 0/360, el verde está en 120 y el azul está en 240. La saturación utiliza porcentajes para definir cuán saturado es el color. 0 representa en blanco y negro, y 100 representa el color completo. Finalmente, el brillo utiliza porcentajes similares a la saturación. En este caso, el 0% representa el negro y el 100% representa el blanco. Por ejemplo, el color morado que usé en este artículo se vería así en HSL: HSL (276, 100%, 50%).
HSL, como RGB, acepta la opacidad. En este caso, utilizaría el valor HSLA donde A representa alfa y se define en un número de 0 a 1. Si queremos reducir la opacidad del ejemplo púrpura, usamos este código: HSL (276, 100%, 50 %, .85). Ahora que sabe cómo definir el color, mire diferentes formas de cambiar el color de la fuente HTML. Las viejas etiquetas: antes de que HTML5 se inserta y se establezca como un estándar de codificación, puede cambiar el color de la fuente usando etiquetas de fuentes. Específicamente, usaría la etiqueta de fuente con el atributo de color para establecer el color del texto. El color se ha especificado por el nombre o con el código hexadecimal. Aquí hay un ejemplo de cómo este código con el código de color hexadecimal: Este texto es púrpura. y así podría Establezca el texto de color en púrpura usando el nombre de color. Este texto es púrpura. Sin embargo, la etiqueta se deprecia 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 del HTML. Por lo tanto, es lógico que las etiquetas ya no sean aceptadas en HTML5. Entonces, si la etiqueta ya no se acepta, ¿cómo se cambia el color de la fuente HTML? La respuesta es con las hojas de estilo de estilo picante o CSS.

Los nuevos estilos: CSS para cambiar el color de la fuente HTML con CSS, usará la propiedad de color CSS asociada con el selector apropiado. CSS le permite usar los nombres de color, RGB, Hexadecimal y HSL para especificar el color. Hay tres formas de usar CSS para cambiar el color de la fuente. CSS Inline CSS Inline se agrega directamente a su archivo HTML. Utilizará la etiqueta HTML, como
, entonces estará diseñando con la propiedad de color CSS de la siguiente manera:
Este es un párrafo morado.
Si desea usar un valor hexagonal, su código Se verá así:
Este es un párrafo morado. Código:
Este es un párrafo morado.
Los ejemplos anteriores le muestran cómo cambiar el color de un párrafo en su sitio web. Pero no te limitas a los párrafos. Puede cambiar el color de la fuente de títulos, así como los enlaces. Por ejemplo, el reemplazo de la etiqueta
anterior con

cambiará el color del texto del texto, mientras que su reemplazo con la etiqueta cambiará el color de ese enlace. También puede usar el elemento para colorear cualquier cantidad de texto.
Regístrese para el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!
Suscríbase ahora
Si desea cambiar el color de fondo de todo el párrafo o título, es muy similar a cómo cambiaría el color de la fuente. En su lugar, debe usar el atributo de color de fondo y usar los nombres Color, Hex, RGB o HSL para establecer el color. Aquí hay un ejemplo:
CSS Built -In CSS se encuentra en las etiquetas y se coloca entre las etiquetas de cabeza del documento HTML. El código se mostrará de esta manera si desea usar el nombre de color: < } El código anterior cambiará el color de cada párrafo en la página en púrpura. Similar al método en línea CSS, puede usar diferentes selectores para cambiar el color de la fuente de títulos y enlaces. Si desea usar el código hexadecimal, así es como se vería el código:
{color: #800080; }! (153,0,255.0.75),} y el código HSL se vería así:
{Color: HSL (276, 100 %, 50%),}
CSS externo Finalmente, puede usar CSS externo para cambiar el color de 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 style.css. Esta hoja de estilo es responsable de todos los estilos de su sitio y especifica los colores y dimensiones de las fuentes, bordes, rellenos, familias de fuentes, colores de fondo y más. En resumen, la hoja de estilo es responsable de cómo su sitio se ve visualmente visualmente. Para cambiar el color de la fuente con CSS externo, usaría selectores para estilizar las piezas HTML que desee. Por ejemplo, este código cambiará todo el texto en su sitio web: Body {Color: Purple;} Tenga en cuenta que puede usar los valores RGB, Hexadecimal y HSL y no solo los nombres de color para cambiar el color de la fuente. Si desea editar la hoja de estilo, es aconsejable hacerlo en un editor de código. ¿Necesita extremadamente rápido, confiable y completamente seguro para su sitio de WordPress? Kinsta ofrece toda esta y 24/7 asistencia de clase mundial de expertos en WordPress. Revise nuestros planes.
En línea, incorporado o externo?Así que ahora sabes cómo usar CSS para cambiar el color de la fuente.Pero, ¿qué método debe usar?Si usa el código en línea CSS, lo agregará directamente al archivo HTML.En general, este método es adecuado para remedios rápidos.Si desea cambiar el color de un párrafo o título en particular 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 del archivo HTML.Cuanto más grande sea su archivo HTML, más tiempo llevará hasta que se cargue su página web.Además, el CSS en línea puede desordenar HTML.Como tal, el método de uso de CSS para cambiar el color de la fuente HTML generalmente se desaconseja.CSS incorporado se coloca entre las etiquetas y en el estilo etiquetas
. Al igual que CSS en línea, es bueno para remedios rápidos y sobrescribir los estilos especificados en una hoja de estilo externo. Una distinción notable entre los estilos en línea y construido es que se aplicarán a cualquier página en la que se carguen las etiquetas de la cabeza, mientras que los estilos en línea solo se aplican a la página específica en la que se encuentran, generalmente el elemento dirigido a los respectivos página. El último método, CSS externo, utiliza una hoja de estilo dedicada para definir sus estilos visuales. En general, es mejor usar una hoja de estilo externo 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, de modo que el código sea fácil de administrar y mantener. Tenga en cuenta que los estilos en línea e incorporados pueden sobrescribir los estilos establecidos en la hoja de estilo externo. Etiquetas de fuentes o estilos CSS: Pro y los Contras Argumentos Los dos métodos principales para cambiar los colores de fuentes HTML son el uso de fuentes o estilos CSS. Ambos metodos tienen sus ventajas y desventajas. HTML FUENT Etiquetas Ventajas y desventajas 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 tarda más en aprender que tipo
. Si tiene un sitio web más antiguo que no usa HTML5, entonces la etiqueta de fuentes es un método viable para cambiar el color de la fuente. Incluso si 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 se depreció en HTML5. Se debe evitar el uso del código obsoleto, ya que los navegadores pueden dejar de aceptarlo en cualquier momento. Esto puede llevar a romper su sitio y el correcto no funcional o, lo que es peor, no falso para sus visitantes. Ventajas y desventajas CSS CSS, así como la etiqueta de fuentes, tiene sus ventajas y desventajas. La ventaja más significativa del uso de CSS es que es la forma correcta de cambiar el color de la fuente y especificar todos los demás estilos para su sitio. Como mencioné anteriormente, separé la presentación de diseño, lo que hace que el código sea más fácil de administrar y mantener . La desventaja, CSS y HTML5 pueden requerir tiempo para aprender y escribir correctamente, en comparación con la antigua forma de escribir el código. Tenga en cuenta que con CSS, tiene diferentes formas de cambiar el color de la fuente y cada uno de estos métodos tiene su propio conjunto de pros y contras, como discutimos 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

Los selectores de color simplifican el proceso de selección de color.En lugar de elegir colores aleatorios, use selectores de color para seleccionar los colores correctos.La ventaja de un selector de color es que le dará el nombre de color y los valores correctos de Hex, RGB y HSL que debe usar en el código.Verifique el contraste, use un verificador de contraste para probar varios informes de contraste de texto en el texto.El texto oscuro con fondo oscuro, así como el texto abierto con fondo abierto no funciona bien juntos.Harán que el texto en su sitio web 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 utilizando el método Inspect