In HTML (HyperText Markup Language), colors are used to style elements on a webpage — for example, setting the background, text color, or border color.
HTML colors can be specified using different formats:
1. Color Names:There are 140+ standard color names recognized by all browsers. Here are a few examples:
Red, Blue, Green, Lightgray, Orange, Purple
2. RGB (Red, Green, Blue) Values:The RGB model is based on mixing different intensities of red, green, and blue light. Each color's intensity is specified by a number between 0 and 255 (inclusive).
The syntax for RGB is:
color: rgb(red, green, blue);
color: rgb(255, 0, 0);
color: rgb(0, 0, 255);
color: rgb(0, 255, 0);
A hexadecimal color is specified with #rrggbb.
# represents the pound sign (hashtag).
rr (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff (decimal 0 to 255).
Hexadecimal is a shorthand for RGB.
The syntax for a HEX color is:
color: #rrggbb;
color: #FF0000;
color: #0000FF;
color: #00FF00;
If all pairs of digits are the same, you can use a shorthand: #rgb.
#ccc is the same as #cccccc.
#f80 is the same as #ff8800.
#808 is the same as #880088.
RGBA is an extension of RGB with an alpha channel (a) for specifying opacity.
The alpha value is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
The syntax for RGBA is:
color: rgba(red, green, blue, alpha);
color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
color: rgba(0, 0, 255, 0.8); /* 80% opaque blue */
HSLA defines colors based on:
- H: Hue (0 to 360 degrees on the color wheel).
- S: Saturation (0% to 100% - the intensity of the color).
- L: Lightness (0% to 100% - how bright the color is).
- A: Alpha (0.0 to 1.0 - for opacity).
The syntax for HSLA is:
color: hsla(hue, saturation, lightness, alpha);
color: hsla(0, 100%, 50%, 1); /* Full Red, 100% opaque */
color: hsla(240, 100%, 50%, 0.7); /* Blue, 70% opaque */