Photoshop Help Resources Tutorials

 

"I have a web page with a simple one colour (hex) background. I have created a number of images in photoshop where big rectangular parts of that image are filled with the same colour. The image is then saved for web as a .jpg and placed on the web page.
      In every browser, on every platform in the world this .jpg colour perfectly matches the web page background, but in Safari the colours are WAY WAY WAY off.
      I've been using photoshop for 15 years, and building websites for 8, what am I missing."


 

Color Shifts from HEX Codes

NOTE Colors must be within a specific range to be browser safe.


  Color on the right, Hex #392725, which is also not an "approved" HEX color code.

Based on the sample provided in the reader's post, the above graphic shows what the two samples looked like in a screen capture. Photoshop identified those colors as: #463136 the desired color, and #392725 the "shifted" color, which is supposed to match #463136

Browser testing: Below the graphic, you see two boxes.
These are generated by CSS using the indicated color codes for the background
These are rendered by your browser.
Already, we can see a shift in the colors when compared to each other, and the Photoshop rendered screen capture.

In order to continue with the exercise, we need the reader's hex codes.
However, some time ago, the Design Center's "Mr. Pixelsmith" talked about a utility called the "Color Converter. If you go to The Site-Point Color Converter, and input these two colors, the results will be a HEX error:
      The warning symbol shows when there is a difference
      between the chosen colour and the base output colour.
      It is important to note that RGB has a far greater range
      of colours than the pigment based RYB colour wheel.

The tool will actually choose the closest match as an RGB section as well as a new HEX code. Just click on the little warning icon.

When you arrive at a specific code that is RGB correct, HEX correct, and keyed into Photoshop's Color Palette, you should get a color that matches the graphic to the browser-rendered background code.

NOTE Reader Browser Testing: For browser comparison purposes, we invite readers to capture a 1-inch (72 x 72 pixel) sample of the TWO SITES referenced at the Photoshop 911 Forum, and send it to us for display on this page.
* Be sure to include the browser and version you're using to view the web site.
* Sample image #1 (called "GOOD")
* Sample image #2, (called "BAD") and
* Sample the site they're supposed to match
      (Click the various icons to see which ones use the "filler" color)

NOTE CONTACT US for specific instructions on how to send in your screen captures.

 

Return to the Photoshop 911 DISCUSSION FORUMS you were reading

For ongoing original content about Photoshop, painting, color and image retouching visit DTG Magazine's Photoshop Content areas at: www.Graphic-Design.com/Photoshop

Submit a Photoshop Resource to the directory

Use the SUBMIT BUTTON to enter your favorite Photoshop resource or tutorials site. It will be added to the Photoshop 911 directory database for caller referrals, as well as the Photoshop911 Blog.
      Understand that a volunteer will visit, and validate the link. Please do NOT add front pages or empty content pages like lists of tutorials or other links. Please add ONLY one resource per submission, and make sure the link goes directly to the referenced resource. Let us know if you wish to be a Photoshop 911 volunteer

Sign In if you are a Photoshop Professional

Please REGISTER YOUR SERVICES with Photoshop 911 so you can be called upon when emergencies require a professional in the field who is available to take on new clients. Once you register you will be contacted for particulars. Please be patient, there's already a long list.

Who invented "Photoshop Tips & Tricks"

from the Editor:
      I was delighted that day back in 1989 when Peggy Killburn called to ask if I could handle one more speaker in my "Great Graphics Tips & Tricks" session scheduled for the 1990 Macworld Expo. "Yes" was my response to her request to add Russell Brown to my panel. After all, we loved Adobe's young "Illustrator" program, and were quite anxious to try out their upcoming new product called "Photoshop." After seeing his demo, I was convinced Photoshop would be big. So the next month we added "Photoshop Tips & Tricks" to our regular DTG Magazine uploads to Compuserve, GEnie and AOL. The rest is history.
      I only regret that I didn't trademark the name.

Fred Showker editor publisher

Editor / Publisher: Photoshop Tips & Tricks, DTG Magazine.

What do you want to do next?
Notes, Policy & Disclaimers:
Information in this web site are the exclusive property of Photoshop 911 dot com or respective authors and is copyright as a 'collection' - ALL RIGHTS RESERVED. Content herein may not be published in any form without the express permission of Photoshop911.com. * All solutions or suggestions found in this web site are intended as guides only, with no written or implied guarantees of remedies. * Photoshop 911 dot com has no direct association with Adobe Systems, Inc. other than to support and evangelize Adobe Photoshop and Adobe Photoshop Elements. Trademarks of various products mentioned in these pages is the express property of the respective owners. Photoshop 911 is an analogy of the national "911" emergency system, and is in no way related to nor in reference to the events of September 11, 2001.
      Security and Terms of Usage This web site as do all Graphic Design Network sites adheres to the highest ideals of TRUSTe. No information gathered herein will be shared with any third party beyond publishable questions from readers. Email addresses will not be stored on the internet in any fashion, and will not be shared with anyone outside Photoshop 911 dot com. Photoshop 911 is a member of: User Group Network, and is sponsored in part by: The , The News Serve Network, and the Designers' Bookshelf. Hosting services are provided by The Graphic Design Network to serve the computing community. * Photoshop911.com is a wholly owned subsidiary of Showker Inc., T/A The Graphic Design Network, and is copyright 1998 through present, ALL RIGHTS RESERVED. Photoshop911 and Photoshop911.com as well as DTG, DT&G Magazine are trademarks owned by Showker, Inc., a Virginia State Corporation established in 1972.

Valid HTML 4.01!