<color>

The <color> CSS data type is used to specify color values.

The <color> value can be specified by either a color keyword or a numerical specification. A color can be specified using one of the following formats:

Color Keywords

Color keywords are case-insensitive words which represent specific colors, such as white, black, red, etc.

The list of standard color keywords supported by CSS2 is a list of 17 keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. The values for each of these colors are the following:

View this demo on the Codrops Playground

In CSS3, the list of supported colors got extended to 147 color keywords and the list is now referred to as the extended color keywords, the X11 keywords, and the SVG keywords. The 147 colors consist of the 17 standard colors plus 130 more.

View this demo on the Codrops Playground

The full list of supported colors can also be found in this tool built to help web designers and developers learn the 147 CSS color names that are available today: 147 Colors | CSS Color Names

If an unknown color keyword is used in a CSS property, the property becomes invalid and will be ignored.

The transparent keyword

The transparent keyword can be used wherever a value is expected. It represents a fully transparent color, which means that the background can show through any element which gets this color value. This keyword can be considered a shorthand for an RGBA value with an alpha value of 0, like for example, transparent black, rgba(0,0,0,0), which is its technical value. (see next section for the RGBA color notation)

For example, the following creates a transparent border on a .el element.

.el{
    border-color: transparent;
}
                            

The currentColor keyword

The currentColor keyword is used to make properties of an element, or child elements of an element, inherit the color set by the element’s color property. In other words, it acts as the inherit value to allow inheritance of a color that would otherwise not be inherited by a property or child element.

For example, suppose you have set the color of text on an element to blue, and you want the background-color property of that element’s child to be the same color, then you could set the value of the background-color property to currentColor, which will apply the computed value of the element’s color property to the child element’s background. Normally, the background-color property would not inherit the color of the color property of the parent element, so this is an example of where the currentColor property can come in handy.

.parent {
    color: blue;
}
.child {
    background-color: currentColor; /* "inherits" the value of its parent's color property */
}
                            

If the currentColor keyword is used in a property that does normally inherit the value of the color property, then the currentColor would be equivalent to the inherit value on that property, if such a property exists.

RGB Colors

RGB stands for “Red Green Blue”. When using RGB values, each value consists of a combination of these three colors.

