CSS Colors :
CSS supports 3types of patterns, those are :
\> named colors
\> RGB colors
\> Hexadecimal colors
named colors:
\>it supports to write direct color name
\>we have some limited colors
ex: white, black, red, green etc...
\> Color names are not case-sen
RGB colors:
\>RGB model specifies that the composition of 3 basic colors (Red, Green, Blue)
\>RGB produces 16millions colors.
Syn: rgb(red,green,blue)
red => 0 - 255
green => 0 - 255
blue => 0 – 255
ex: rgb(10, 45, 201) 401%255 🡺146
Hexadecimal number colors:
\>Hexadecimal model is the shortcut for rgb model
\>Hexadecimal system ranges from 0 - 15
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
Syn: #RRGGBB 1,2 red 3,4 green 5,6 blue
ex: #1a4b68
#RGB
ex: #3d7
Note: in realtime "Hexadecimal model" is recommended. these colors we can use for foreground color, background color, border color
etc..
for setting colors we have some attributes, those are :
color 🡺 to set/to change foreground color (text color)
background-color 🡺 to set/to change background color
border-color 🡺 to set/to change border color (line color)
box-shadow 🡺 to set/to change shadow color
text-shadow 🡺 to set/to change text shadow color
Note: all these are CSS attributes. Support by Most of html tags
Gradient colors :
background: #FC466B; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #3F5EFB, #FC466B); 🡸 Chrome 10-25, Safari 5.1-6
background: linear-gradient(to bottom, #3F5EFB, #FC466B); 🡸W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
linear-gradient(direction, color1,color2,…color-n)
dir: to left (r=>l)
to right (l=>r)
to top (b=>t)
to bottom (t=>b)
background: linear-gradient(to bottom, #3F5EFB 40%, #FC466B 60%);
-webkit-linear-gradient(to left, #3F5EFB, #FC466B);
linear-gradient(to left, #3F5EFB, #FC466B);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(38,38,162,1) 60%, rgba(0,212,255,1) 100%)
radial-gradient(shape, color1, color2, …color-n)
radial-gradient(circle, rgb(131,58,180) 0%, rgb(29,166,65) 50%, rgb(252,176,69) 100%);
radial-gradient(circle, rgba(166,29,142,1) 57%, rgba(100,180,111,1) 78%, rgba(69,252,96,1) 100%);
Note: while applying gradient colors we have to use “background” property in place of “background-color”.