How to Get the Hex Code for Any Color on Your Screen

243,668

6

26

About: Hey, I'm back. Maybe. I had a long period of inactivity on Instructables, but now I'll try to came back and do more stuff on here, especially make more 'ibles. Of course, I probably won't. Oh well, thanks fo...

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...

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">

Share

    Recommendations

    • Trash to Treasure

      Trash to Treasure
    • Arduino Contest 2019

      Arduino Contest 2019
    • Tape Contest

      Tape Contest

    26 Discussions

    0
    None
    jbeekman

    3 years ago on Step 6

    While I can appreciate humor and whatnot in an Instructable this could of been two pages with a lot less filler.

    0
    None
    BillyM1

    4 years ago on Introduction

    Nope, no toolbar.. color picker does not show popup.

    0
    None
    ss89

    7 years ago on Step 6

    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.

    0
    None
    BBZS

    10 years ago on Step 7

    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!!

    4 replies
    0
    None
    BBZSYummyPancakes

    Reply 10 years ago on Step 7

    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??

    0
    None
    YummyPancakesBBZS

    Reply 10 years ago on Step 7

    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.

    0
    None
    BBZSYummyPancakes

    Reply 10 years ago on Step 7

    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!

    0
    None
    stuuf

    10 years ago on Introduction

    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 :)

    0
    None
    jonnxt

    10 years ago on Step 5

    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.

    2 replies
    0
    None
    xACIDITYxjonnxt

    Reply 10 years ago on Introduction

    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.

    0
    None
    maruawe

    11 years ago on Introduction

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

    3 replies
    0
    None
    maruaweYummyPancakes

    Reply 11 years ago on Introduction

    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..

    0
    None
    zpersichettimaruawe

    Reply 11 years ago on Introduction

    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