HTML Color

HTML colors are specified using various methods in CSS. Here’s a quick rundown of the main ways to define colors in HTML and CSS:

1. Named Colors

HTML supports a set of named colors that you can use directly. For example:

<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>

There are 140 named colors, including basic ones like black, white, green, yellow, and more.

2. Hexadecimal Colors

Hexadecimal (or hex) colors are defined using a # followed by a 6-digit combination of numbers and letters. Each pair represents the red, green, and blue (RGB) components of the color.

• Example:

<p style="color: #FF5733;">This text is a shade of orange.</p>
<p style="color: #00FF00;">This text is lime green.</p>

3. RGB Colors

RGB colors are specified using the rgb() function, which takes three parameters for red, green, and blue values ranging from 0 to 255.

• Example:

<p style="color: rgb(255, 87, 51);">This text is a shade of orange.</p>
<p style="color: rgb(0, 255, 0);">This text is lime green.</p>

4. RGBA Colors

RGBA extends RGB by adding an alpha (opacity) value, which ranges from 0 (completely transparent) to 1 (completely opaque).

• Example:

<p style="color: rgba(255, 87, 51, 0.5);">This text is a semi-transparent shade of orange.</p>
<p style="color: rgba(0, 255, 0, 0.3);">This text is a semi-transparent lime green.</p>

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness. It’s defined as hsl(hue, saturation%, lightness%), where:

• Hue is a degree on the color wheel (0 to 360).

• Saturation is a percentage (0% to 100%).

• Lightness is a percentage (0% to 100%).

• Example:

<p style="color: hsl(9, 100%, 60%);">This text is a bright orange.</p>
<p style="color: hsl(120, 100%, 50%);">This text is a pure green.</p>

6. HSLA Colors

HSLA adds an alpha value for opacity, similar to RGBA.

• Example:

<p style="color: hsla(9, 100%, 60%, 0.5);">This text is a semi-transparent bright orange.</p>
<p style="color: hsla(120, 100%, 50%, 0.3);">This text is a semi-transparent pure green.</p>

These methods allow you to use a variety of color formats to suit different needs and preferences in web design.