How to Get the Hex Code for Any Color on Your Screen
Intro: 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.
STEP 1: Download 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...
Got it? Good. Off we go...
STEP 2: Look at Your Keyboard, Next to F12
Okay, now look down. No, not there. There. Good. Now, on your keyboard, look at the top where there are all the keys with the F's on them. No, not the "F" key. The other ones. Are you looking at them? Go to the one that says "F12." Now, look right next to that one. It will say "Print Screen" on it. Remember where that is now.
STEP 3: Let's Get This Party Started!
Okay, enough prep. Go to the place that has the color of your choice (for my example, I will use Instructables Orange) and hit "Print Screen."
STEP 4: Open Up Gimp and Paste
Start up gimp. If you cant find it, look in the start menu. If you have XP, then it should say "new programs added." Once you've started up GIMP, click "File --> New." Make sure you give it a size that fits the entire thing, of at least that fits what you want to copy. Then, press Control + V. You now have a screenshot of your computer, with the window header and everything! But this is not what we want. Read on.
STEP 5: Color Picking 101
Put GIMP back up, and select the color picker tool. It looks like a little eyedropper. Put it over the target color, and click. The color will show up in the little-color-sample-preview-thing.
STEP 6: CLICK!
Click on the little-color-sample-preview-thing. It will show you the little-color-sample-editor-thing. On the middle left, it will show you... GASP! The Hexadecimal code! We've found it! YAY! Now, be sure to memorize it so you don't forget it!
STEP 7: How to Implement It
Now, how do you use this bit of letters and numbers? I will kindly show you where colors go in HTML, to the extent of my knowledge. PM me if you know of any other ways.
To change background:
<body bgcolor="Hex Code Here">
To change font:
<font color="Hex code here">
To change background:
<body bgcolor="Hex Code Here">
To change font:
<font color="Hex code here">
26 Comments
jbeekman 8 years ago
While I can appreciate humor and whatnot in an Instructable this could of been two pages with a lot less filler.
BillyM1 9 years ago
Nope, no toolbar.. color picker does not show popup.
Newell_Jalynn 10 years ago
ss89 12 years ago
chrizby 15 years ago
http://www.webdiner.com/annexe/hexcode/hexcode.htm
Love instructables!!
BBZS 15 years ago
<font color="orange"> or<body bgcolor="orange">
But that won't be as accurate of course.
Nice tutorial anyway, also, I LOVE GIMP!!
YummyPancakes 15 years ago
Ch0sen Entertainment
BBZS 15 years ago
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??
YummyPancakes 15 years ago
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.
BBZS 15 years ago
I don't think I've ever used the style tags though. Anyway, thanks for the chat =D!
stuuf 15 years ago
jonnxt 15 years ago
xACIDITYx 15 years ago
YummyPancakes 15 years ago
maruawe 16 years ago
YummyPancakes 16 years ago
maruawe 16 years ago
zpersichetti 16 years ago
fungus amungus 16 years ago
YummyPancakes 16 years ago