Styling Text and 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 blue to the text.

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 https://htmlcolorcodes.com.

CSS provides predefined color names such as blue, red, green, purple, and others. They are easy to read but limited in variety.

Hex Format

Hex represents colors as a six-digit code consisting of three pairs of two-digit values after a # symbol. 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).

Transparency with RGBA

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.