Colors

CSS allows you to specify colors using a variety of formats, including named colors, hexadecimal values, RGB, RGBA, HSL, and HSLA.

Named Colors

Named colors are predefined color values that you can use in CSS. For example, you can use the color name red to set the text color of an element to red.

Here are some examples of named colors in CSS:

h1 {
	color: red;
}

p {
	color: blue;
}

a {
	color: green;
}

Named colors are easy to use and remember, but they have limited options and may not always be the best choice for your design.

Hexadecimal Values

Hexadecimal values are another way to specify colors in CSS. Hexadecimal values are represented by a # followed by six characters, which represent the red, green, and blue components of the color. Each pair of characters represents a value from 00 to FF, where 00 is the lowest value and FF is the highest value.

Here are some examples of using hexadecimal values in CSS:

h1 {
	color: #ff0000; /* Red */
}

p {
	color: #0000ff; /* Blue */
}

a {
	color: #00ff00; /* Green */
}

Hexadecimal values provide a wide range of color options and are commonly used in web design.

RGB and RGBA

RGB and RGBA are ways to specify colors using the red, green, and blue components of the color. RGB stands for red, green, blue, and uses values from 0 to 255 to represent the intensity of each color component. RGBA is similar to RGB, but includes an additional value for the alpha channel, which represents the opacity of the color.

Here are some examples of using RGB and RGBA in CSS:

h1 {
	color: rgb(255, 0, 0); /* Red */
}

p {
	color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
}

a {
	color: rgba(0, 255, 0, 0.75); /* Green with 75% opacity */
}

RGB and RGBA provide precise control over the color and opacity of elements in your design.

HSL and HSLA

HSL and HSLA are ways to specify colors using the hue, saturation, and lightness of the color. HSL stands for hue, saturation, lightness, and uses values from 0 to 360 for the hue, and 0% to 100% for the saturation and lightness. HSLA is similar to HSL, but includes an additional value for the alpha channel, which represents the opacity of the color.

Here are some examples of using HSL and HSLA in CSS:

h1 {
	color: hsl(0, 100%, 50%); /* Red */
}

p {
	color: hsla(240, 100%, 50%, 0.5); /* Blue with 50% opacity */
}

a {
	color: hsla(120, 100%, 50%, 0.75); /* Green with 75% opacity */
}

HSL and HSLA provide a different way to specify colors and can be useful for creating unique color palettes and designs.