Color Values (hex, rgba, color names)

 

Sometimes, using a color picker can be all you need to choose a color to work with. However, if you need precision, you want to get more specific.

Colors are represented in three common ways on the web:

  • Color names
  • Hex codes
  • RGBA

Color names

HTML color names are the common color names for 140 colors that are supported by modern browsers.

It’s easier to remember and use “Blue” instead of #0000FF. Still, most of these names are somewhat arbitrary LawnGreen, PeachPuff, BlanchedAlmond, etc.

 

Also, HTML color name lists aren’t a full representation of what's entirely possible with web colors. So, to have more color choices to choose from, you can use one of the other formats.

Web colors
Web Colors

Hex codes

Hex codes are usually six-digit codes that correspond with a precise color output.

Hex colors
Hex colors

They are also called hex triplets because they are made up of three sets of two digits. Red, green, and blue. The same three colors that make up each pixel in a display. 

As you increase the value of a particular color, the more of that color you get in your output. You can play with the red, green, and blue to get virtually any color you can think of.

 

Hex

The value for each color is written using the hexadecimal or hex, a base-16 numbering system. The hexadecimal numbers start from 0 to 9 and then add the letters a through f before switching to 10.

 

Shorthand hex

Shorthand hex is a representation of a 6-digit hex in only 3 digits.

You can use shorthand hex if you’re working with a color that has repeating digits in all three of the color values. Like AA-BB-CC or 44-11-EE. You can simply omit the second digit for each color, making it ABC or 41E.

For example white is #FFFFFF and can be written in short as #FFF.

‍Shorthand hex

RGBA

On the other hand, RGBA values are represented with the base-10 number system you are familiar with.

RGBA uses the values 0 through 255 to represent each color. Red, green, and blue. That’s 256 levels of red including zero.

The A is for Alpha transparency. So, with RGBA, you can also control the opacity from completely transparent (0) to fully opaque (1). The lower the alpha, the more transparent the color. The higher the alpha, the more opaque.

RGBA

You can also use the color picker and the eyedropper tool to choose your color visually.