Here is a guide to color codes in HTML, which can be used to define colors in your webpage designs:

1. Hexadecimal Code

Hex codes are widely used in web design, and they represent colors using a 6-digit combination of numbers and letters. It starts with a # symbol followed by six digits, where each pair represents the red, green, and blue components of the color.

  • Format: #RRGGBB
    • RR = Red (00 to FF)
    • GG = Green (00 to FF)
    • BB = Blue (00 to FF)

Example:

  • #FF5733 = a shade of red-orange.

2. RGB (Red, Green, Blue)

The rgb() function defines colors using three values (from 0 to 255) representing the intensity of red, green, and blue.

  • Format: rgb(red, green, blue)

Example:

  • rgb(255, 87, 51) = a shade of red-orange.

3. RGBA (Red, Green, Blue, Alpha)

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

  • Format: rgba(red, green, blue, alpha)

Example:

  • rgba(255, 87, 51, 0.5) = a semi-transparent red-orange.

4. HSL (Hue, Saturation, Lightness)

HSL defines colors using three components:

  • Hue (0 to 360 degrees, represents the color itself)

  • Saturation (0% to 100%, represents the intensity of the color)

  • Lightness (0% to 100%, represents how light or dark the color is)

  • Format: hsl(hue, saturation%, lightness%)

Example:

  • hsl(10, 100%, 60%) = a vibrant shade of red-orange.

5. HSLA (Hue, Saturation, Lightness, Alpha)

HSLA adds the alpha (opacity) value to the HSL model, just like RGBA.

  • Format: hsla(hue, saturation%, lightness%, alpha)

Example:

  • hsla(10, 100%, 60%, 0.5) = a semi-transparent vibrant red-orange.

These are the main color definitions you can use in HTML to style elements on your webpage. Each method provides flexibility in terms of color selection and customization. For more details on how to work with colors.