CSS - 04.2 - Color Values

Colors in CSS can be specified by the following methods:

• Predefined/Cross-browser color names
• With the currentcolor keyword
• Hexadecimal colors
• Hexadecimal colors with transparency
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• CSS Custom Variable
• Gradients

CSS Color Values Overview

Colors in CSS can be specified using various methods, allowing designers flexibility and precision in styling elements. Here’s a breakdown of these methods:

1. Predefined/Cross-browser Color Names

CSS supports 140 predefined color names (e.g., blue, red, coral, brown), which are widely recognized across browsers.

Example:

#p1 { background-color: blue; }   /* Blue background */
#p2 { background-color: red; }    /* Red background */
#p3 { background-color: coral; }  /* Coral background */
#p4 { background-color: brown; }   /* Brown background */

2. The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element, ensuring that properties like borders can inherit the text color.

Example:

#myDIV { 
    color: blue;               /* Blue text color */
    border: 10px solid currentcolor; /* Blue border color */
}

The border of Div border is blue because the div color is blue.

3. Hexadecimal Colors

Hexadecimal colors are defined using the format #RRGGBB, where RR, GG, and BB represent the intensity of red, green, and blue components, respectively.

• Format: #RRGGBB or #RGB

Example:

#p1 { background-color: #ff0000; }   /* Red */
#p2 { background-color: #00ff00; }   /* Green */
#p3 { background-color: #0000ff; }   /* Blue */

.box {
    background-color: #3498db; /* A specific shade of blue */
  }

4. Hexadecimal Colors With Transparency

To add transparency to a hexadecimal color, you can use the format #RRGGBBAA, where AA specifies the alpha channel.

Example:

#p1a { background-color: #ff000080; }   /* Red with 50% transparency */
#p2a { background-color: #00ff0080; }   /* Green with 50% transparency */
#p3a { background-color: #0000ff80; }   /* Blue with 50% transparency */

5. RGB Colors

An RGB color is specified with the rgb() function, using integers (0-255) or percentage values.

• Format: rgb(red, green, blue)

Example:

#p1 { background-color: rgb(255, 0, 0); }   /* Red */
#p2 { background-color: rgb(0, 255, 0); }   /* Green */
#p3 { background-color: rgb(0, 0, 255); }   /* Blue */

.box {
	background-color: rgb(52, 152, 219); 
	/* A specific shade of blue */
  }

6. RGBA Colors

RGBA extends RGB by adding an alpha channel for opacity. An RGBA color is specified with the rgba() function: rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:

#p1 { background-color: rgba(255, 0, 0, 0.3); }   /* Red with 30% opacity */
#p2 { background-color: rgba(0, 255, 0, 0.3); }   /* Green with 30% opacity */
#p3 { background-color: rgba(0, 0, 255, 0.3); }   /* Blue with 30% opacity */

7. HSL Colors

HSL stands for hue, saturation, and lightness, offering a cylindrical-coordinate representation of colors.

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.

Example:

#p1 { background-color: hsl(120, 100%, 50%); }   /* Green */
#p2 { background-color: hsl(120, 100%, 75%); }   /* Light Green */
#p3 { background-color: hsl(120, 100%, 25%); }   /* Dark Green */
#p4 { background-color: hsl(120, 60%, 70%); }    /* Pastel Green */

Use: For intuitive adjustments to colors based on hue, saturation, and lightness.

8. HSLA Colors

HSLA extends HSL with an alpha channel for opacity. hsla(hue, saturation, lightness, alpha)

Example:

#p1 { background-color: hsla(120, 100%, 50%, 0.3); }   /* Green with 30% opacity */
#p2 { background-color: hsla(120, 100%, 75%, 0.3); }   /* Light Green with 30% opacity */
#p3 { background-color: hsla(120, 100%, 25%, 0.3); }   /* Dark Green with 30% opacity */
#p4 { background-color: hsla(120, 60%, 70%, 0.3); }    /* Pastel Green with 30% opacity */

9. CSS Custom Properties (Variables)

• Usage: Define reusable color values throughout your CSS.
• Example:

  :root {
      --main-color: #3498db; /* Define a custom property */
  }
  
  .box {
      background-color: var(--main-color); /* Use the custom property */
  }

• When to Use: For maintaining consistent colors across a site and easy updates.
• When to Avoid: If you do not need to reuse colors or your project is very small.

10. Gradients

• Format: linear-gradient() or radial-gradient()
  • Example (Linear):

  .box {
      background: linear-gradient(to right, #3498db, #8e44ad); /* Horizontal gradient */
  }

  • Example (Radial):

  .box {
      background: radial-gradient(circle, #3498db, #8e44ad); /* Circular gradient */
  }

• When to Use: For backgrounds that require a blend of colors.
• When to Avoid: If the design is too busy or if it affects readability.