CSS Colors
CSS colors can be specified in a variety of ways, including:
- Predefined color names: There are 16 predefined color names in CSS, such as red, blue, and green.
- Hexadecimal color codes: Hexadecimal color codes are six-digit numbers that represent colors in the RGB color space. For example, the hexadecimal color code for red is #FF0000.
- RGB color values: RGB color values are three-digit numbers that represent colors in the RGB color space. For example, the RGB color value for red is 255,0,0.
- HSL color values: HSL color values are three-digit numbers that represent colors in the HSL color space. For example, the HSL color value for red is 0,100%,50%.
- RGBA color values: RGBA color values are four-digit numbers that represent colors in the RGB color space with an alpha channel. For example, the RGBA color value for red with 50% opacity is 255,0,0,0.5.
The following table shows how to specify colors in CSS:
| Color Type | Syntax | Example |
| Predefined color name | color: red; | color: red; |
| Hexadecimal color code | color: #FF0000; | color: #FF0000; |
| RGB color value | color: rgb(255, 0, 0); | color: rgb(255, 0, 0); |
| HSL color value | color: hsl(0, 100%, 50%); | color: hsl(0, 100%, 50%); |
| RGBA color value | color: rgba(255, 0, 0, 0.5); | color: rgba(255, 0, 0, 0.5); |
Task
Remember we built a simple portfolio web page using HTML in the fundamentals of HTML course. Now let’s start adding CSS style to it.
Add header and ul selector within the style element. Give the header a color value of #f00. Give the ul a color value of #007BFF. Run the code to see the results and experiment with the code to get used to it.
Conclusion
CSS colors can be specified in a variety of ways, each with its own advantages and disadvantages. By understanding the different ways to specify colors in CSS, you can choose the method that is best suited for your needs.
Here are some tips for choosing a color specification method:
- Use predefined color names when you want to use a color that is already defined in CSS.
- Use hexadecimal color codes when you want to specify a color with a high degree of precision.
- Use RGB color values when you want to specify a color using the RGB color space.
- Use HSL color values when you want to specify a color using the HSL color space.
- Use RGBA color values when you want to specify a color with an alpha channel.