CSS Font Color

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

As the name suggests, you apply the value by designating the desired colour and bringing in the colour property. This might be any of the specified colours red, green, blue, orange, crimson, cyan, etc. Browsers can recognise about 147 identified colours.

The basic syntax looks like this:

// Another Syntax

Colours in Hexadecimal (or Simply Hex Colours)

Colours are represented using hex values, which have six characters. The pound/number symbol (#) is used first, followed by any number between 0 and 9, and then any letter between A and F.

Red is represented by the first two values, green by the next two, and blue by the last two. There is no restriction on your colour hues when working with hex values.

Syntax

RGB Colors

Red, green, and blue are referred to as RGB. You may set the colour in RGB coordinates by varying the red, green, and blue amounts. The three are represented by integers ranging from 0 to 255.

RGB can also be referred to as rgba. The additional "a" stands for alpha, which allows you to adjust the colour's opacity. It accepts a value between 0.0 and 1.0, where 0.0 denotes 0% opacity, 0.5 50% opacity, and 1.0 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha).

If you would rather not have an alpha value, you may restrict it to rgba(amountOfRed, amountOfGreen, and amountOfBlue).

The normal RGB values have the following syntax:

And this is how the 50% (0.5) opacity illustrates the alpha value in action:

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 full basic syntax is hsl (colorDegree, saturationPercentage, lightnessPercentage, alpha). If you don't want an alpha value, you can restrict it to hsl(colorDegree, saturationPercentage, lightnessPercentage).

Syntax

This is how you may give the hsl colour a certain opacity:

When assigning colours, which one should you use named colors, hex colors, RGB colours, or HSL colours?

One of its great features is that several methods use CSS to accomplish the same task. This is demonstrated using colour in writing.

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

Adding colour to your text may increase the visual appeal of your website. Choosing the appropriate colour scheme might also make your material easier to read.