HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
HTML Colors - RGB, HSL & HEX
There are 3 different forms of representing colors
- RGB
- Hex
- HSL
We will will talk about each color format in depth but we will not discuss the computer science part behind these. If You do want to know how the computer storess them go to our computer science section
RGB
This stands for red blue green color format
So we define a value between 0 and 255 for each primary color R G and B
Let's see an example
RunAs you can see we use the rgb function to define the value of each primary color. Different mixes of each primary color results in different colors
Let us see how yellow is made
RunYou don't need to know these codes by heart. You can go to Google search and search for color picker and it will allow you to choose a color and it's corresponding code
HEX
The most easiest and simple way of representing colors. It is very similar to RGB format however we represent it using hexadecimals and #
Here is an example of the color red HEX code
#ff0000
Each two hexadecimals represent a primary color
This is the color maroon
#ff00ff
RunRevise Zone recommeds you to use hexadecimals to represent colors as they are very easy to handle with
HSL
Revise Zone doesn't recommend you to use this color format.
This stands for Hue, saturation and light intensity
Hue defines the color and its a value between 0 to 360(like the angle of the circle)
Saturation is in percentage form which determines the intensity of the color
Light intensity is the brightness level
Here is an example
HSL(360,90%,60%);
This will give a shade of red
Run
Don't worry you don't need to remember these codes. Revise Zone recommends you to use the Hex color format as it is easy. However the RGB and HSL has a slight advantage
RGBA and HSLA
The 'a' stands for alpha and it controls the opacity of the color(transparency)
For example if we have the color code
rgb(255,0,0);
We should get red
However for rgba we can get different levels of transparency
rgba(255,0,0,0.2);
The alpha value can only take a value between 0 and 1. Where 0 is fully transparent(no color) and 1 is fully opaque(not transparent)
Lets see a basic example
RunThe same can be applied for HSL
We can use the opacity property for CSS rather than using RGBA and HSLA but there is a huge disadvantage which we will take about later
You have completed the colors sections. However, this is more towards the styling (CSS section) however HTML does use the style attribute so we will talk about a little about design and style in the next chapter