Apply Colors to elements with CSS using various options .
1. Colors can be applied to elements using CSS in various way.
RGB(red, green, blue)
HSL(hue, saturation, lightness)
RGBA(red, green, blue, alpha)
HSLA(hue, saturation, lightness, alpha)
CSS Basic Colors
|aqua #00FFFF 0, 255, 255||black #000000 0, 0, 0||blue #0000FF 0, 0, 255||fuchsia #FF00FF 255, 0, 255||gray #808080 128, 128, 128||green #008000 0, 128, 0||lime #00FF00 0, 255, 0||maroon #800000 128, 0, 0|
|navy #000080 0, 0, 128||olive #808000 128, 128, 0||purple #800080 128, 0, 128||red #FF0000 255, 0, 0||silver #C0C0C0 192, 192, 192||teal #008080 0, 128, 128||white #FFFFFF 255, 255, 255||yellow #FFFF00 255, 255, 0|
1. The most primary way to specify colors is using Basic Color Keywords. The keywords are case-sensitive.
Example: CSS colors using Basic colorsGive it a TRY! »
CSS Colors using Hexadecimal Notations
1. The most common way of applying colors is by using Hexadecimal notations to represent the RGB(red, blue, green) values.
2. You can have 256 shades for each of the RGB values. Thus in all 16 million colors can be created.
3. Hex values must begin with a pound(#) symbol and only alphabets from A-F are possible and are case-sensitive as well.Give it a TRY! »
CSS Colors using RGBa values
1. You can use the function rgba() to represent the RGBA(red, blue, green, aplha) values for the color.
2. Here, 'a' in RGBa is alpha, its values represent the transparency of the colors, not to be confused with opacity which represents the opacity of the elements.
3. You can also use just the function rgb() , to represent only the RGB values ignoring alpha values.
Example: CSS colors using RGBa valuesGive it a TRY! »
CSS Colors: HSLA(Hue, Saturation, lightness, alpha)
1. Another way to specify colors is by using HSLA(Hue, Saturation, Luminance, Alpha) colors using the function hsla().
2. HSL uses cynlindrical co-ordinate system to Represent RGB Values. All color combinations are in a cylinder around the main axis.
Hue : The angle around the axis is represented by the value HUE(h). Value is between 0 and 360.
Saturation : The distance from the axis represents the Saturation(i.e intensity of the color). Value is between 0 and 100.
Luminance : The distance along the axis denotes the Luminance(i.e degree of brightness). Value is between 0 and 100
Alpha : Alpha Represents the transparency of the colors.Its value is between 0 to 1.