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”.