How to Set Text Color in HTML
- Setting any object's background colour in CSS with the background-color attribute is simple.
- What happens if you wish to change something on the page's foreground colour? Particularly text, for which you normally would not want to specify a backdrop colour.
- The colour attribute allows this to happen since CSS lacks the foreground-color property.
- In this post, I will show you how to use the colour property to change the text's colour. We will also examine the different values it accepts.
- There are four alternative ways that the colour property accepts values: named colour, RGB colour, hexadecimal colour, and HSL colour. Now, let's examine each one.
Named Colors
By specifying the desired color and utilizing the color property, you can assign a color as needed. This could be any of the designated colors such as red, green, blue, orange, crimson, cyan, and more. Most browsers support approximately 147 recognized colors.
The basic syntax looks like this:
element {
color: colorName
}
// Another Syntax
p {
color: crimson;
}
named-color
Colours in Hexadecimal (or Simply Hex Colours)
Colours are denoted by hexadecimal values, consisting of six characters. The hash symbol (#) is the initial character, succeeded by a digit from 0 to 9, and then a letter from A to F.
Red is denoted by the initial pair of values, green by the subsequent pair, and blue by the final pair. When using hexadecimal values, you have the freedom to choose any color shade.
Syntax
p {
color: #dc143c;
}
RGB Colors
Red, green, and blue are commonly known as RGB. Setting the color using RGB coordinates involves adjusting the levels of red, green, and blue. Each of these components is denoted by whole numbers between 0 and 255.
RGB can also be known as rgba, where the "a" signifies alpha, enabling control over the transparency of the color. This parameter ranges from 0.0 to 1.0, with 0.0 representing 0% transparency, 0.5 indicating 50% transparency, and 1.0 denoting full 100% transparency.
The fundamental format is rgba(redValue, greenValue, blueValue, alphaValue).
If you prefer to exclude an alpha value, you have the option to limit it to rgba(redValue, greenValue, and blueValue).
The normal RGB values have the following syntax:
p {
color: rgb(220, 20, 60);
}
rgb-color
And here is a demonstration of how an opacity of 50% (0.5) showcases the alpha value in effect:
p {
color: rgb(219, 20, 60, 0.5);
}
The RGB half-percent opacity
HSL Colors
- Hue, saturation, and lightness make up the acronym HSL. It's an additional CSS colour specification method for text and other color-sensitive elements.
- Hue is a 360° representation of the colour wheel. Accordingly, 240° is blue, 120° is green, and 0° is red.
- The percentage representation of the colour's level of greyness is called saturation. 100% is the colour, whereas 0% is the grayscale shade.
- Brightness is the percentage representation of a colour's darkness and brightness. 100% is white, while 0% is black.
- You can adjust the colour's opacity in the same way as you do with RGB colours. Thus, hsla is another.
The complete fundamental syntax is hsl (colorDegree, saturationPercentage, lightnessPercentage, alpha). In case an alpha value is not needed, you can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage).
Syntax
p {
color: hsl(348, 83%, 47%);
}
hsl-color
This is how you can assign a specific transparency to the HSL color:
p {
color: hsla(348, 83%, 47%, 0.5);
}
hsl-fifty-percent-opacity-1
When determining colors, you may choose to utilize named colors, hexadecimal (hex) codes, RGB values, or HSL values.
One of its notable characteristics is the ability of multiple techniques to achieve the desired outcome by leveraging CSS. This is exemplified through the utilization of color in typography.
There are four methods to apply colour. Therefore, you may be thinking about which is the best.
- You are limited in how far you can apply different colour shades when using named colours.
- You cannot access as many versions of red, green, blue, yellow, or any other designated colour. There are only about 147 preset colours that are supported by most browsers.
- Colours in hexadecimal are highly lively. Because your ingenuity is your sole restriction, developers use them the most. You may use several tones and even a colour no one has ever used using hex colours.
- As dynamic as hex colours are RGB colours.
Conclusion
Integrating color into your text can enhance the visual attractiveness of your website. Selecting the right color palette can also improve the readability of your content.