Colors in CSS

1. Introduction to Colors in CSS

CSS provides several ways to define colors. Colors can be applied to text, backgrounds, borders, and more. Below are the most common methods to define colors in CSS:

  1. Named Colors: Predefined color names like red, blue, green, etc.
  2. Hexadecimal: A 6-digit code prefixed with # (e.g., #ff0000 for red).
  3. RGB: Defines colors using Red, Green, and Blue values (e.g., rgb(255, 0, 0) for red).
  4. RGBA: Similar to RGB but includes an alpha channel for transparency (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red).
  5. HSL: Defines colors using Hue, Saturation, and Lightness (e.g., hsl(0, 100%, 50%) for red).
  6. HSLA: Similar to HSL but includes an alpha channel for transparency (e.g., hsla(0, 100%, 50%, 0.5) for semi-transparent red).

2. Named Colors

CSS supports 140 predefined color names. These are easy to use and remember.

color: red;
color: blue;
color: green;
color: orange;

3. Hexadecimal Colors

Hexadecimal colors are defined using a 6-digit code prefixed with a #. The first two digits represent red, the next two represent green, and the last two represent blue.

color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #ffa500; /* Orange */

4. RGB and RGBA Colors

RGB colors are defined using the rgb() function, which takes three values for red, green, and blue. RGBA adds an alpha channel for transparency.

color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */
color: rgba(255, 0, 0, 0.5); /* Semi-transparent Red */

5. HSL and HSLA Colors

HSL stands for Hue, Saturation, and Lightness. HSLA adds an alpha channel for transparency.

color: hsl(0, 100%, 50%); /* Red */
color: hsl(120, 100%, 50%); /* Green */
color: hsl(240, 100%, 50%); /* Blue */
color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent Red */