CSS Colors
Next ❯CSS Background
It plays a very important role in designing
- Used in css properties which uses COLOR
- turned_in_notTypes
- Name Color
- RGB Color
- HEX Color
- RGBA Color
- HSL Color
- HSLA Color
Name Color
Used as a simple name of color
- turned_in_notSome Name Color
Color Name Color Red Orange Yellow Green Blue Indigo Violet
RGB Color
It works on combination three colors RED,GREEN,BLUE
/*Syntax*/
rgb(color_value,color_value,color_value)- Each color, values from 0-255
- turned_in_notSome RGB Color
RGB Name Color rgb(0,0,0) rgb(0,0,255) rgb(0,255,255) rgb(255,255,0) rgb(255,0,0) rgb(255,255,255)
HEX Color
It's a hexadecimal color used hexadecimal values from 0-f, which are [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f]
/*Syntax*/
#[3 or 6 digits value]- Values can be either of 3 or 6 digits
- turned_in_notSome HEX Color
HEX Name Color #ec407a #7e57c2 #42a5f5 #e1c #000 #fff
RGBA Color
It works on combination three colors RED,GREEN,BLUE and one alpha value [0 to 1 float values]
/*Syntax*/
rgba(color_value,color_value,color_value,alpha_value)- Introduce in CSS3
- Each color, values from 0-255
- Alpha values from 0-1 float values
- Alpha values act as a opacity [0-fully transparent , 1-fully un-transparent]
- turned_in_notSome RGBA Color
RGBA Name Color rgba(0,255,255,0) rgba(0,255,255,0.1) rgba(0,255,255,0.25) rgba(0,255,255,0.5) rgba(0,255,255,1)
HSL Color
It works on combination Hue, Saturation and Lightness
/*Syntax*/
hsl(hue_value,saturation_value,lightness_value)- Introduce in CSS3
- Hue values from 0-360
- Saturation values from 0%-100%
- Lightness values from 0%-100%
- turned_in_notSome HSL Color
HSL Name Color hsl(20,100%,100%) hsl(20,100%,90%) hsl(20,100%,80%) hsl(20,100%,60%) hsl(20,100%,40%) hsl(20,100%,20%) hsl(20,100%,10%)
HSLA Color
It works on combination Hue, Saturation, Lightness and Alpha value
/*Syntax*/
hsla(hue_value,saturation_value,lightness_value,alpha_value)- Introduce in CSS3
- Hue values from 0-360
- Saturation values from 0%-100%
- Lightness values from 0%-100%
- Alpha values from 0-1 float values
- Alpha values act as a opacity [0-fully transparent , 1-fully un-transparent]
- turned_in_notSome HSLA Color
HSLA Name Color hsla(40,100%,60%,0) hsla(40,100%,60%,0.1) hsla(40,100%,60%,0.25) hsla(40,100%,60%,0.5) hsla(40,100%,60%,0.75) hsla(40,100%,60%,1)
❮ Prev Ways to add CSS
Next ❯CSS Background
So,