Learn CSS Colors


CSS Colors are set using different methods such as CSS color name format , example : Green , Red , or CSS RGB format, or CSS HEX format, also using RGBA , HSL and more.


CSS color values affect the element text, border, background and his decorative effects


CSS colors may be normal colors, glowing colors, transperent colors, and many more options, we can also create a CSS animation, but that is for another tutorial.


In the next table we added some examples of CSS color formats:


Format Syntax Example
CSS Color name red, green, etc p{color:green;}
CSS Short Hex #RGB p{color:#3A7;}
CSS Hex Code #RRGGBB p{color:#FF0120;}
CSS RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}






CSS Colors - RGB Values


The CSS RGB format is set using the rgb( ) property, there are 3 values, each for red, blue, green, each one can be set using numbers from 0 to 255, example: rgb(0,0,255) , we can also set percentage as color value, not every browser supports RGB so do not use it.


Color example Color in RGB format Syntax
rgb(30,49,148) class_name{background-color:rgb(30,49,148);}
rgb(71,222,82) class_name{background-color:rgb(71,222,82);}
rgb(222,177,71) class_name{background-color:rgb(222,177,71);}

rgb(193,46,46)

Try yourself >>









CSS Colors - Hex Values


The CSS hexadecimal format defines a 6 digit color (RRGGBB), the first two digits represent a red color, the folowing two digits represent a green color and the next two digits represent a blue color.


You can simply set numbers for the 6 digits syntax, or use any graphic design program such as Windows Paint or Photoshop to generate numbers:

Tip:(some code editors like visual code, allow you to generate colors when you set the CSS hexadecimal format in the editor).


Color example Color in HEX format Syntax
#006666 class_name{background-color:#006666;}
#66FFFF class_name{background-color:#66FFFF;}
#9999FF class_name{background-color:#9999FF;}

#6a5acd

Try yourself >>










CSS Colors - Short Hex Values


The CSS short HEX format is a shorter method of the CSS HEX format, as we said before, you can generate numbers yourself or by any graphic design software and also some code editors allow you to generate numbers easily.



Color example Color in short HEX format Syntax
#FF0 class_name{background-color:#FF0;}
#F0F class_name{background-color:#F0F;}
#000 class_name{background-color:#000;}

#372

Try yourself >>









CSS Colors - color name Values


Another method to set a color for your HTML Element, is by using color names, we define the color name in the CSS style area, there are plenty of website that are full of CSS color names.



Color example Color name format Syntax
LightSkyBlue class_name{background-color:LightSkyBlue;}
DarkSlateGrey class_name{background-color:DarkSlateGrey;}
SteelBlue class_name{background-color:SteelBlue;}

Violet

Try yourself >>








Learn CSS Background Color


Adding background colors to an HTML element is easy using CSS.


In CSS the background of an HTML element can be set using the background-color method:


Learn CSS


CSS Background color



Code Example:


            <style>
     .class{
background-color:green;
}
</style>

 
  
Try yourself >>







Learn CSS Border Color


Controlling the border colors of an HTML element is easy using CSS.


In CSS the borders of an HTML element can be controlled by using the border property:


CSS Borders


hello i am CSS Border color



Code Example:


            <style>
     .class{
      border:1px solid aquamarine;
}
.class{
  border:5px solid blue;
}
</style>

 
  
Try yourself >>







Learn CSS Text Color


We can easily control our content or website page text color using CSS text color styling


In CSS the text color can be set using the color property.


There are two options here, control the CSS text color in the paragraph itself or in the style area, We will demonstrate both:


CSS text color


CSS text color



Code Example:


            <style>
    .text-color p
    {
    color:blue;
}
</style>
      <div class="text-color"><p>CSS text color</p>

      <p style="color:red;">CSS text color</p>


 
  
Try yourself >>













learn advanced css in 1 day, you are in the right place to learn the best html and css course, FreeCodeWiki is one of the best websites that teach css3 tutorial for beginners and above.



Navigation