CSS color Property

CSS color Property


CSS color Property
Various CSS Color Values - 
In CSS, colors can also be specified using -
  1. RGB values, 
  2. HEX values, 
  3. HSL values,
  4. RGBA values, and
  5. HSLA values 
We will discuss Them As follows - 
CSS RGB Color - 
RGB stands for  
  1. Red
  2. Green
  3. Blue.
RGB code is the combination of red green and blue colors which helps to make various new color combinations.
Syntax - 
rgb(red,green,blue)
Above given formula is used to specify rgb color 
Each color can go from 0 (zero) to 255 to make different combinations.
Example - 
To use red color use rgb code - rgb(255,0,0)


To use green color use rgb code - rgb(0,255,0)


To use blue color use rgb code - rgb(0,0,255)
Now we will see list of colors and their rgb codes - 
 
RGBA - 
 
RGBA color values are an extension of RGB color values with an alpha value - 
 
which specifies the opacity for a color, in other words, transparency of a color.
Syntax  -
rgba(red, green, blue, alpha);
Example - 
.apple {
/* Opaque red */
color: rgba(255, 0, 0, 1);
}
.apple-50p {
/* Half-translucent red. */
color: rgba(255, 0, 0, .5);
}


 
 
CSS HEX Color
CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue components of a color.
Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal notation. 
Uppercase and/or lowercase Hexadecimal values may be used (i.e. #3fc = #3FC = #33ffCC). 
The browser interprets #369 as #336699. If that is not what you intended but rather wanted #306090, you need to specify that explicitly. 
The total number of colors that can be represented with hex notation is 256 ^ 3 or 16,777,216. 
Syntax  -
color: #rrggbb;

color: #rgb
Where hexadecimal code is represented by #value.
.some-class {
/* This is equivalent to using the color keyword 'blue' */
color: #0000FF;
}
.also-blue {
/* If you want to specify each range value with a single number, you can!
This is equivalent to '#0000FF' (and 'blue') */
color: #00F;
}
 
Hexadecimal notation is used to specify color values in the RGB color format, per the W3C's 'Numerical color values. 
There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values. 
Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options.
Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization.
 #FFC125 and #ffc125 are the same color. 
Here are some colors with there Hexadecimal codes - 
NOTE - 
CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF
CSS HSL Color
HSL stands for -   
  1.  Hue ("which color"), 
  2. Saturation ("how much color"), and 
  3. Lightness ("how much white"). 
Hue is represented as an angle from 0° to 360° (without units). 
While saturation and lightness are represented as percentages.
Syntax - 
color: hsl(, %, %); 
 
Now we will understand what is , , and as follows - 
specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red.
specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored
specified in percentage where 0% is fully black and 100% is fully white.
NOTE - 
  • A saturation of 0% always produces a grayscale color; changing the hue has no effect.
  • A lightness of 0% always produces black, and 100% always produces white; changing the hue or saturation has no effect. 
hsla() Notation - 
Similar to hsl() notation, but with an added alpha (opacity) value.
The hsla() function define colors using the Hue-saturation-lightness-alpha model (HSLA).
Syntax - 
hsla(, %, %, );
 
 
Now we will see Example-
Example - Which is using all the color formates like rgb hsl etc -

<!DOCTYPE html>
<html>
<head>
<style>
body{
  background-color: rgb(19, 19, 19);
}
.one{
  color: #92a8d1;
}
.two{
  color: rgb(201, 76, 76);
}
.three{
  color: rgba(201, 76, 76, 0.6);
}

.four{
  color: hsl(89, 43%, 51%);
}
.five{
  color: hsla(89, 43%, 51%, 0.6);
}

</style>
</head>
<body>

<h1 class="one">This is a heading</h1>
<h1 class="two">This is a heading</h1>
<h1 class="three">This is a heading</h1>
<h1 class="four">This is a heading</h1>
<h1 class="five">This is a heading</h1>

</body>
</html>

 

 
Output -