CSS COLORS

Named Colors

You can apply colors using predefined color names, like red, blue, green, etc. These color names represent specific colors in the CSS specification.

p {
color: blue;
}

Hexadecimal Colors

Hexadecimal colors use a combination of six hexadecimal digits (#RRGGBB) to represent a wide range of colors. Each pair of digits represents the red, green, and blue color channels.

h1 {
color: #FF5733; /* Bright orange */
}

RGB Colors

RGB (Red, Green, Blue) colors allow you to specify the intensity of each color channel. Each channel value ranges from 0 to 255.

a {
color: rgb(0, 128, 0); /* Dark green */
}

HSL Colors

HSL (Hue, Saturation, Lightness) colors define colors based on their position on a color wheel, their saturation level, and their lightness or darkness.

button {
background-color: hsl(240, 100%, 50%); /* Bright blue */
}

Opacity

You can adjust the opacity of elements using the rgba() or hsla() syntax. The alpha channel defines transparency, with 0 being fully transparent and 1 being fully opaque.

div {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red background */
}

span {
color: hsla(120, 100%, 50%, 0.7); /* Semi-transparent green text */
}