Original article: CSS Font Color – How to Style Text in HTML
Establecer el color del texto en un sitio web que estás creando puede resultar confuso al principio. Pero en este artículo, aprenderás cómo hacerlo.
Cómo establecer el color del texto en HTML
En CSS, la propiedad background-color es bastante sencilla para establecer el color de fondo de cualquier cosa.
Entonces, ¿Qué sucede si deseas establecer el color de primer plano de algo en la página? Especialmente el texto, para el que en condiciones normales no querrías establecer un color de fondo.
No hay una propiedad de foreground-color en CSS, por lo que hace que esto sea posible es la propiedad color.
En este artículo, te guiaré a través de cómo configurar el color del texto usando la propiedad color. También veremos las diversas formas en que toma valores.
La propiedad color toma valores de 4 maneras diferentes: Color con nombre, color hexadecimal, color RGB y color HSL. Veamos cada uno ahora.
Colores con nombre
Como su nombre indica, ingresa la propiedad color y aplica el valor nombrando el color deseado. Puede ser rojo, verde, azul, naranja, carmesí, cian o cualquier otro color con nombre. Hay alrededor de 147 colores con nombre reconocidos por los navegadores.
La sintaxis básica se ve así:
element {
color: nombreColor
}
<p>freeCodeCamp</p>
p {
color: crimson;
}
Colores hexadecimales (O sólo colores Hex)
Los valores hexadecimales se utilizan para representar colores con un total de 6 caracteres. Comienzan con el signo almohadilla/número (#), luego cualquier número del 0 al 9 y finalmente cualquier letra de la A a la F.
Los 2 primeros valores representan el rojo, los dos siguientes representan el verde y los 2 últimos representan el azul. Con valores hexadecimales, no hay límite para los tonos de colores que puedes usar.
<p>freeCodeCamp</p>
p {
color: #dc143c;
}
Colores RGB
RGB significa rojo, verde y azul. Con RGB, especificas el color en términos de la cantidad de rojo, verde y azul deseados. Los tres se expresan con números entre 0 y 255.
Hay un tipo de RGB llamado rgba. La 'a' adicional significa alfa, lo que permite especificar la opacidad del color. Toma un valor de 0,0 a 1,0: 0,0 significa 0 % de opacidad, 0,5 significa 50 % de opacidad y 1,0 significa 100 % de opacidad.
La sintaxis básica es rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul, alfa).
Puedes limitarlo a rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul) si no deseas un valor alfa.
Aquí está la sintaxis de los valores RGB regulares:
<p>freeCodeCamp</p>
p {
color: rgb(220, 20, 60);
}
Y aquí está demostrando el valor alfa en acción con un 50 % (0,5) de opacidad:
p {
color: rgb(219, 20, 60, 0.5);
}
Colores HSL
HSL significa tono, saturación y luminosidad. Es otra forma de especificar el color del texto (y cualquier otra cosa que tome color) en CSS.
- Hue representa la rueda de color en 360°. Entonces, 0° es rojo, 120° es verde y 240° es azul.
- La saturación es la cantidad de gris en el color, expresada como un porcentaje. 0% es el tono de gris y 100% es el color en sí.
- La luminosidad es la cantidad de oscuridad y luminosidad en el color expresada como porcentaje. 0% es negro y 100% es blanco.
Al igual que con los colores RGB, también puedes establecer la opacidad del color. Entonces, también está hsla.
La sintaxis básica completa es hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad, alfa). Puedes limitarlo a hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad) en caso de que no desees un valor alfa.
<p>freeCodeCamp</p>
p {
color: hsl(348, 83%, 47%);
}
Puedes aplicar una opacidad particular al color hsl como este:
p {
color: hsla(348, 83%, 47%, 0.5);
}
¿Debes utilizar colores con nombre, colores hexadecimales, colores RGB o colores HSL para asignar colores?
Una de las cosas maravillosas de CSS es que hay múltiples formas de hacer lo mismo. Has visto esto al aplicar colores al texto.
Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál es la mejor para usar.
Cuando usas colores con nombre, estás un poco limitado en cuanto a cuán lejos puedes llegar al aplicar diferentes tonos de colores. El rojo, el verde, el azul, el amarillo o cualquier otro color con nombre tiene muchas variaciones a las que no tendrás acceso con los colores con nombre. Solo tendrás acceso a alrededor de 147 colores predefinidos reconocidos por los navegadores.
Los colores hexadecimales son muy dinámicos. Son los más utilizados entre los desarrolladores porque el límite es tu creatividad. Con los colores hexadecimales, puedes usar varios tonos e incluso usar un color que nadie haya usado nunca.
Los colores RGB son tan dinámicos como los colores hexadecimales. Además de poder especificar cuánto rojo, verde y azul deseas de 0 a 255, también puedes establecer qué tan transparente deseas que sea el color con el valor alfa adicional.
HSL es el más dinámico de todos. Puedes especificar el color exacto que deseas en grados de 0 a 360 dentro de la rueda de colores, establecer qué tan saturado y oscuro deseas que sea en porcentajes, y también establecer una opacidad de 0.0 a 1.0.
Realmente, depende de ti, del uso que le quieras dar y de cuán creativo o específico quieras ser.
Conclusión
La aplicación de colores al texto ayuda a que tu sitio web sea más atractivo para los visitantes. La combinación de colores correcta también puede ayudarte a que el contenido sea más legible.
En este artículo, has aprendido cómo aplicar colores al texto con los 4 tipos diferentes de valores que puedes usar con la propiedad de color.
Gracias por leer, y sigue programando.