CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the background color or the font color of an element.
In CSS, we use color values for specifying the color. We can also use this property for the border-color and other decorative effects.
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 understand the syntax and description of the above ways in detail.
RGB Format
RGB format is the short form of ‘RED GREEN and BLUE‘ that is used for defining the color of an HTML element simply by specifying the values of R, G, B that are in the range of 0 to 255.
The color values in this format are specified by using the rgb() property. This property allows three values that can either be in percentage or integer (range from 0 to 255).
This property is not supported in all browsers; that’s why it is not recommended to use it.
Syntax
RGBA Format
It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent.
Syntax
Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation. This notation starts with the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red (RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent the blue (BB) color value.
The black color notation in hexadecimal is #000000, and the white color notation in hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000, #00FF00, #0000FF, #FFFF00, and many more.
Syntax
Short Hex codes
It is a short form of hexadecimal notation in which every digit is recreated to arrive at an equivalent hexadecimal value.
For example, #7B6 becomes #77BB66 in hexadecimal.
The black color notation in short hex is #000, and the white color notation in short hex is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.
HSL
It is a short form of Hue, Saturation, and Lightness. Let’s understand them individually.
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 takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible.
Lightness: The lightness of the color can be defined as the light that we want to provide the color in which 0% represents black (there is no light), 50% represents neither dark nor light, and 100% represents white (full lightness).
Let’s see the syntax of HSL in color property.
Syntax
HSLA
It is entirely similar to HSL property, except that it contains A (alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully transparent, and 1.0 indicates not transparent.
Syntax
Built-in Color
As its name implies, built-in color means the collection of previously defined colors that are used by using a name such as red, blue, green, etc.
Syntax
Let’s see the list of built-in colors along with their decimal and hexadecimal values.
| 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