Web Design: Use the Hexadecimal Color Code to Match Colors - dummies

Web Design: Use the Hexadecimal Color Code to Match Colors

By Lisa Lopuck

When you specify colors in HTML or CSS code in web design, you don’t use their RGB numbers. Instead, you use something called a hexadecimal code. For example, plain old white is 255,255,255 in RGB, but it is #FFFFFF in hexadecimal code. In hexadecimal code, the first two digits define the red color, the next two digits define the green, and the last two digits define the blue of the RGB system. Using the #FFFFFF example, the first two digits FF equal 255. So this color is R=255, G=255, and B=255. All three colors at full power (255) make white.

Imagine that you’re designing a website for a company that has a handful of company colors that they want you to use throughout the site. Often times, these colors are specified as PMS colors (Pantone Matching System). So just how do you go from PMS or RGB to hexadecimal color codes?

Instead of using a super-duper decoder ring to translate color values into hexadecimal code and vice versa, you can retrieve the code in both Adobe Photoshop and Adobe Fireworks. (Otherwise you really do need a special hexadecimal calculator, and they do exist online!)

Here’s how to use Adobe Photoshop to find the hexadecimal number of a sample color, or of a known PMS or RGB color:

  1. Launch Photoshop.

  2. Choose File→Open from the menu bar.

    Navigate to an image you want to sample a color from and open it.

    If you don’t have an image to sample and just need to translate an RGB or PMS color value, you do not need to open a file.

  3. Click on the Foreground color swatch at the bottom of the Tools panel.

    A pop-up palette appears, offering a Color Picker for you to use, as the following figure illustrates. Note as well that your cursor turns into an eyedropper.


  4. Move your cursor over your image, and click on the color you want to sample.

    Notice the hexadecimal readout updates in the Color Picker.

  5. Select and copy the hexadecimal code within the Color Picker before clicking the OK button to exit, then paste the code into your CSS code, or into your style guide.

  6. To translate a PMS color, do the following:

    1. Click the Color Libraries button in the Color Picker.

    2. Quickly type your PMS number, say 375, to see your color swatch appear.

    3. When you find the right one in the list, click the “Picker” button to return to the Color Picker.

      Notice the hexadecimal code appears for your color; you can now copy and paste it as you like.

  7. To translate an RGB color, simply enter the R, G, and B values in the Color Picker and see the hexadecimal number update accordingly.