CSS Colors:

Options to define a color

There are numerous ways you can define color with CSS. The rules below, for example, all result in the same color (orange-red). They represent the 4 most commonly used color declarations.

Color Names

All modern browsers support the following 140 color names. Check here for a full list.

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB.

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.

For more information see here

RGB Colors

RGB color values are supported in all browsers.

An RGB color value is specified with: rgb(red, green, blue).

Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.

For example, rgb (0, 0, 255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0..

For more information see here

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

HSL stands for hue, saturation, and lightness.

HSL color values are specified with: hsl (hue, saturation, lightness).

For more information see here

Color Transparency/Opacity

CSS3 introduced color transparency. You can add transparency to RGB and HSL color values:


"a" stands for alpha channel which specifies the opacity for a color. Both of the above colors show at 50% opacity in a browser.

Color Gradients

CSS3 also offers to apply color gradients. Below CSS examples of gradients combined with transparencies. Here the same hsl color is used for a gradient of 100% opacity to 0% opacity

See the Pen Gradients by Oliver Roeger (@uic-des) on CodePen.

Color Gradients in Text

See the Pen text gradient by Oliver Roeger (@uic-des) on CodePen.

CSS Blending Modes

See the Pen Blending Modes by Oliver Roeger (@uic-des) on CodePen.