Search within TutorialsPark

CSS Colors


Apply Colors to elements with CSS using various options .


CSS Colors

1. Colors can be applied to elements using CSS in various way.

Color Keywords

Hexadecimal Numbers

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
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 colors

Give 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

RGBa Colors
color: rgba( 128
74
33
1.00

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 values

Give it a TRY! »


CSS Colors: HSLA(Hue, Saturation, lightness, alpha)

HSLa COLORS

column-rule-style: color: hsla( 258
74%
33%
1.00

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.

HSLA(Hue, Saturation and Luminance)

Examples: CSS colors using HSLa values

Give it a TRY! »