CSS
CSS Colors
Colors are necessary as they impact user engagement and enhance the visual appearance. Colors can be changed using predefined color names, RGB, RGBA, HEX, HSL, or HSLA values in any element of the HTML file. CSS facilitates the change of the color in the background, text, border, or color value.
.rgb { background-color: rgb(255, 0, 0); } /* Red */
.hex { background-color: #00ff00; } /* Green */
.hsl { background-color: hsl(240, 100%, 50%); } /* Blue */CSS Color Names
Color names are predefined in CSS, and you can use specific color names to change the color of your desired element in the file. For example, the predefined color names are Tomato, orange, dodgerblue, medium sea green, gray, slate-blue, violet, and light gray.
.tomato { background-color: tomato; }
.orange { background-color: orange; }
.dodgerblue { background-color: dodgerblue; }
.mediangreen { background-color: mediumseagreen; }
.gray { background-color: gray; }
.slateblue { background-color: slateblue; }
.violet { background-color: violet; }
.lightgray { background-color: lightgray; }CSS Background Color: The background color of an element can be customized to enhance its visual appeal.
CSS Text Color: The text color can be adjusted to improve readability and match the design theme.
CSS Border Color: The border color can be defined to emphasize or highlight specific elements.
/* CSS Background Color */
.background {
background-color: lightblue;
}
/* CSS Text Color */
.text {
color: darkgreen;
}
/* CSS Border Color */
.border {
border: 2px solid red;
}CSS Color Values
You can also adjust the value or transparency of the colors by using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
CSS RGB Colors
RGB color indicates red, green, and blue. It illustrates the intensity of RED, GREEN, and BLUE light components.
RGB Value
In RGB values, intensity defines the level of color between 0 and 255. For instance, RGB (255,0,0 ) will be shown as red because red is at its highest intensity, and green and blue are at 0.
For displaying black color, set 0 for each parameter; for white, set the parameter to the highest intensity. For shades of gray, you must set the same value for each parameter.
/* RGB Examples */
.red { background-color: rgb(255, 0, 0); } /* Red */
.black { background-color: rgb(0, 0, 0); } /* Black */
.white { background-color: rgb(255, 255, 255); } /* White */
.gray { background-color: rgb(128, 128, 128); } /* Gray */RGBA Value
It is the addition of an alpha channel to the RGB color value, and alpha represents the opacity of the color.
- RGBA ( red, green, blue, alpha)
- The alpha parameter is between 0.0 ( full transparent) and 1.0 ( opaque).
/* RGBA Examples */
.transparent {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent */
}
.opaque {
background-color: rgba(0, 0, 255, 1.0); /* Opaque blue */
}
.fulltransparent {
background-color: rgba(0, 255, 0, 0.0); /* Transparent green */
}CSS HEX Color
# RRGGBB represents the hexadecimal color. RR represents red, GG is for green, and BB is for Blue, which defines the color component.
HEX Value
The value for HEX is between 00 and ff. For example, #ff0000 represents red, as red is set to its highest value, and blue and green are set to their lowest value, 00.
To display black, set all the parameters to 00, and for white, set each parameter value to ff. Gray color shades can be displayed by setting the equal value for the three light components, i.e., #3c3c3c or #787878. You can display different colors by mixing the HEX value.
/* HEX Examples */
.red { background-color: #ff0000; } /* Red */
.black { background-color: #000000; } /* Black */
.white { background-color: #ffffff; } /* White */
.gray { background-color: #3c3c3c; } /* Dark gray */3 Digit HEX Value
Sometimes, a shorthand code, i.e., a 3-digit hex code, is used in the file for 6-digit codes by #rgb, r, g, and b for red, green, and blue parameters using values between 0 and f.
The shorthand code is applicable if both values for RR, GG, and BB are the same. For example, #ff00cc can be written as a 3-digit hex code, #f0c.
/* 3-Digit HEX Examples */
.red { background-color: #f00; } /* Red */
.green { background-color: #0f0; } /* Green */
.blue { background-color: #00f; } /* Blue */
.purple { background-color: #f0c; } /* Purple */CSS HSL Colors
HSL here is for hue, saturation, and lightness. You can specify the color using a particular hue, saturation, and lightness in CSS.
HSL Value
HSL stands for hue, saturation, and lightness. You can set values for these parameters by using the formula:
- Hue represents the degree from 0 to 360 on the color wheel. 0 is for red, 120 is for green, and 240 is for Blue.
- The percentage expresses saturation. 0% represents the gray shade, whereas 100% is for full color.
- Lightness also represents the percentage. 0% is used for black, 50% for neutral tone, and 100% for white.
/* HSL Examples */
.red { background-color: hsl(0, 100%, 50%); } /* Red */
.green { background-color: hsl(120, 100%, 50%); } /* Green */
.blue { background-color: hsl(240, 100%, 50%); } /* Blue */
.gray { background-color: hsl(0, 0%, 50%); } /* Gray */HSLA Value
It is an expansion of the HSL color value by adding an alpha channel, which represents the opacity of the color by using the following formula:
HSLA ( hue, saturation, lightness, alpha): Here, the value of alpha is between numbers 0.0 (transparent) and 1.0 (opaque)
/* HSLA Examples */
.transparent {
background-color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent */
}
.opaque {
background-color: hsla(120, 100%, 50%, 1.0); /* Opaque green */
}
.fullytransparent {
background-color: hsla(240, 100%, 50%, 0.0); /* Transparent blue */
}CSS coloring is necessary to create a dynamic appearance for the document. You can use RGB, HEX, HSL, and their alpha channels to color the desired element of your file with different techniques, each offering flexibility in how color appears on the document. These techniques help increase user engagement and have a huge impact on the website.