CSS Colors property


There are many CSS properties that specify the color for parts of HTML elements. For example, color, background color, border etc.

Tomato
Orange







When you specify a color you can do so using the following formats:
  • Preset Color Codes
  • Hexadecimal RGB
  • RGB
  • RGBA
  • HSL
#one   {  background-color: red;  }
#two   {  background-color: #ff0000;  }
#three {  background-color: rgb(255, 0, 0);  }
#four  {  background-color: rgba(255, 0, 0, 1.0);  }
#five  {  background-color: hsl(0%, 100%, 0%); }

Predefined Color Codes


  • red
  • green
  • blue
  • black
  • white
  • gray
  • magenta
  • purple
  • violet

Hexadecimal Color codes


The hexadecimal RGB shading documentation is the most seasoned shading documentation (together with predefined shading codes). The hexadecimal RGB shading documentation parts any given shading subtlety into three segments: Red, Green and Blue. That is the place the three letters RGB originate from. Any shading is made out of a specific measure of red, greeen and blue shading.

Example -
#ffffff;


RGB Colors

RGB color format is similar to hexadecimal color format. Each color is specified as a mixture between red, green and blue colors. Instead of using hexadecimal numbers, you use the decimal number betwen 0 and 255. Here is an example RGB color:

Example -
rgb(255, 0, 255);

RGBA Colors

RGBA hues mean Red, Green, Blue and Alpha. The RGB part is the same as in RGB hues. The An (alpha channel) determines the mistiness of the shading. The alpha channel esteem can be set between 0 (completely straightforward) and 1.0 (completely hazy). Here is a RGBA shading case:

Example -
RGBA (255, 0, 255, 1.0);

HSL Colors

HSL hues (Hue, Saturation, Lightness) are new in CSS 3.0. In the event that you are an architect you may be more used to working with HSL hues than RGB hues. You can indicate HSL hues this way:

Example -
hsl(0%, 100%, 0%);  

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment