Text Colors

Previously, we added colors to text in a very intuitive and straightforward way. However, let's dive into the details of color application.

Color

Text color can be applied to a text element using the CSS color property, which can be assigned a value in various formats. The most commonly used color values are RGB, hex, and color names. Let's consider the following example, where we apply red to the text.

Note

We can find some exciting color templates at colorhunt.co.

Formats to Specify Color

Let's take a closer look at each format in detail.

Color Name

We can use reserved color words. The list of reserved colors can be found at htmlcolorcodes.com

Hex Format

Hex represents colors as a six-digit code consisting of three pairs of two-digit values. Each pair represents the intensity of red, green, and blue (in that order).

Hex format values range from 00 (no intensity) to FF (maximum intensity).

RGB Format

RGB represents colors as a series of three numbers that correspond to the intensity of red, green, and blue (in that order)

RGB format values range from 0 (no intensity) to 255 (maximum intensity).

Note

Both hex and rgb values are widely used in web design, and the choice between them will depend on personal preferences and project requirements.

Transparency

Transparency in rgb colors can be achieved by using the rgba notation (red, green, blue, alpha), where alpha is the level of opacity or transparency of the color.

The alpha value can range from 0 (completely transparent) to 1 (completely opaque). For example, the RGBA value rgba(0, 255, 0, 0.5) represents a green color with 50% opacity.