Home CS SEO HTML
Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO

More

What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media




more topic chapters

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

Run

As 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

Run

You 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

Run

Revise 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

Run

The 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





Revisezone.com Copyright 2020 Developers & Coding section