When styling with CSS, the color property is fundamental. Up until now, we've primarily used color keywords to define colors. For instance, you can set the color of an H1 element to red using the keyword:

<!-- index.html -->
<h1>Hello World</h1>

<!-- index.html -->
<h1>Hello World</h1>

/* style.css */
h1 {
  color: red; /* 'red' is a color keyword */
}

/* style.css */
h1 {
  color: red; /* 'red' is a color keyword */
}

VS Code offers a helpful feature where, upon removing a color value and pressing Ctrl + Shift, it displays a comprehensive list of available color keywords. This allows you to easily discover and apply different predefined colors, such as tomato.

/* style.css */
h1 {
  color: tomato; /* Using the 'tomato' color keyword */
}

/* style.css */
h1 {
  color: tomato; /* Using the 'tomato' color keyword */
}

While color keywords are straightforward, CSS provides more precise and versatile ways to define colors, including RGB, Hexadecimal (Hex), HSL, HWB, Lab, LCH, OK Lab, and OK LCH. Among these, RGB and Hex are the most commonly used, with Hex often being the preferred choice.

VS Code Color Picker

VS Code integrates a convenient color picker, accessible by clicking the small square box next to any color value in your CSS. This tool allows you to manually adjust colors and cycle through different color formats like RGB, Hex, and HSL. You don't need to deeply understand the mechanics of each format to use them effectively, as the picker simplifies the selection process. Additionally, many developers utilize online color palette generators to find appealing color schemes.

Adding Transparency (Alpha)

Both RGB and Hex color formats support an alpha channel, which controls the transparency of a color.

Hexadecimal with Transparency

While less commonly known, Hex values can include transparency. When using the VS Code color picker, adjusting the transparency slider for a Hex color will append two additional digits to the Hex code. These two digits, ranging from 00 to FF, represent the alpha value, with 00 being fully transparent and FF being fully opaque.

/* style.css */
h1 {
  color: #ff634780; /* Hex with 50% transparency (80 is the alpha value) */
}

/* style.css */
h1 {
  color: #ff634780; /* Hex with 50% transparency (80 is the alpha value) */
}

RGB with Transparency (RGBA)

Transparency is more frequently associated with RGB values due to its intuitive implementation. To add transparency to an RGB color, you simply change rgb() to rgba() and introduce a fourth argument—the alpha value—within the parentheses.

For example, to set the tomato color with 50% transparency using RGBA:

/* style.css */
h1 {
  color: rgba(255, 99, 71, 0.5); /* RGBA with 50% transparency */
}

/* style.css */
h1 {
  color: rgba(255, 99, 71, 0.5); /* RGBA with 50% transparency */
}

Using RGBA provides a clear and straightforward way to control the opacity of elements, making it a popular choice for designing transparent effects in CSS.