The 3 ways to represent color in HTML or CSS
The are a few ways to define color in on a webpage using HTML and CSS, and I will be defining the 3 popular ones here. These codes can be used to define a specific background color, link text color, or paragraph, (regular text,) for a web-page. My personal use of the color tag in CSS and HTML is to write the color as a HEX value and as a HSL value.
This is because some of the older browsers, and they are still being used, don’t pick up the HSL values as easily as they do the HEX values, and HEX has been around forever, and can be picked up easily. Wherever you can imagine color being used that isn’t an image, the following are the most popular ways to do it.
RGB: Red, Green, Blue
written as: (color=”red”)
written as: color=”green”
written as: color=”blue”
This is as simple as it looks. The color red, green and blue. There are other colors such as cyan, but you get the idea.
HSL: Hue, Saturation, Lightness (See color wheel above.)
written as – Green: {color: hsl(120, 100%, 50%);}
written as – light green: {color: hsl(120, 100%, 75%);}
written as – dark green: {color: hsl(120, 100%, 25%);}
written as – pastel green: {color: hsl(120, 60%, 70%);}
Hue represents the angle in a color wheel from 0 to 360.
Saturation is written as a number between 0 and 100, expressed as a percentage.
Lightness is the amount of lightness, or white in a color and is also expressed as a percentage.
The HSL value is necessary for some browsers. Writing clean code is important, and for me that means giving both a Hex value and an HSL value to make sure that the proper color is picked up by the browser.
HEX: RRGGBB – 6 digit number/letter combination groups of 2 2 2
1st set of 2 corresponds to the Red Value in the RGB style
2nd set of 2 corresponds to the Green Value in the RGB style
3rd set of 2 corresponds to the Blue Value in the RGB style
written as (color=”#ff0000”) – RED – All red and no green or blue
written as (color=”#00ff00”) – GREEN – All green and no red or blue
written as (color=”#0000ff”) – BLUE – All blue and no green or red
written as (color=”#ffffff”) – WHITE – All red, all green, and all blue
written as (color=”#0000”) – BLACK – No red, no green, and no blue
I hope this isn’t too confusing, but it is meant as a reference guide first, but it will should help you to recognise the color element next time you look at a piece of HTML or CSS. Please check out my articles on HTML and CSS later in this blog.
