In CSS, colors can be specified using various formats. Here are some common ways to define colors in CSS:
1. Keyword Colors: CSS provides a set of predefined color names that you can use directly. For example:
```css
body {
background-color: red;
color: navy;
}
```
2. Hexadecimal Notation: Use a 6-digit hexadecimal code to define colors. Each pair of digits represents the intensity of red, green, and blue (RGB) respectively. For example:
```css
p {
color: #FFA500; /* Orange color */
}
```
3. Short Hexadecimal Notation: If each pair of digits in the hexadecimal code is the same, you can use a 3-digit notation. For example:
```css
h1 {
color: #F00; /* Equivalent to #FF0000 */
}
```
4. RGB Function: Use the `rgb()` function to specify colors by providing the values for red, green, and blue in the range of 0 to 255. For example:
```css
h2 {
color: rgb(0, 128, 255); /* A blue color */
}
```
5. RGBA Function: Similar to the `rgb()` function, but with an additional alpha channel (transparency) value between 0 and 1. For example:
```css
div {
background-color: rgba(255, 0, 0, 0.5); /* Red color with 50% transparency */
}
```
6. HSL and HSLA Functions: These functions allow you to specify colors using hue, saturation, lightness, and an optional alpha (transparency) value. Hue ranges from 0 to 360, saturation and lightness range from 0% to 100%, and alpha ranges from 0 to 1. For example:
```css
span {
background-color: hsla(120, 100%, 50%, 0.7); /* A bright green color with 70% transparency */
}
```
You can use any of these color formats to style elements on your web page using CSS. Experiment with different colors to achieve the desired look and feel for your website.
