HTML colors
HTML colors are specified in many ways.
- Name – each color is identified with a unique name. eg. red, white etc.
- A simple color can be expressed as three 8-bit numbers in 0..255 range representing the red, blue and green components of the color respectively inside the parantheses of the string “rgb()”. This is the RGB method of representing colors.
eg. rgb(255,0,0) stands for red color. rgb(0, 0, 0) stands for black and rgb(255,255,255) stands for white. - rgba method adds an alpha channel to rgb method. Alpha channel means opacity of the color. It is a number between 0.0 and 1.0. 0.0 means most transparent and 1.0 stands for totally opaque color.
eg. rgba(255,0,0,0.2) - A six digit hexadecimal number prefixed by the # symbol. The first two digits represent the red component, the middle two digits
represent the green component, and the last two digits represent the blue component, in hexadecimal.
Examples: #ff0000 stands for red, #000000 for black and #fffff for white color respectively.
- HSL and HSLA Values.
These are not used commonly hence we will not go into details.
An HSL color value is specified with:hsl(hue, saturation, lightness). Added alpha channel gives the HSLA value.
Try these out, one by one:
<html>
<body style="background-color:white;">
<h1 style="color:Red;">This is meant to be a red heading</h1>
</body>
</html>
<html>
<body style="background-color:white;">
<h1 style="color:#ff0000;">This is meant to be a red heading</h1>
</body>
</html>
<html>
<body style="background-color:white;">
<h1 style="color:rgb(255,0,0);">This is meant to be a red heading</h1>
</body>
</html>
<html>
<body style="background-color:white;">
<h1 style="color:rgba(255,0,0,0.1);">This is meant to be a totally faded almost invisible red heading</h1>
<h1 style="color:rgba(255,0,0,0.2);">This is meant to be a much faded red heading</h1>
<h1 style="color:rgba(255,0,0,0.5);">This is meant to be a faded red heading</h1>
<h1 style="color:rgba(255,0,0,1.0);">This is meant to be a solid red heading</h1>
</body>
</html>