Sololearn CSS grid Template

COLOR MODELS IN CSS3

There are currently four css properties that accept colour as values - color, background-color,border-color and outline-color.

For each of these properties, the colour value can be any of the following -

A named keyword, e.g. blue
A rgb or rgba unit, e.g. rgb(0,0,0)
A hsl or hsla unit, e.g. hsl(200,52%,33%)
transparent
currentColor
inherit

Named keyword

A named keyword is a plain english colour name which have been predefined within css. There are currently 145 of these keywords.


    div{
        color: blue;
    }

RGB

The RGB format is the most popular way of defining colour in CSS. The RGB colour model works by declaring specific levels of red, green and blue.

There are four formats in which RGB can be written in for css -

Notation	Description	Example
Decimal	Value between 0 to 255 for each primary colour	Black colour - rgb(0,0,0)
Percentage	A percentage value from 0 to 100%	Red color - rgb(100%,0%,0%)
Hexadecimal	A 6-digit format forming a unique code for each color combination	Blue color -#0000ff

RGBA

RGBA is an extension of RGB to allow the specification of transparency within the same function. Only the decimal and percentage notations can be used with RGBA.

The RGBA unit is treated as a completely separate unit to RGB. This means that, for browsers that do not support RGBA (notably IE 8) the entire function will be disregarded. It is not the case that the opacity section at the end will just be ignored.

    
    div {
        color:rgb(0,0,0); /*fallback to IE8*/
        color:rgba(0,0,0,0.5);
    }

HSL

The HSL model is an alternative to RGB. It works by specifying three values - hue, saturation and lightness.

Dimension	Range	Key Values
Hue	0-360	0/360 = Red 120 = Green 240 = Blue
Saturation	0-100%	0% = grey 100% = full color
Lightness	0-100%	0% = Black 50% = Normal 100% = White

The hue value is represented by the angle on the colour wheel. From this value, we can determine what colour - red, green, blue, or a mix between them - we are working with.

The saturation value is represented by the distance from the axis. It determines the strength of the colour, with the lowest saturation being closer to the centre of the circle.

The lightness value is represented by the z-axis, the depth of the cylinder. This percentage value determines the shade of the colour, with 0% being completely black, 100%, being completely white, and 50%, being normal.

HSLA

Like RGBA, the HSLA unit is an extension of HSL to allow the specification of transparency within the same function. The opacity unit is added as a fourth argument to the function.


        div {
            color: hsla(0, 100%, 50%, 1);
          }

References

    
 .'/,-Y"     "~-.  
 l.Y             ^.           
 /\               _\_      "DOH!"   
i            ___/"   "\ 
|          /"   "\   o !   
l         ]     o !__./   
 \ _  _    \.___./    "~\  
  X \/ \            ___./       
 ( \ ___.   _..--~~"   ~`-. 
  ` Z,--   /               \      
    \__.  (   /       ______) 
      \   l  /-----~~" /             
       Y   \          / 
       |    "x______.^ 
       |           \    
       j            Y

If you like this code , leave a like.

CSS colors