Copying Colors from a Website

You can easily take colors from a website. Perhaps you want your presentation to use the same colors as your company’s website. Or you might simply find a color that you like on a website. HTML uses hexadecimal codes to define colors, but these codes are still in the familiar Red-Green-Blue (RGB) format that PowerPoint uses. All you need to do is to change the hexadecimal codes to decimal equivalents.

The shortcut is to use the eyedropper in PowerPoint 2013.  I explain how to use it here. If you’re using an earlier version, you can use a colorpicker application like ColorPic.

But if you want to get the colors directly from your website, here are the steps:

  1. Open the Web page.
  2. In your browser, right-click the page and choose View>Source (or the equivalent in your browser). The HTML source code opens in Notepad.
  3. From Notepad’s menu, choose Edit>Find.
  4. In the Find What text box, type color. Click Find Next. You’ll see a code segment that looks something like this: bgcolor=”#E1EAF3″. Write down the 6 characters between the quotation marks. (Bgcolor stands for “background color.”)
  5. Click Find Next again to find other instances. If you don’t know HTML, you may have trouble figuring out which code relates to the color you want, so just write down all the hexadecimal codes you find.
  6. powerpoint-tips-copying-colors-website-1Now go to, which is a hexadecimal to decimal conversion table.
  7. Look up the first two characters of your color code and write it down. In the example above, look up E1, which is 225. This is the red value.
  8. Look up the second two characters and write it next to the red value, leaving a space. In our example, this is 234, the decimal value for EA. This is the green value.
  9. Look up the last two characters and write it next to the green value, leaving a space. In our example, this is 243, the decimal value for F3. This is the blue value. So the result would be 225 234 243.
  10. In PowerPoint, insert any shape. Right-click the shape and choose Format>Shape.
  11. Click the Color drop-down list of the Fill Section and choose More Colors.
  12. On the Custom tab of the Colors dialog box, make sure that the Color Model is set to RGB . Then enter the red, green, and blue colors.
  13. Click OK twice to return to your slide. Your shape now has the color you saw on the website. If that’s not the color you want, retry with the other hexadecimal codes you wrote down.

You can use this color as a background, to fill an shape, or to color your text.

If you found this useful, please use the buttons below to share it!

3 comments to Copying Colors from a Website

  • Web Development Los Angeles

    That is very useful information.Firstly it is important to know about the web palette to be able to design appropriately,And then there are further more tricks that we learn from these articles…lovely guidance.

  • Hotel Deals!

    Thanks just what I needed to know, It worked for me however the color was a slightly darker shade!

    Im trying to match my logo background to my website background, any ideas?

  • 台灣大樂透

    Marvelous website, thank You !!

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>