The use of color in website design is essential. It can affect how visitors read text, click on links, and navigate through your website.The CSS color and background-color attributes make it simple to add color to our websites, even though doing so needs practise and familiarity with color theory.
These qualities can be defined in a variety of ways. To alter the text or background color of a web page, use HTML color names, hex color codes, RGB color codes, or HSL color values.
//HTML
<h1>Codeshruta</h1>
//CSS
h1{
text-align: center;
color : blue;
}
Color Names
The simplest way to add color to CSS is by using HTML colors. This is due to the fact that color names rather than a list of numbers are used to represent colors in HTML.
Modern browsers presently support 140 different colour names. Some examples are orange, green, cyan, tamato, and sky blue.Let’s examine a case in point. Let’s say you wish to make a text heading green. To target the heading, you would use a CSS selector, and you would define the color property using the HTML color name green.
//HTML
<h1>Codeshruta</h1>
//CSS
h1{
text-align: center;
color : green;
}
It seems like this would be simple. However, it is not advised to use HTML color names. They are challenging to recall beyond the typical rainbow, for one. Yes, it’s simple to remember red, yellow, and navy, but what about OldLace? Mocassin? the additional 100?
Second, despite the fact that memorising 140 color names is a difficult task given the vast array of hues, shades, and colors in the world, it is a relatively modest quantity.
As a result, using HTML color names will restrict the color combinations you can use and your ability to design a website’s color system. The most crucial point is that HTML color names induce imprecision.Your ivory might be someone else’s white, who might be someone else’s seashell, and so on.Use colour codes instead of names to avoid this imprecision online.
Hex Color Codes
A hashtag(#) and three sets of letters that indicate the intensity of the three primary colors make up hex color codes (red, green, and blue). The possible values range from 00 (the primary color’s lowest intensity) to FF (the highest intensity of a primary color). Each hex code has a total of six characters.
Any combination of ten digits (0-9) and six letters may make up these six characters (a-f). Therefore, there are a total of 16,777,216 potential combinations. Let’s go over a few of the combinations listed below.
Each of the three fundamental colors must be blended completely to get white. White’s Hexadecimal color code is therefore #FFFFFF. Black’s hex color code is #000000 since there are no basic colors present in it.
body {
background-color: #69EAFF;
}
RGB Color Codes
Red, Green, and Blue are known as RGB since they are three additional color models that combine the primary colors. The three integers that make up an RBG color code are separated by commas. Each value is an integer between 0 and 255 that represents the intensity of the corresponding primary color.
The parenthesis surrounding these numbers are followed by the lowercase “rgb” symbol. Consequently, the rgb values for red, blue and black are (0, 0, 255), (255, 0,0) and (0, 0, 0) respectively.
The main advantage of using RGB color codes is that they allow you to adjust an element’s color as well as its opacity.
Simply add an alpha to the rgb() prefix and a fourth value inside of the parenthesis to do this. This value, which ranges from 0 to 1, determines how transparent the colour will be. Between 0 and 1, everything is perfectly transparent. The colour would appear 50% transparent with the value of 0.5.
body{
background-color: rgba(250,100,255,0.3);
}
HSL Color Codes
The HSL color system can be used to change hue, saturation, and brightness as well as the transparency of color. The format of HSL is identical to that of RGB color coding. There are three numbers in it, separated by commas. Then, these numbers are enclosed in parenthesis, and a lowercase “hsl” appears before them.
The transparency of the colour can also be changed by appending a Alpha to “hsl” and a fourth number in parenthesis between 0 and 1. In contrast to RGB color codes, the first three digits of an HSL color value do not indicate how intense the corresponding primary color is. Instead, Hue, Saturation, and Lightness are represented by these three integers.
The degree of hue is expressed on a scale from 0 to 360. 120 is green, 240 is blue, while 0 or 360 is red. On a scale from 0 to 100, saturation and lightness are expressed as percentages.
At 0% saturation, the color is a greyish hue, and at 100%, it is fully saturated. 0% lightness equals black, and 100% lightness equals white.
h1{
color:hsla(0,60%,70%, 0.5);
}
Conclusion
CSS color Properties are one of the important properties to style our html Web page. Color gives our web page visibility, beauty with different colors. I hope after reading this blog post you have cleared all the doubts about different types of color values. If you have any questions or post, then don’t forget to ask in the Comment section.
Thankyou for reading!
Written by : Vipin
