CSS3 Colors is a set of new color properties introduced in CSS3 that allows web developers to specify colors using new color models and color functions. In addition to the traditional RGB color model, CSS3 introduces HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) color models, which provide more flexibility in specifying colors. CSS3 also introduces new color functions such as rgba(), hsla(), opacity(), color-mod(), and more.
Here are some examples of CSS3 color properties:
Using HSL color model
div {
background-color: hsl(120, 100%, 50%);
}
In this example, the background-color property is set to the HSL color hsl(120, 100%, 50%), which represents a bright green color.
Using HSLA color model
div {
background-color: hsla(120, 100%, 50%, 0.5);
}
In this example, the background-color property is set to the HSLA color hsla(120, 100%, 50%, 0.5), which represents a semi-transparent bright green color.
Using rgba() function
div {
background-color: rgba(0, 0, 255, 0.5);
}
In this example, the background-color property is set to the RGBA color rgba(0, 0, 255, 0.5), which represents a semi-transparent blue color.
Using opacity() function
div {
background-color: blue;
opacity: 0.5;
}
In this example, the background-color property is set to the blue color, and the opacity property is set to 0.5, making the background color semi-transparent.
Using CSS variables
:root {
--primary-color: #007bff;
}
div {
color: var(--primary-color);
}
In this example, the :root pseudo-class is used to define a CSS variable named --primary-color with a value of #007bff, which is a shade of blue. The color property of the div element is then set to the value of the --primary-color variable, making it easy to change the color across multiple elements by changing the value of the variable.
Using Color Functions
div {
background-color: color(red hue(180deg) saturation(50%) lightness(75%));
}
In this example, the background-color property is set using the color() function, which takes a base color (red in this case) and applies color modifications using the hue(), saturation(), and lightness() functions to produce a new color.
These are just a few examples of the many ways that CSS can be used to define colors for HTML elements. By using a combination of color properties and functions, web developers can create rich and engaging color schemes for their web pages.