Ask Me Help Desk

Ask Me Help Desk (https://www.askmehelpdesk.com/forum.php)
-   Multimedia (https://www.askmehelpdesk.com/forumdisplay.php?f=215)
-   -   How to get color code from an area of a webpage? (https://www.askmehelpdesk.com/showthread.php?t=180530)

  • Feb 5, 2008, 06:13 AM
    RickJ
    How to get color code from an area of a webpage?
    Here's an example: City of Phoenix, Arizona, Official Municipal Web site

    The header is an image... so I know I can save it and get the colors using Photoshop... but what about the menu background colors on the left and right?

    I'm not finding it in the page code since it's in a style sheet.

    How can I find out what color it is?

    Is there some nifty software (preferably free, of course :) ) that will let me click on an area of a webpage to learn what color it is?

    Thanks!
  • Feb 20, 2008, 08:34 AM
    chuckhole
    Just noticed your post.

    While viewing the web page (instructions for IE6), hover over the graphic nearest the colored area that you want. For example, Welcome to Phoenix.gov. When you hover over the graphic, the ALT text is displayed. This is near what you are looking for.

    Then, click on View in the IE toolbar and the select Source. This will open the source code for the page you are viewing. Instead of scrolling down through the many lines of code, do a search on the ALT text. This should take you down to the following:

    <table cellSpacing="0" cellPadding="0" width="100%" border="0" summary="layout table to align main banner on page">
    <tr>
    <td width=496 bgcolor="#a02f00"><DIV align=left><IMG src="/images/home_banner.gif" alt="Welcome to Phoenix.gov - Government At Your Service"></div>
    </td><td width="1" bgcolor="#a02f00"><a href="http://phoenix.gov/access.html"><img src="/images/clrpxl.gif" border=" border=" alt="for information about this site's accessibility, click here"></a></td><td bgcolor=#a02f00><DIV align=right>

    I have highlighted the background color in the <TD> table data so you could see where it is. Notice the ALT text for the graphic nearby?

    Now, here is the really cool part. :cool: If you want to see what it matches up to, open Microsoft Paint... yes, that's right... Paint. Now, go to the Colors menu and select Custom Colors. Over to the right, you have Decimal equivalents of the colors in Red, Green, Blue. Use the Calculator program... yes, that's right, the old CALC.EXE program... and select the Scientific View. Convert your HEX numbers to DEC and plug the numbers in to values in MS Paint.

    So, a02f00 (RGB) a0 converts to 160-Red, 2f to 47-Green, 00 to 0-Blue. Voilą, there is your color.:D
  • Feb 20, 2008, 11:49 AM
    chuckhole
    As far as the Style Sheet goes, you can grab that too. Search in their code for .CSS to see what style sheets they are including. I found only this one:

    <!-- begin hheadtag.html include-->
    <link rel='stylesheet' type='text/css' href='/includes/global_payf_styles.css' />

    Since the link is a relative link back to the root of the site, all you have to do to grab the info from their style sheet is to add a URL to it in your browser. If you are not blocking downloads, it should open up in your favorite editor.

    Try it: http://phoenix.gov/includes/global_payf_styles.css

    Everything I saw in the Style Sheet was for font colors. I found the TAN color in the code below:

    <table border="0" width="100%" cellpadding="0" cellspacing="0"><tr>
    <td bgcolor="#EEB77B" width="150" align="center" valign="top"><table border="><table border=" width=" width=" cellpadding=" cellpadding=" cellspacing=" cellspacing="><tr>
    <td valign="top"><tr>
    <td valign="Borrowing" other people's code can be very educational and a good use of your time. ;-)
  • Jan 16, 2010, 08:00 AM
    VancoP
    There is just another way, getting the color of any web page or image. It's a free and portable tool called Pipette - http://www.sttmedia.com/pipette
    With this tool you can mouse your mouse over the screen and you can see the color code in many models like HSV, RGB, Hex, CMYK and so on, so that you can use it.
  • Jan 16, 2010, 08:05 AM
    VancoP

    Here is the correct link, unfortunately I cannot edit my post:
    Pipette

  • All times are GMT -7. The time now is 12:15 PM.