CSS Colors: How to Use Color Names, RGB, HEX and HSL Value Indicators

Defining colors

• Describing a color in CSS means giving instructions that computers will be able to convert to a specific color.
• You can indicate CSS colors with the RGB model (referring to RED/GREEN/BLUE and related tones).
• There are 4 value types for CSS colors:
  • Color names — blue
  • RGB values — rgb(0, 0, 250)
  • HEX values — #0000FF
  • HSL values — hsl(240, 90%, 78%)

Color keywords

There is a list of keywords referring to available color names. Using them is the simplest method for setting colors in CSS and HTML instead of numeric codes of colors.

All you need to do is choose a styling property and then assign a color name which acts as a value.

Color name declaration is not case-sensitive. Blue is the same as blue or BLUE.

Tip: there are no color names for unique or rarer colors. Keywords stand for standard and secondary colors, shades of gray, and some blends of colors.

The following example shows that an HTML element <h1> has a background-color property. The value of the CSS background color is blue.

<h1 style="background-color: blue;">
Heading with blue background
</h1>

Using color codes

It is possible to express RGB colors in three ways:

• RGB
• RGBA
• Hexadecimal (with # at the beginning)

Note: learn about color blindness and style websites accordingly. Avoid using color as indicators of failure or success.

RGB and RGBA

RGB is a CSS rgb() function that has parameter values of red, green, and blue colors.

In this example, we use RGB colors:

#exmpl-b {background-color: rgb(0, 0, 255);}   /* blue */
#exmpl-r {background-color: rgb(255, 0, 0);} /* red */
#exmpl-g {background-color: rgb(0, 255, 0);} /* green */

The following example applies RGBA color values:

#exmpl-b {background-color: rgba(0, 0, 255, 0.4);}   /* blue with 0.4 opacity */
#exmpl-r {background-color: rgba(255, 0, 0, 0.4);} /* red with 0.4 opacity */
#exmpl-g {background-color: rgba(0, 255, 0, 0.4);} /* green with 0.4 opacity */

Note: since CSS Colors Level 4, CSS rgba() is the same as rgb(). Browsers supporting the Level 4 standard interpret these functions in the same way.

RGB and RGBA work similarly, but RGBA has the fourth parameter of the opacity.

• Red, green, and blue values have to be between 0 and 255 inclusively. As an alternative, you can write values in percentages from 0% to 100%.
• In RGBA, write 0.0 value for opacity when you want the color to be completely transparent. For solid colors, write 1.0. In percentages, 0% represents 0.0 value and 100% refers to 1.0.

For example, rgb(0, 0, 255, 0.3) CSS color codes represent blue color that is 30% transparent.

This example uses an HTML element <h1> and assigns background-color styling property to it. The only difference is that the HTML background color will be changed using a rgb value indicator.

<h1 style="background-color: rgb(0, 0, 255);">
Heading with blue background
</h1>

This example is very much like the others. It uses the same element and style property. However, now we're using the rgba value indicator, so we will be able to set the opacity and color tone at the same time.

<h1 style="background-color: rgba(0, 0, 255, 0.5);">
Heading with blue background that is 50% opaque
</h1>

Hexadecimal notation

The hexadecimal format for colors uses hexadecimal digits for indicating components of red, green, and blue.

This example defines HEX colors:

#exmpl-b {background-color: #0000ff;}   /* blue */
#exmpl-r {background-color: #ff0000;} /* red */
#exmpl-g {background-color: #00ff00;} /* green */

Note: in #RRGGBB, RR stands for Red, GG for Green, and BB for Blue. Each one of them has a hexadecimal value ranging between 00 and FF.

There are two ways of representing CSS color codes in hexadecimal format:

• As numbers from 0 to 255 (0x00 and 0xFF)
• As numbers from 0 to 15 (0x0 and 0xF)

Tip: a hexadecimal string always starts with the # and the hexadecimal digits follow.

Hexadecimal values are not case-sensitive, so #fa0001 is the same as #FA0001. For example, #00FF00 is Green. The green parameter (#RRGGBB) is set to the highest value (FF), and other ones are at 00.

In this example, we see that the <h1> element has a styling property color. Color is defined using a hexadecimal value of #0000FF. Therefore, the text in <h1> will be blue.

<h1 style="color: #0000FF;">
Text color of the heading is set to Blue using #0000FF
</h1>

HSL indicator

HSL stands for hue, saturation, and lightness. An HSL color value is specified with hsl(hue, saturation, lightness).

The following example uses HSL color values:

#exmpl-pb {background-color: hsl(240, 60%, 70%);}  /* pastel blue */
#exmpl-db {background-color: hsl(240, 100%, 25%);} /* dark blue */
#exmpl-lb {background-color: hsl(240, 100%, 75%);} /* light blue */
#exmpl-b {background-color: hsl(240, 100%, 50%);} /* blue */

Note: hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value: 100% is the full color. It describes the color intensity.

You can describe lightness with a percentage parameter: 0% is dark (black), and 100% is white.

Tip: graphic designers and artists adore HSL indicator since it allows them to define all aspects of CSS colors in one line.

The following example uses the style property background-color.

hsl(120, 100%, 50%) value indicator sets the color tone, saturation, and lightness.

<h1 style="background-color: hsl(120, 100%, 50%);">
Heading with green background
</h1>

HSLA indicator

HSL and HSLA are the same, but HSLA accepts an additional parameter of opacity.

This example uses HSLA colors:

#exmpl-pb {background-color: hsla(240, 60%, 70%, 0.4);} /* pastel blue with 0.4 opacity */
#exmpl-db {background-color: hsla(240, 100%, 25%, 0.4);} /* dark blue with 0.4 opacity */
#exmpl-lb {background-color: hsla(240, 100%, 75%, 0.4);} /* light blue with 0.4 opacity */
#exmpl-b {background-color: hsla(240, 100%, 50%, 0.4);} /* blue with 0.4 opacity */

HSLA color accepts these values:

• hue
• saturation
• lightness
• alpha

Alpha (opacity) set to 0 is completely transparent, when set to 1 is fully solid.

Below, you can see how the alpha parameter changes the way we perceive a color with the same hue, saturation, and lightness values.

In the following example, you'll see that <h1> element will have a bright green background that is 50% transparent.

<h1 style="background-color: hsl(120, 100%, 50%, 0.5);">
Heading with green background that is 50% opaque
</h1>

• The hsl(120, 100%, 50%, 0.5) value indicator tells us that the color is green since 120 is assigned as the first value.
• 100% indicates that it's highly saturated/bright.
• 50% says that the color is neither light nor dark.
• 0.5 determines that is half see-through.

Color opacity

The CSS color opacity property sets the transparency for the whole element.

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Note: by using the :hover selector and opacity, you can change the transparency of images and colors on mouse-over.

It is common to use opacity for half-transparent backgrounds. Below, you can see the same color with different opacity values assigned to it.

This example shows you that <h1> has a background-color and opacity properties.

<h1 style="background-color: rgb(0, 255, 0); opacity: 0.5;">
Heading with green background that is 50% opaque
</h1>

• The CSS rgb() indicator sets the background color.
• Opacity has 0.5 value.
• The color will be added only to the background. The text will be set to the browser default.
• However, both elements will have an opacity of 50%.

CSS colors: useful tips

• You can get CSS color codes using our Pickeristic tool. It lets you pick colors, create palettes, and select color codes for you randomly.
• Modern browsers support thousands of colors. Therefore, there is no need to use the web safe colors to make sure that all browsers display them.
• HSL allows setting hue, saturation, and lightness for separate elements. Therefore, developers often choose HSL for creating palettes of matching colors.