Para que nuestra web se vea lo más profesional posible tenemos que cambiar el color que traen las letras por defecto en los navegadores, a continuación aprenderás a hacerlo fácilmente usando html y css.

La propiedad color soporta los formatos, hexadecimal, rgb, rgba, hsl o el nombre del color.

Cambiar el color del todo el texto de la web

La regla css para cambiar el color del texto es la siguiente color: código del color; Podemos hacer que el color del texto cambie en todo el html debemos aplicar el color en el body como en el siguiente ejemplo.

body {
  color: #7d7d7d;
}

este código cambiará el color de las letra a un tono gris.

Cambiar el color de los encabezados h1, h2, h3

Los encabezados de nuestros artículos son realmente importantes y por ello debemos resaltarlos para facilitar la lectura de nuestros usuarios.

Normalmente las etiquetas h deben ser más oscuras para crear un contraste con los título y párrafos del texto. El código cambiar los encabezados es el siguiente.

h1 {
  color: hsl(227, 2%, 12%);
}

/* para ponerselo a todos los encabezados has esto */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsl(227, 2%, 12%);
}

Cambiar el color de los párrafos

El color de los párrafos de un artículo es vital ya que es lo que la mayoría de los usuarios leen en nuestra web la forma correcta de establecer los estilos de color del texto es la siguiente:

p {
  color: rgb(125, 125, 125);
}

Agregando el color del texto directamente en tu html

Muchas veces necesitamos agregar el color en una etiqueta dentro de nuestro html sin necesidad de recurrir a una hoja de estilos la forma correcta de lograrlo es la siguiente.

<body>
  <h1 style="color: #3a3a3a ;">Esto es un titulo</h1>
  <p style="color: #7d7d7d;">Esto es un párrafo</p>
</body>

Pautas y consejos a tener en cuenta a la hora de establecer el color del texto de tu página web

Para finalizar queremos ofrecerte una lista con algunos consejos que te servirán para escoger el color de texto ideal para tu web.

  • Si el fondo de tu web es oscuro el blanco el la mejor opción para tu texto.

  • No uses el color negro puro ya que es demasiado intenso, más bien intenta con tonos un poco más cercanos al gris.

  • Siempre las etiquetas h deben ser más oscuras que el resto del texto.

  • El color de los links debe ser diferente al del texto para resaltar que es un enlace y incentivar al usuario a hacer click en el.