CSS Colors
There is no need to tell the importance of colors.
But it is the most ignorable aspect of web designing & development cycle.
Color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long.
Suppose if we visited a website having a dull color scheme, are we going to stay longer on such website?
Now consider another website, in which , color scheme is very well selected & more appealing, we stay a little bit longer.
The proper selection of color will make a website appealing, attracting & create a positive impact on the visitor.
In CSS, we can define colors by four ways:
=> RGB (Red, Green, Blue)
rgb(0,255,132)
value Can be anything between 0 to 255
red color == (255, 0, 0)
green color == (0, 255, 0)
blue color == (0, 0, 255)
white == (255, 255, 255)
black == (0, 0, 0)
Shades of grey are obtained by putting the equal values for rgb content
==> HEX Values
Hexadecimal values: A combination of 6 hex digits each ranging from 0 to F
0-0
1-1
2-2
3-3
4-4
5-5
6-6
7-7
8-8
9-9
A-10
B-11
C-12
D-13
E-14
F-15
#rrggbb
value can be any value ranging from 0 to F
Red- #ff0000
Green- #00ff00
Blue- #0000ff
Black- #000000
White- #ffffff
Like in rgb, shades of grey are obtained for equal value of each color
==> HSL==(Hue, Saturation, Lightness)
Hue: degree on color wheel
0 - for shade of grey
100 - for full color
Saturation: Intensity of color. It is a % value
100% - pure color
0% - No color
50% - half color, half grey
Lightness: Qty. of light you want
0% - black (No Light)
100% - white(Full Light)
To get shades of grey,
h=0, s=0%, adjust lightness
RGBA & HSLA::
A=> Alpha ==> A number between 0 & 1
0 means full transparent
1 means no transparent
You can see how colors can be defined on a web page using CSS below:
Code used in the video tutorial
You can play with the above code using your creativity.....
Thanks.
But it is the most ignorable aspect of web designing & development cycle.
Color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long.
Suppose if we visited a website having a dull color scheme, are we going to stay longer on such website?
Now consider another website, in which , color scheme is very well selected & more appealing, we stay a little bit longer.
The proper selection of color will make a website appealing, attracting & create a positive impact on the visitor.
In CSS, we can define colors by four ways:
- By The name of color
- By defining the HEX value
- By defining the RGB value
- By defining the HSL Value
- By defining the RGBA value
- By defining the HSLA value
=> RGB (Red, Green, Blue)
rgb(0,255,132)
value Can be anything between 0 to 255
red color == (255, 0, 0)
green color == (0, 255, 0)
blue color == (0, 0, 255)
white == (255, 255, 255)
black == (0, 0, 0)
Shades of grey are obtained by putting the equal values for rgb content
==> HEX Values
Hexadecimal values: A combination of 6 hex digits each ranging from 0 to F
0-0
1-1
2-2
3-3
4-4
5-5
6-6
7-7
8-8
9-9
A-10
B-11
C-12
D-13
E-14
F-15
#rrggbb
value can be any value ranging from 0 to F
Red- #ff0000
Green- #00ff00
Blue- #0000ff
Black- #000000
White- #ffffff
Like in rgb, shades of grey are obtained for equal value of each color
==> HSL==(Hue, Saturation, Lightness)
Hue: degree on color wheel
0 - for shade of grey
100 - for full color
Saturation: Intensity of color. It is a % value
100% - pure color
0% - No color
50% - half color, half grey
Lightness: Qty. of light you want
0% - black (No Light)
100% - white(Full Light)
To get shades of grey,
h=0, s=0%, adjust lightness
RGBA & HSLA::
A=> Alpha ==> A number between 0 & 1
0 means full transparent
1 means no transparent
You can see how colors can be defined on a web page using CSS below:
Code used in the video tutorial
You can play with the above code using your creativity.....
Thanks.
Comments
Post a Comment