CSS Colors
CSS is all about presentation. Discover how CSS Colors works to transform plain HTML into a premium user experience in the guide below.
The color attribute within CSS is utilized to define the color of elements in HTML. Usually, this attribute is employed to specify either the background color or the text color of an element.
In Cascading Style Sheets (CSS), color values are employed to define colors. This property can also be utilized for setting the border-color and various other decorative enhancements.
We can define the color of an element by using the following ways:
- RGB format.
- RGBA format.
- Hexadecimal notation.
- HSL.
- HSLA.
- Built-in color.
Let's explore the syntax and explanation of the aforementioned methods thoroughly.
RGB Format
RGB format is an abbreviation of 'RED GREEN and BLUE' that is employed to specify the color of an HTML element by indicating the values of R, G, B within the 0 to 255 range.
The color values are defined in this format by utilizing the rgb property. This particular property enables the inclusion of three values, which can be either in percentage form or as integers within the range of 0 to 255.
This feature may not be compatible across all browsers, which is why it is advisable to avoid its usage.
Syntax
color: rgb(R, G, B);
RGBA Format
It closely resembles the RGB format, with the distinction that RGBA includes an Alpha channel denoted by A, indicating the object's opacity level. The alpha value ranges from 0.0 to 1.0, where 0.0 signifies complete transparency, and 1.0 represents full opacity.
Syntax
color:rgba(R, G, B, A);
Hexadecimal notation
Hexadecimal is a method of representing colors with six characters starting with the # symbol and ranging from 0 to F. In this format, the initial two characters indicate the red (RR) color value, the following two characters indicate the green (GG) color value, and the final two characters indicate the blue (BB) color value.
The hexadecimal representation for the color black is #000000, while the color white is denoted by #FFFFFF. Other examples of hexadecimal color codes include #FF0000, #00FF00, #0000FF, #FFFF00, and numerous others.
Syntax
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
Short Hex codes
It is a concise representation of hexadecimal notation where each digit is transformed to represent the same hexadecimal value.
For example, #7B6 becomes #77BB66 in hexadecimal.
The black color representation in abbreviated hexadecimal is #000, while the white color representation in short hex is #FFF. Examples of other short hex color codes include #F00, #0F0, #0FF, #FF0, and various others.
It is an abbreviation for Hue, Saturation, and Lightness. Let's explore each of them separately.
Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red, 120 represents green, 240 represents blue.
Saturation: It is represented in percentage where 100% signifies full saturation, resulting in no gray shades. 50% indicates a 50% gray shade while the color remains discernible, and 0% represents complete desaturation, resulting in a completely gray shade where the color is no longer visible.
The brightness of a color refers to the level of illumination we wish to apply to it, with 0% corresponding to black (no illumination), 50% indicating a neutral level of brightness, and 100% denoting white (maximum brightness).
Let's see the syntax of HSL in color property.
Syntax
color:hsl(H, S, L);
It closely resembles the HSL property, with the distinction of including an A (alpha) value that denotes the transparency of the element. The alpha value ranges from 0.0 to 1.0, where 0.0 represents full transparency and 1.0 represents complete opacity.
Syntax
color:hsla(H, S, L, A);
Built-in Color
As the name suggests, predefined color refers to a set of colors that have been pre-defined and can be accessed by their names like red, blue, green, and so on.
Syntax
color: color-name;
Explore the compilation of predefined colors matched with their decimal and hexadecimal representations below.
| S.no. | Color name | Hexadecimal Value | Decimal Value or rgb() value |
|---|---|---|---|
1. |
Red | #FF0000 | rgb(255,0,0) |
2. |
Orange | #FFA500 | rgb(255,165,0) |
3. |
Yellow | #FFFF00 | rgb(255,255,0) |
4. |
Pink | #FFC0CB | rgb(255,192,203) |
5. |
Green | #008000 | rgb(0,128,0) |
6. |
Violet | #EE82EE | rgb(238,130,238) |
7. |
Blue | #0000FF | rgb(0,0,255) |
8. |
Aqua | #00FFFF | rgb(0,255,255) |
9. |
Brown | #A52A2A | rgb(165,42,42) |
10. |
White | #FFFFFF | rgb(255,255,255) |
11. |
Gray | #808080 | rgb(128,128,128) |
12. |
Black | #000000 | rgb(0,0,0) |
The illustration of CSS colors, which includes the above properties, is given below.
Example
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>
