CSS Color Definitions

CSS provides quite a few ways to express colors for type, backgrounds, borders, and more. This page shows some of the most common formats for defining color values. You may encounter others.

Hexadecimal

The Hex format consists of six digits of alphanumeric code and are denoted by a preceding hashtag, like this: #3ab13f. These values can be easily copy-pasted from most design software.

For certain colors with repeating digits in the hex code, you can use a three-digit shorthand. For instance, #333333 can be shortened to #333.

RGB & RGBA

The RGB format consists of defined values for each of the red, green, and blue colors. It is written like this: rgb( 13, 124, 0 ).

The RGBA format: When necessary, you can use a fourth value that denotes opacity to make the color semi-transparent. Opacity is scaled from 0–1, where 0 is completely transparent and 1 is fully opaque. An opacity of .5 is half-transparent. This is written like this: rgba( 13, 124, 0, .5 ).

Named Colors

For ease of use, there are 147 colors that have human-friendly names. These include common color names like: white, black, red, blue, etc., as well as some fancier ones like cornflowerblue or darkolivegreen.

There are many websites that list all named CSS colors for reference.

Practice Exercise

Open exercise in a new tab