3 Simple Ways to
Share What You Make

With Instructables you can share what you make with the world — and tap into an ever-growing community of creative experts.

PhotosPhotos

Share one or more photos of a project, recipe, or whatever you've made, quickly and easily.

Get Started

Learn more & Get Tips

Step by StepStep-By-Step

Share your step-by-step photos with text instructions of what you made so others can do it too!

Get Started

Learn more & Get Tips

VideoVideo

Share your how-to video. You'll need your embed code from a video site such as YouTube.

Get Started

Learn more & Get Tips

Print PDF

Favorite

How to get the Hex code for any color on your screen

How to get the Hex code for any color on your screen

I will show you how to get the Hexadecimal code for any color that your computer monitor shows you, so that you can use them in HTML documents and other fancy-schmancy computer stuff. Surprisingly, it uses legal software.

Remove these ads by Signing Up

Step 1Download GIMP

GIMP is good. It has a lot of the stuff Photoshop has, but not all. Perhaps that's why it's free. But still, it's a lot better that crappy old Paint. Anyways, it is a requirement for this instructable. Get it. Don't worry, I'll wait...

Got it? Good. Off we go...

« Previous Step

Download PDFView All Steps

Next Step »

23 comments

Nov 12, 2011. 12:13 PMss89 says:

One step easier, shift-click brings up the info window and each subsequent click is updated in this new window, so you can see several colors quickly.

Jan 3, 2009. 10:07 AMchrizby says:

Or you could go to this web site and save the page to get the hex codes.
http://www.webdiner.com/annexe/hexcode/hexcode.htm

Love instructables!!

Dec 8, 2008. 5:17 AMBBZS says:

You could also just do this:

<font color="orange"> or<body bgcolor="orange">

But that won't be as accurate of course.

Nice tutorial anyway, also, I LOVE GIMP!!

Dec 8, 2008. 4:55 PMYummyPancakes (author) says:

You're telling me! I recently made a new website dedicated (in part) to what I create in GIMP. Here it is:

Ch0sen Entertainment

Dec 9, 2008. 1:23 PMBBZS says:

I have a website too! GamerReviewsMega

I like the design of your website, can't wait till there's some projects posted!

(I use HTML,not C++)
Also, is there a difference between C++ and CSS??

Dec 9, 2008. 3:49 PMYummyPancakes (author) says:

Oh really? I like the design of yours too. I never really got into HTML. I created one game with it and JavaScript, and then got bored. (I'm a game developer, not a site developer, with the exception of C0E.)

As for your question, of course! IF you've written complex web pages, chances are you have used CSS. Basically, it's what's between the <style> and </style> tags. As you can see (if you read my tutorial), C++ is not the same as CSS.

Dec 9, 2008. 6:01 PMBBZS says:

No, I didn't read it, I had to go to MAC (Marital Arts Class).

I don't think I've ever used the style tags though. Anyway, thanks for the chat =D!

Aug 8, 2008. 5:46 PMstuuf says:

There's actually a much simpler way to do this with Gimp without wasting time doing a screen capture (also, if you do need a screenshot, gimp has its own screen capture plugin that can even crop to a single window or do time delay, and isn't affected by the fact that print screen-paste only works on windows) On the color select dialog, right next to where it shows the hex value, there's a button that lets you click any color on the screen and select it. And it shouldn't be "surprising" that you don't need to buy/pirate expensive software to do something this simple :)

Jun 28, 2008. 8:17 AMjonnxt says:

there's 1 problem I noticed in the past with print screen. some colors will show up inaccurately. resulting image may become pixlated and low quality.

Jul 12, 2008. 12:36 PMxACIDITYx says:

Only if you paste it into paint and save it as a jpeg. Here, we're not saving it at all, so there is no color loss.

Jul 12, 2008. 2:52 PMYummyPancakes (author) says:

Yes.

Mar 13, 2008. 9:46 AMmaruawe says:

It is as easy in Photoshop,if not easier..If you are on a budget you can use Elements from Adobe..

Mar 13, 2008. 1:47 PMYummyPancakes (author) says:

GIMP is free. That's enough for a little trouble.

Mar 14, 2008. 8:59 AMmaruawe says:

Gimp may be free, but to do professional work it leaves a little bit to desire.. I understand that everyone cannot afford to purchase expensive programs, I have gimp also but hardly ever use it. The program that I gave as an alternative ,Elements, is pretty reasonable at about $100.00..

Apr 9, 2008. 3:04 PMzpersichetti says:

im pretty sure the newest one is like $60 im not 100% sure though but ya its unbelievable that its $600 for regular photoshop i want it so badly that and flash :P

146

Mar 11, 2008. 5:08 PM

fungus amungus says:

If you have a Mac, you already have DigitalColor Meter.

Mar 11, 2008. 5:15 PMYummyPancakes (author) says:

...But if you have a PC, you have to do this. :-)

146

Mar 12, 2008. 9:54 PM

fungus amungus says:

It's true :) If you need to know hex codes I'd try some other tool. I've done it your way before with photoshop and having a tool for it is a lifesaver. Especially when I'm working in Illustrator and need some colors fast.

Mar 11, 2008. 4:58 PMSilentTecro says:

Or for websites, install Firefox and Color Zilla. Your method works well for colors in other programs, though, and like ColorZilla it's cross-platform.

Mar 11, 2008. 5:16 PMYummyPancakes (author) says:

Hmm, I think I'll try it...

Mar 11, 2008. 5:20 PMYummyPancakes (author) says:

Works great. Luckily, I already have Firefox (Look closely in the pictures.)