Hexadecimal Notation ( #rgb )

Hexadecimal values specify opaque colors in the range of #000 (black) to #fff (white), the first character represents the red channel, the second represents the green channel, and the third represents the blue channel.

Hexadecimal values are represented by a # (hashtag) character followed by either 3 characters ranging from 0-9 and A-F (where the range A-F is equivalent to saying 10-16 in a base-16 numeric system) or 6 characters. The three-character RGB notation (#rgb) is converted into six-character form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00 and not to #f0b000.

The letters in the hexadecimal notation are case-insensitive, so #fff is the same as #FFF, and #f055Dd is the same as #F055DD.

Colors set using the hexadecimal RGB format are all opaque colors, just like colors set with a color keyword.

For example, the following code will set a light gray text on a black background on a div:

div {
    background-color: black; /* could also be #000 or #000000 */
    color: #eee; /* equivalent to #EEEEEE */
}
                            

View this demo on the Codrops Playground

Functional notation rgb()

An rgb() function is used to set colors as a combination of red, green and blue. Any color can be made by mixing these three colors together. The function accepts 3 comma-separated values that are either integers between 0 and 255, or percentages. For example, rgb(255,0,0) and rgb(100%,0%,0%) both correspond to red. The values between 0 and 255 for each color correspond to the hexadecimal values of these colors.

Converting from hexadecimal values to rgb() values is simple. For every six-character hexadecimal color, simply take the first number of every pair (there are three pairs), multiply it by 16, then add the second number of the pair.

For example, the hexadecimal color value #B60023 is made up of three pairs: B6 (red), 00 (green), and 23 (blue). To convert the first pair to an integer value that we want to use inside the rgb() function, we first multiply B (or 11, since B = 11 (see the hexadecimal color format section above)), by 16 to get 176, then add the 6 to give you 182. 

Similarly, we get 00 = (0 * 16) + 0, and 23 = (2 * 16) + 3 = 35. So, the rgb() equivalent of the hexadecimal #B60023 is rgb(182, 0, 35).

There are a lot of tools (e.g. HEX to RGB Converter, Devoth’s HEX 2 RGBA Color Calculator) that can convert hexadecimal RGB colors to the functional rgb() notation and vice versa, so you won’t have to do it yourself. The Chrome Developer Tools also provide an option to convert the colors in the dev tools to one of three formats (hex, rgb, or hsl).

View this demo on the Codrops Playground

The following examples all specify the same color: purple, which is a combination of red and blue in the different RGB formats (hexadecimal and rgb()).

color: rgb(100%, 0%, 100%);
color: rgb(255, 0, 255);
bcackground-color: #ff00ff;
border-color: #f0f;
text-decoration-color: #F0F;
                            

The rgb() functional notation is also used to set opaque colors. But what if you want to set a semi-transparent color? That is where the rgba() function comes in.

Functional notation rgba()

The rgba() color function is a variation of the rgb() function. In addition to the three color values it accepts, it also accepts a fourth value: an alpha value, or the opacity, which is expressed as a decimal number between 0 and 1. For example, if you want to set a semi-transparent red color, you could write: rgba(100%, 0, 0, 0.5), where the last value 0.5 sets the transparency of the color to half its value. An alpha value of 1 means the color is fully opaque, and the value 0 means the color is fully transparent.

The following example will create a semi-transparent purple background color on an element, with white text.

.some-class {
    color: rgba(255, 255, 255, 1); /* fully-opaque white text color */
    background-color: rgba(255, 0, 255, 0.5); /* semi-transparent background color */
}
                            

The following is a live demo showing how the color changes when its opacity is changed by changing the alpha value in the function.

View this demo on the Codrops Playground

HSL Colors

HSL stands for “Hue Saturation Lightness”.

The hsl() functional notation

The hsl() functional notation is used to set colors in the HSL format, and it takes 3 comma-separated values: hue, saturation, and lightness (or luminance).

A hue is specified as an angle within the color wheel (see image below) relative to red. Despite being an <angle>, the value of the angle is unit-less, and defaults to degrees. By definition red = 0° = 360°, and the other colors are spread around the circle, so green = 120°, blue = 240°, etc. As an angle, it implicitly wraps around such that -120° = 240° and 480° = 120°.

Summarized,

• Saturation and lightness are represented as percentages
• 100% is full saturation, and 0% is a shade of gray
• 100% lightness is white, 0% lightness is black, and 50% lightness is “normal”

You set the color by picking an angle value and setting it as the value for the hue. You can then specify the saturation of your color. A saturation value of 0 (0%) gives a gray value (imagine de-saturating a colored photo, you’ll end up with a black-and-white version of the photo with different shades of gray), whereas a saturation value of 1 (100%) means the color is fully saturated.

The third value, the lightness, lets you specify how “bright” the color should be. 0% means the brightness is 0, and the color is black. 100% means maximum brightness, and the color is white.

Lars Gunther has created a very nice interactive HSL color wheel. As the angle changes the color at the angle is shown at the center of the circle. You can click on any color angle to choose that color, and then tweak its lightness and saturation in the color picker below the color circle. It’s a great tool to help understand how HSL colors work, so make sure to check it out.

If you pick a color and slowly increase its lightness from 0% to 100%, you will see the color changing from black, and then through a darker version of your color, to your color in its full brightness at 50%, and then getting brighter until finally, it reaches white at 100%.

So, as you may have realized, the advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, get the angle value, and then tweak to get different shades and tints. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

The following example sets the background color on the page to a light purple color. Check the color circle above to see which color is at a 270 degrees angle.

body {
    background-color: hsl(270, 100%, 50%);
}
                            

The following demo shows the result of tweaking the lightness and saturation of the color blue (at angle 200 on the color wheel). Try changing the values of the color, saturation and lightness to see how the background color of these boxes responds to the different values.

View this demo on the Codrops Playground

The hsla() functional notation

Just as the rgb() functional notation has the rgba() alpha counterpart, the hsl() functional notation has the hsla() alpha counterpart, which, just like the rgba() function, takes in an additional fourth value, the alpha value, which is a decimal number between 0 and 1 representing the opacity of a color, where 1 means the color is fully opaque, and 0 means the color is fully transparent.

This following example will set the background color on an element to a semi-transparent purple color, so the background of the element’s container would show through.

.modal {
    background-color: hsl(270, 100%, 0.5);
}
                            

The following is a live demo showing how the color changes when its opacity is changed by changing the alpha value in the function.

View this demo on the Codrops Playground

Transitioning Color Values

The CSS Transitions Module Level 3 specifies <color> as a transitionable property. This means that a color can change from one initial value to another value, in a nice smooth effect.

A <color> is transitioned by interpolating the individual values: red, green, blue, and the alpha transparency value by treating each as a number. So if, for example, you want to make a color transition from white (#fff) to black (#000), the color will go through all intermediate values (#eee, #ddd, #ccc, #bbb, #aaa, #999, …., #111) between these two colors until it reaches the final color. So, if the transition is done over a fairly long period of time (e.g. 10 seconds) you will be able to see the intermediate colors as the value changes. The speed at which a transition occurs is specified in the timing function controlling the animation or transition.

For example, suppose the background color on a page is set to a gray color, and you want that color to change to a white color when the user hovers their mouse over it. You would set the initial background color to gray (using any of the formats mentioned), and then use the :hover pseudo-class to change that color to white. If the colors weren’t transitionable, the color change would look very abrupt, but with a transition set, the color will change smoothly from gray to bright blue, resulting in a much nicer effect. See transition and :hover for details on how to use transitions in CSS.

Example:

.some-element {
    height: 300px; 
    width: 300px;
    background-color:  #aaa;
    transition: background-color 5s;
}
.some-element: hover {
    background-color:  #fff;
}
                    

View this demo on the Codrops Playground

The colors can also be animated using CSS animations. The animation of colors occurs in the same interpolation manner as described above for color transitions. See the CSS animation for more about animations in CSS.

Trivia & Notes

The W3C Accessibility guidelines strongly recommend that color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Read more on this topic in the article “Colour Accessibility” Geri Coady.