Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Color Values

Authors can specify CSS property color values using several approaches:
  1. Current Color Keyword - currentColor( introduced in CSS Level 3 )
  2. Transparent Keyword - transparent
  3. Color Keyword - such as green
  4. Hexadecimal Color - such as #090
  5. rgba() Color Function - such as rgba( 0, 130, 0, 1 )
  6. hsla() Color Function - such as hsla(120, 100%, 50%, 1)

Current Color Keyword

The currentColor keyword means "value of the ‘color’ property". The initial default color value for many CSS properties is the current color, which means the property takes on the color set for the CSS 'color' property. This keyword is introduced in CSS3. h1 { color: orange; border: 5px solid currentColor; }

Transparent Keyword

The transparent keyword will render a clear transparent color. p { color: transparent; }

Color Keyword

The basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow #div1 { background-color: lime; } The extra color keywords supported by most browsers are: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen

Hexadecimal Color

Hexadecimal color values are usually derived from color pickers. They can be set using a three( #000 ) or six( #000000 ) character sequence. div { border: 1px solid #F00; } /* 1 pixel solid red border on all div elements */

rgb() and rgba() Color Function

The rgb() and rgba() color functions specify the red, green, blue and alpha values that make up a color. The parameters are: Parameter 1 - represents red value from [ 0 - 255 ] or [ 0% - 100% ] Parameter 2 - represents green value from [ 0 - 255 ] or [ 0% - 100% ] Parameter 3 - represents blue value from [ 0 - 255 ] or [ 0% - 100% ] Parameter 4 - represents the alpha( opacity ) of the color from 0.0 - 1.0 ( 0% - 100% ) h1 { color: rgba( 100%, 0%, 0%, 1 ); } /* red */ h1 { color: rgba( 255, 0, 0, 1 ); } /* red */ h1 { color: rgba( 255, 0, 0, 0.5 ); } /* red 50% transparent */ To use the rgb() function instead of rgba(), omit the alpha parameter.

hsl() and hsla() Color Functions

The hsl() and hsla() color functions set colors by specifying hue, saturation, lightness and alpha values that make up a color. The parameters are: Parameter 1 - represents hue. "0" and "360" equate to red. All other colors are 1 - 359. Parameter 2 - represents saturation. 100% is full color saturation. 0% is no saturation(greyscale). Parameter 3 - represents lightness and darkness. 100% is lightest and 0% is darkest. Parameter 4 - represents the alpha( opacity ) of the color from 0.0 - 1.0 ( 0% - 100% ) div { background: hsla( 360, 100%, 50%, 1 ); } /* red */ div { background: hsla( 0, 100%, 50%, 1 ); } /* red */ div { background: hsla( 70, 90%, 50%, 0.5 ); } /* android green 50% transparent */ To use the hsl() function instead of hsla(), omit the alpha parameter.

CSS

Value Reference

Color ValuesLength Values