CSS Tutorial - CSS Colors How to use colors using CSS RGB stands for Red, Green and Blue respectively. All of the three colors are Primary Colors. Digital colors shades are result of all three primary colors lights mixing which is emitted by the device screen. There are two types of mixing shades. Color Shades and Gray Shades

CSS Colors


CSS Colors are used to specify the colors of HTML Elements, Text, and Borders etc. In order to specify the colors using CSS, we can use the predefined names or Color Code Values.



Red
White
Aqua
Aquamarine
Yello
Orange
Bisque
Black
Blue
BlueViolet
Gray
Green




We can specify the color value in various formats. Below defined table is a list of the formats with Syntax and Example.

Format Syntax Example
Color Name Red, Green, Blue, Tomato, Orange div{background-color:orange;}
HEX Color value #RRGGBB div{background-color:#0066FF;}
RGB (Absolute Value) rgb(rrr,ggg,bbb) div{background-color: rgb(255, 0,255);}
RGB (% Value) rgb(rrr%, ggg%,bbb%) div{background-color rgb(50%, 40%,60%);}
SHC (Short HEX Code) #RGB div{background-color:#06F;}
HSL (Hue, Saturation, Light) hsl(hhh, sss%, lll%) div{background-color: hsl(120, 40%, 60%);}
RBGA (Red, Green, Blue, Alfa) rgb(rrr,ggg,bbb, a.a) div{background-color rgb(255, 0,255, 0.5);}
HSLA (Red, Green, Blue, Alfa) hsl(hhh, sss%, lll%, a.a ) div{background-color: hsl(120, 40%, 60%, 0.4);}


You have been introduced with CSS color formats with their syntax and short examples above. Now we will study them more descriptively but before start, we need to understand basic concept of color code. It gives lot of idea about how can we use colors in CSS easily.

Whats is RGB?


RGB stands for Red, Green and Blue respectively. All of the three colors are Primary Colors. Digital colors shades are result of all three primary colors lights mixing which is emitted by the device screen. There are two types of mixing shades. Color Shades and Gray Shades.

Red - RGB(255, 0, 0)
Green - RGB(0, 255, 0)
Blue - RGB(0, 0, 255)




Color Shades: When all three Primary Color Light sources output the three different values then colors shades are formed. You can better understand with below example.


<div style = "background-color:rgb(251,163,20);"></div>


Gray Shades: When all three Primary Color Light sources output equal values then gray shades are formed. Check in the example.


<div style = "background-color:rgb(160,160,160);"></div>


Colors Names


In HTML and CSS, color can be defined with their names. Like Red, Blue, Yellow, Green, Aqua, Magenta etc. You can find in below example that how to use the color in CSS with their names.

Red
Green
Blue


Yellow
Pink
Orange





<div style = "background-color:green;"></div>


RGB Color Code


In HTML and CSS, color can be defined as RGB values. How to use the RGB values, you can find in below syntax example.


<div style = "background-color:rgb(251,163,20);"></div>


In above example rgb is the key and inside the parenthesis three color parameters define the intensity of red, green and blue color respectively. Each parameter value varies from 0 to 255. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.

RGB color can be defined with absolute value and % (percent) too.


<div style = "background-color:rgb(50%,20%,20%);"></div>


RBGA Color Code


RGBA is an extension of RGB color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

Red-RGBA(255,0,0,0.3)
Green-RGBA(0,255,0,0.4)
Blue-RGBA(0,0,255,0.5)






<div style = "background-color:rgb(251,163,20,0.5);"></div>


HEX Color Code


In HTML and CSS colors also can be defined using Hexadecimal value, you can find in below syntax example.

Red- #FF0000
Green-#00FF00
Blue-#0000FF






<div style = "background-color:#EECC00;"></div>


Hexadecimal Numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

In above example you can find alpha-numerical six digits followed by # (hash). ‘#’ is a key for using hexadecimal code, first two digits are red color value, next two digits are green color value and last two digits are blue color value. Hexadecimal value can be varied from ‘00’ to ‘ff’.  Seven figures together create hex color code. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.


<div style = "background-color:#434343;"></div>


SHC (Short HEX Code)


SHC is shorter form of six digits HEX code. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #0C5 becomes #00CC55.

#2299bb = #29b
#EE99BB = #E9B
#EECC00 = #ECB






<div style = "background-color:#f90;"></div>


HSL Color Code


In HTML, a color can be also defined using HSL value. How to use the HSL values, you can find in below syntax example.


Red: hsl(0, 100%, 50%)
Green: hsl(120, 100%, 50%)
Blue: hsl(240, 100%, 50%)





<div style = "background-color:hsl(135, 94%, 30%);"></div>


In above example hsl is a key and inside the parenthesis three parameters (Hue, Saturation and Light) value are defined.

Hue is a degree on the color wheel from 0 to 360 where 0 is red, 120 is green and 240 is blue. Saturation can be described as intensity of color. 0% means no color only gray, 50% means 50% of gray and color both and 100% means only color no gray. The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades


<div style = "background-color:hsl(0, 0%, 30%);"></div>


HSLA Color Code


HSLA is an extension of HSL color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

Red: hsl(0, 100%, 50%, 0.5)
Green: hsl(120, 100%, 50%, 0.4)
Blue: hsl(240, 100%, 50%, 0.3)





<div style = "background-color:hsla(0, 0%, 30%, 0.5);"></div>

Related Topics


progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

4 comments:

  1. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. Great websites!
    data science course in indore

    ReplyDelete
  2. A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one.
    iot course training in Hyderabad

    ReplyDelete
  3. This is a fantastic website and I can not recommend you guys enough.
    Best Institute for Data Science in Hyderabad

    ReplyDelete