CSS Colors: A Comprehensive Guide to Color Formats and Usage
Contents
CSS Colors: Color Formats and Usage
Learn about CSS colors and different color formats such as RGB, Hexadecimal, HSL, and HSLA. Understand how to apply colors to elements and create visually appealing designs with CSS.
CSS (Cascading Style Sheets) allows web developers to apply styles to HTML elements, including colors. In CSS, colors can be specified using several different formats.
Here are some of the commonly used methods to define colors in CSS:
CSS Keyword Colors:
CSS provides a set of predefined color names that can be used directly.
For example:
“red”: Represents the color red.
“blue”: Represents the color blue.
“green”: Represents the color green.
“yellow”: Represents the color yellow.
and many more…
Hexadecimal Colors:
Hexadecimal colors are represented using a six-digit code preceded by a hash (#) symbol.
Each digit represents the intensity of the red, green, and blue (RGB) channels, respectively.
For example:
“#FF0000”: Represents the color red.
“#0000FF”: Represents the color blue.
“#00FF00”: Represents the color green
RGB Colors:
RGB colors are represented by specifying the intensity of the red, green, and blue channels using decimal values ranging from 0 to 255.
The syntax for specifying RGB colors is as follows:
"rgb(255, 0, 0)": Represents the color red. "rgb(0, 0, 255)": Represents the color blue. "rgb(0, 255, 0)": Represents the color green.
RGBA Colors:
RGBA colors are similar to RGB colors, but they include an additional alpha channel that represents the opacity of the color.
The alpha channel value ranges from 0 to 1, where 0 is fully transparent, and 1 is fully opaque.
The syntax for specifying RGBA colors is as follows:
"rgba(255, 0, 0, 0.5)": Represents a semi-transparent red color.
HSL and HSLA Colors:
HSL (Hue, Saturation, Lightness) is another color representation format in CSS.
The hue represents the color itself, saturation determines the intensity of the color, and lightness determines how light or dark the color appears. The values for hue range from 0 to 360, while saturation and lightness range from 0% to 100%.
The syntax for specifying HSL colors is as follows:
"hsl(0, 100%, 50%)": Represents the color red.
HSLA colors are similar to HSL colors, but they also include an alpha channel for transparency:
"hsla(0, 100%, 50%, 0.5)": Represents a semi-transparent red color.
System Colors:
CSS provides some system colors that can be used to match the user’s system preferences.
For example:
“windowtext”: Represents the color of text in a window.
“buttonface”: Represents the color of a button.
These are the basic methods to specify colors in CSS. Additionally, CSS also allows color calculations, color gradients, and other advanced techniques to create dynamic and visually appealing designs on the web.
Keyword css Colors
Here’s a complete HTML code example that demonstrates the usage of keyword colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Keyword Colors Example</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
.green-text {
color: green;
}
.yellow-bg {
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have defined CSS styles within the <style> tags.
2-The h1 selector applies the color red to all <h1> elements.
3-The p selector applies the color blue to all <p> elements.
4-The .green-text class is defined to apply the color green to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to yellow.
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the color red applied directly.
-The first <p> element has the color blue applied directly.
-The second <p> element has the class .green-text applied, which makes its text color green.
-The <div> element with the class .yellow-bg has a yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors.
CSS Hexadecimal Colors
Here’s a complete HTML code example that demonstrates the usage of hexadecimal colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal Colors Example</title>
<style>
h1 {
color: #FF0000;
}
p {
color: #0000FF;
}
.green-text {
color: #00FF00;
}
.yellow-bg {
background-color: #FFFF00;
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
CSS Hexadecimal Colors
Here’s a complete HTML code example that demonstrates the usage of hexadecimal colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal Colors Example</title>
<style>
h1 {
color: #FF0000;
}
p {
color: #0000FF;
}
.green-text {
color: #00FF00;
}
.yellow-bg {
background-color: #FFFF00;
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used hexadecimal color codes to define colors in CSS.
2-The h1 selector applies the color #FF0000 (red) to all <h1> elements.
3-The p selector applies the color #0000FF (blue) to all <p> elements.
4-The .green-text class is defined to apply the color #00FF00 (green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to #FFFF00 (yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the color red applied directly using the hexadecimal color code.
-The first <p> element has the color blue applied directly.
-The second <p> element has the class .green-text applied, which makes its text color green.
-The <div> element with the class .yellow-bg has a yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors.
CSS Hexadecimal Colors:value,3digit with complete code example
Hexadecimal color codes in CSS are represented by a six-digit code preceded by a hash (#) symbol. However, CSS also supports a shorthand notation for hexadecimal colors using three digits when each pair of digits is identical.
Here’s a complete HTML code example that demonstrates the usage of both six-digit and three-digit hexadecimal colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal Colors Example</title>
<style>
h1 {
color: #FF0000;
}
p {
color: #00F;
}
.green-text {
color: #0F0;
}
.yellow-bg {
background-color: #FF0;
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used both six-digit and three-digit hexadecimal color codes.
2-The h1 selector applies the color #FF0000 (red) to all <h1> elements.
3-The p selector applies the color #00F (blue) to all <p> elements.
4-The .green-text class is defined to apply the color #0F0 (green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to #FF0 (yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
– The first <h1> element has the color red applied directly using the six-digit hexadecimal color code.
– The first <p> element has the color blue applied directly using the three-digit hexadecimal color code.
-The second <p> element has the class .green-text applied, which makes its text color green.
-The <div> element with the class .yellow-bg has a yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors.
RGB Colors: complete code in html
Here’s a complete HTML code example that demonstrates the usage of RGB colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>RGB Colors Example</title>
<style>
h1 {
color: rgb(255, 0, 0);
}
p {
color: rgb(0, 0, 255);
}
.green-text {
color: rgb(0, 255, 0);
}
.yellow-bg {
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used RGB color values to define colors in CSS.
2-The h1 selector applies the color rgb(255, 0, 0) (red) to all <h1> elements. 3-The p selector applies the color rgb(0, 0, 255) (blue) to all <p> elements.
4-The .green-text class is defined to apply the color rgb(0, 255, 0) (green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to rgb(255, 255, 0) (yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
– The first <h1> element has the color red applied directly using the RGB color value.
-The first <p> element has the color blue applied directly.
-The second <p> element has the class .green-text applied, which makes its text color green.
-The <div> element with the class .yellow-bg has a yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors.
RGBA Colors: complete code in html
Here’s a complete HTML code example that demonstrates the usage of RGBA colors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>RGBA Colors Example</title>
<style>
h1 {
color: rgba(255, 0, 0, 1);
}
p {
color: rgba(0, 0, 255, 0.5);
}
.green-text {
color: rgba(0, 255, 0, 0.75);
}
.yellow-bg {
background-color: rgba(255, 255, 0, 0.3);
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with semi-transparent blue text color</p>
<p class="green-text">This paragraph has semi-transparent green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a semi-transparent yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used RGBA color values to define colors in CSS. 2-The h1 selector applies the color rgba(255, 0, 0, 1) (red) to all <h1> elements.
3-The p selector applies the color rgba(0, 0, 255, 0.5) (semi-transparent blue) to all <p> elements.
4-The .green-text class is defined to apply the color rgba(0, 255, 0, 0.75) (semi-transparent green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to rgba(255, 255, 0, 0.3) (semi-transparent yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the color red applied directly using the RGBA color value.
-The first <p> element has the semi-transparent blue color applied directly.
-The second <p> element has the class .green-text applied, which makes its text color semi-transparent green.
-The <div> element with the class .yellow-bg has a semi-transparent yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors and opacity.
CSS HSL color: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSL colors in CSS:
HSLA color :complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSLA colors in CSS:
HSL value: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSL values in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HSL Values Example</title>
<style>
h1 {
color: hsl(0, 100%, 50%);
}
p {
color: hsl(240, 100%, 50%);
}
.green-text {
color: hsl(120, 100%, 50%);
}
.yellow-bg {
background-color: hsl(60, 100%, 50%);
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with blue text color</p>
<p class="green-text">This paragraph has green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
HSL saturation: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSL saturation in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HSL Saturation Example</title>
<style>
h1 {
color: hsl(0, 100%, 50%);
}
p {
color: hsl(0, 50%, 50%);
}
.green-text {
color: hsl(120, 75%, 50%);
}
.yellow-bg {
background-color: hsl(60, 100%, 75%);
}
</style>
</head>
<body>
<h1>This is a heading with fully saturated red color</h1>
<p>This is a paragraph with partially saturated red color</p>
<p class="green-text">This paragraph has partially saturated green color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a highly saturated yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used HSL (Hue, Saturation, Lightness) color values to define colors in CSS.
2-The h1 selector applies the color hsl(0, 100%, 50%) (fully saturated red) to all <h1> elements.
3-The p selector applies the color hsl(0, 50%, 50%) (partially saturated red) to all <p> elements.
4-The .green-text class is defined to apply the color hsl(120, 75%, 50%) (partially saturated green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to hsl(60, 100%, 75%) (highly saturated yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the fully saturated red color applied directly using the HSL color value.
-The first <p> element has the partially saturated red color applied directly.
-The second <p> element has the class .green-text applied, which makes its text color partially saturated green.
-The <div> element with the class .yellow-bg has a highly saturated yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors and saturation levels.
HSL lightness: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSL lightness in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HSL Lightness Example</title>
<style>
h1 {
color: hsl(0, 100%, 50%);
}
p {
color: hsl(0, 100%, 25%);
}
.green-text {
color: hsl(120, 100%, 75%);
}
.yellow-bg {
background-color: hsl(60, 100%, 50%);
}
</style>
</head>
<body>
<h1>This is a heading with normal lightness red color</h1>
<p>This is a paragraph with darker red color</p>
<p class="green-text">This paragraph has lighter green color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a normal lightness yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used HSL (Hue, Saturation, Lightness) color values to define colors in CSS.
2-The h1 selector applies the color hsl(0, 100%, 50%) (normal lightness red) to all <h1> elements.
3-The p selector applies the color hsl(0, 100%, 25%) (darker red) to all <p> elements.
4-The .green-text class is defined to apply the color hsl(120, 100%, 75%) (lighter green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to hsl(60, 100%, 50%) (normal lightness yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the normal lightness red color applied directly using the HSL color value.
-The first <p> element has the darker red color applied directly.
-The second <p> element has the class .green-text applied, which makes its text color a lighter shade of green.
-The <div> element with the class .yellow-bg has a normal lightness yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors and lightness levels.
HSL shades of gray: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSL shades of gray in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HSL Shades of Gray Example</title>
<style>
h1 {
color: hsl(0, 0%, 0%);
}
p {
color: hsl(0, 0%, 50%);
}
.dark-gray {
color: hsl(0, 0%, 25%);
}
.light-gray-bg {
background-color: hsl(0, 0%, 90%);
}
</style>
</head>
<body>
<h1>This is a heading with black text color</h1>
<p>This is a paragraph with medium gray text color</p>
<p class="dark-gray">This paragraph has dark gray text color applied using a class</p>
<div class="light-gray-bg">
<p>This paragraph has a light gray background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used HSL (Hue, Saturation, Lightness) color values to define shades of gray in CSS.
2-The h1 selector applies the color hsl(0, 0%, 0%) (black) to all <h1> elements.
3-The p selector applies the color hsl(0, 0%, 50%) (medium gray) to all <p> elements.
4-The .dark-gray class is defined to apply the color hsl(0, 0%, 25%) (dark gray) to elements with that class.
5-The .light-gray-bg class sets the background color of elements with that class to hsl(0, 0%, 90%) (light gray).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
– The <h1> element has the black color applied directly using the HSL color value.
-The first <p> element has the medium gray color applied directly.
-The second <p> element has the class .dark-gray applied, which makes its text color dark gray.
-The <div> element with the class .light-gray-bg has a light gray background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified shades of gray.
HSLA value: complete code in html
Here’s a complete HTML code example that demonstrates the usage of HSLA (Hue, Saturation, Lightness, Alpha) values in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HSLA Values Example</title>
<style>
h1 {
color: hsla(0, 100%, 50%, 1);
}
p {
color: hsla(240, 100%, 50%, 0.5);
}
.green-text {
color: hsla(120, 100%, 50%, 0.75);
}
.yellow-bg {
background-color: hsla(60, 100%, 50%, 0.3);
}
</style>
</head>
<body>
<h1>This is a heading with red text color</h1>
<p>This is a paragraph with semi-transparent blue text color</p>
<p class="green-text">This paragraph has semi-transparent green text color applied using a class</p>
<div class="yellow-bg">
<p>This paragraph has a semi-transparent yellow background color</p>
<p>Background color applied using a class</p>
</div>
</body>
</html>
Explanation:
1-In this example, we have used HSLA (Hue, Saturation, Lightness, Alpha) color values to define colors in CSS.
2-The h1 selector applies the color hsla(0, 100%, 50%, 1) (red) to all <h1> elements.
3-The p selector applies the color hsla(240, 100%, 50%, 0.5) (semi-transparent blue) to all <p> elements.
4-The .green-text class is defined to apply the color hsla(120, 100%, 50%, 0.75) (semi-transparent green) to elements with that class.
5-The .yellow-bg class sets the background color of elements with that class to hsla(60, 100%, 50%, 0.3) (semi-transparent yellow).
6-Within the <body> section, we have used the defined styles to apply colors to different elements:
-The first <h1> element has the red color applied directly using the HSLA color value.
-The first <p> element has the semi-transparent blue color applied directly.
-The second <p> element has the class .green-text applied, which makes its text color semi-transparent green.
-The <div> element with the class .yellow-bg has a semi-transparent yellow background color, which is applied to both paragraphs within it.
When you open this HTML file in a web browser, you will see the different elements displayed with the specified colors and opacity.
Quiz with answers about this lesson
Here’s a multi-choice quiz with answers based on the lesson about CSS colors:
1-What does RGB stand for?
a) Red Green Blue
b) Random Gradient Background
c) Responsive Grid Layout
d) Rounded Global Borders
Answer: a) Red Green Blue
2-Which color format uses a combination of three values representing red, green, and blue channels?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: c) RGB
3-Which color format allows you to specify the transparency level along with the RGB values?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: d) RGBA
4-What does HSL stand for?
a) Hue Saturation Lightness
b) Hexadecimal Shade Lookup
c) Hyperlink Style Language
d) Highlight Selected List
Answer: a) Hue Saturation Lightness
5-Which color format allows you to specify the hue, saturation, and lightness values?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: a) HSL
6-Which color format is commonly used for specifying web colors using a combination of six characters/numbers?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: b) Hexadecimal
7-What does HSLA stand for?
a) Hue Saturation Lightness Alpha
b) HTML Style Language Annotation
c) Hyperlink Style Library Animation
d) Highlighted Search List Algorithm
Answer: a) Hue Saturation Lightness Alpha
8-Which color format allows you to specify the transparency level along with the HSL values?
a) HSL
b) Hexadecimal
c) RGB
d) HSLA
Answer: d) HSLA
9-Which color format allows you to specify colors using predefined names?
a) HSL
b) Hexadecimal
c) RGB
d) Named Colors
Answer: d) Named Colors
10-What is the value range for the hue in HSL color format?
a) 0 to 100
b) 0 to 255
c) 0 to 360
d) 0 to 1
Answer: c) 0 to 360
11-In RGB color format, what is the maximum value for each channel?
a) 100
b) 255
c) 360
d) 1
Answer: b) 255
12-Which color format is commonly used for specifying fully transparent colors?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: d) RGBA
13-What is the equivalent hexadecimal color code for the RGB color value (255, 0, 0)?
a) #000000
b) #00FF00
c) #FF0000
d) #0000FF
Answer: c) #FF0000
14-In HSLA color format, what does the alpha value represent?
a) Hue
b) Saturation
c) Lightness
d) Transparency
Answer: d) Transparency
15-Which CSS property is used to specify the foreground color of an element?
a) background-color
b) color
c) text-color
d) foreground-color
Answer: b) color
16-Which CSS property is used to specify the background color of an element?
a) background-color
b) color
c) text-color
d) background
Answer: a) background-color
17-Which of the following is not a valid way to represent the color white in hexadecimal?
a) #ffffff
b) #fff
c) #000000
d) #FFF
Answer: c) #000000
18-Which CSS property is used to specify the color of an element’s border?
a) border-color
b) color
c) outline-color
d) border-style
Answer: a) border-color
19-Which of the following color formats allows you to specify colors using the CMYK model?
a) HSL
b) Hexadecimal
c) RGB
d) CMYK
Answer: d) CMYK
20-What is the value range for the saturation in HSL color format?
a) 0 to 100
b) 0 to 255
c) 0 to 360
d) 0 to 1
Answer: a) 0 to 100
21-In RGBA color format, what is the range for the alpha value?
a) 0 to 100
b) 0 to 255
c) 0 to 360
d) 0 to 1
Answer: d) 0 to 1
22-Which CSS property is used to specify the color of an element’s text when hovered over?
a) hover-color
b) text-color
c) color:hover
d) :hover
Answer: d) :hover
23-What does the “a” stand for in the HSLA color format?
a) Alpha (transparency)
b) Aura (glow)
c) Accent (brightness)
d) Amplitude (saturation)
Answer: a) Alpha (transparency)
24-Which CSS property is used to specify the color of visited links?
a) link-color
b) visited-color
c) color:visited
d) :visited
Answer: d) :visited
25-Which CSS property is used to create a linear gradient background?
a) background-image
b) background-color
c) background-gradient
d) gradient-color
Answer: a) background-image
26-Which color format is commonly used to specify transparency levels in CSS?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: d) RGBA
27-What is the difference between HSL and HSLA color formats?
a) HSL does not support transparency, while HSLA does.
b) HSLA does not support transparency, while HSL does.
c) HSL and HSLA are the same; the naming convention differs.
d) HSL and HSLA are entirely different color formats.
Answer: a) HSL does not support transparency, while HSLA does.
28-Which CSS property is used to specify the color of an element’s text when it is in focus?
a) focus-color
b) text-color
c) color:focus
d) :focus
Answer: c) color:focus
29-What is the purpose of the “opacity” CSS property?
a) It adjusts the brightness of an element.
b) It changes the color of an element to grayscale.
c) It applies a transparent effect to an element.
d) It modifies the hue of an element.
Answer: c) It applies a transparent effect to an element.
30-Which CSS property is used to specify the color of an element’s border when it is being actively interacted with?
a) active-color
b) border-color
c) color:active
d) :active
Answer: d) :active
31-Which CSS function allows you to generate a series of colors between two specified colors?
a) color-interpolate()
b) color-transition()
c) color-gradient()
d) color-adjust()
Answer: c) color-gradient()
32-Which color format is commonly used for specifying colors in graphic design software like Photoshop?
a) HSL
b) Hexadecimal
c) RGB
d) RGBA
Answer: b) Hexadecimal