Color Formats

Color Formats

CSS provides several ways to define colors. Common color formats include color names, hexadecimal values, RGB, HSL, and HWB.

These color values can be used with CSS properties such as color, background-color, and border-color.

Named Colors

CSS includes predefined color names that can be used directly. View all CSS named colors.

color: blue;

Other examples include: red, green, yellow, orange, purple, black and white.

HEX Colors

HEX colors use hexadecimal numbers to define the amount of red, green, and blue in a color. The basic format is:

#rrggbb

Examples:

#ff0000  /* red */
#00ff00  /* green */
#0000ff  /* blue */
#000000  /* black */
#ffffff  /* white */

Some six-digit HEX values can also be shortened to three digits.

#ff0000 = #f00
#ffffff = #fff
#000000 = #000
#336699 = #369

RGB Colors

RGB colors are created by combining red, green, and blue values. The basic format is:

rgb(red green blue)

Each value can range from 0 to 255.

Examples:

rgb(255 0 0)      /* red */
rgb(0 255 0)      /* green */
rgb(0 0 255)      /* blue */
rgb(0 0 0)        /* black */
rgb(255 255 255)  /* white */

HSL Colors

HSL defines a color using hue, saturation, and lightness. The basic format is:

hsl(hue saturation lightness)

• Hue represents a position around the color wheel.
• Saturation controls the intensity of the color.
• Lightness controls how light or dark the color appears.

Examples:

hsl(0 100% 50%)    /* red */
hsl(120 100% 50%)  /* green */
hsl(240 100% 50%)  /* blue */

HWB Colors

HWB defines a color using hue, whiteness, and blackness. The basic format is:

hwb(hue whiteness blackness)

• Hue represents a position around the color wheel.
• Whiteness controls how much white is added.
• Blackness controls how much black is added.

Examples:

hwb(0 0% 0%)    /* red */
hwb(120 0% 0%)  /* green */
hwb(240 0% 0%)  /* blue */

Comparing Color Formats

The same color can usually be written using several different formats.

Using Colors in CSS

Color values can be used with many CSS properties.

Text Color

color: #336699;

Background Color

background-color: #f0f0f0;

Border Color

border-color: #336699;

Complete Example

Summary

CSS supports several common color formats, including named colors, HEX, RGB, HSL, and HWB.

You can choose whichever format is easiest to understand and maintain. The same color can often be represented using several different formats.

In the next tutorials, you will learn how to use these color values for text, backgrounds, transparency, and borders.