Blog

Color Distortions on the Web

Aug 10th, 2010 by Max Tokman

Color profiles will look slightly different from one monitor to the next of different manufacturing. For example, if you put the monitor of a Mac next to the monitor of a PC and open the same web page on both monitors, more often than not, the color schematics will look slightly skewed from one to the other.It is important to keep this in mind as you create web-ready documents and images. A pre-launch inspection of color distortions from monitor to monitor can be crucial when you must uphold certain specific color arrangements.

Windows PCs use 2.2 gamma, whereas Macs use 1.8 gamma and this is a major reason why colors appear slightly different, typically lighter or darker, depending on which device you are using.

RGB is a color model in which red, green, and blue light (hence, RGB stands for these three colors) are added together in various ways and degrees to create a broad array of colors to be displayed in electronic systems, not just computer monitors but also televisions, mobile phones, video projectors, and other output devices. RGB is, however, device-dependent. Individual R, G, and B levels vary depending on the device that you are using that is outputting the color images.

Over 90% of web browsers ignore embedded color profiles, originally created in programs like Adobe Photoshop. Most web browsers apply a default RGB profile to all web color. These web-browsers manipulate the specific color schematics that were previously laid out in the document that created the original content. There are some “smart browsers” which are color-managed and will read the correct embedded color code, however they also apply some amount of default RGB to the web color as well. Either way, you’re going to be looking at slightly different coloration from different monitors from different manufacturers.

What can we do about it? There are a few things we can do to manage these pesky contrasting colors.

When preparing Adobe images to be web ready, convert them to “sRGB,” or “standard RGB.” This is a calibrated RGB color space developed by Hewlett-Packard and Microsoft. This is the standard setting for all monitors. Adobe’s RGB setting translates to a slightly different color coding and will cause more extreme color variances from monitor to monitor.

The best way to handle the color differences between a Mac using 1.8 gamma and a PC which uses 2.2 gamma is to have the Mac switch to display a 2.2 gamma when perusing 2.2 gamma work (work originally created for display upon a PC).

According to Gary Ballard, a top commercial digital imaging professional, “setting RGB in your Default to 2.2 gamma sRGBColorSpaceand calibrating a 2.2 gamma custom monitor profile, will serve more users better, with less confusion.”

http://www.gballard.net/psd/saveforwebshift.html

http://en.wikipedia.org/wiki/Gamma_correction

http://en.wikipedia.org/wiki/RGB_color_model

Categories:

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
How Building Strong Customer Relationships Can Benefit Your E-commerce Business

Jan 31st, 2011 by Max Tokman

Relationship marketing is a type of customer-centric marketing that emphasizes customer retention and satisfaction, rather than focusing solely on sales transactions. It recognizes the long term value of the customer and strives to broaden communication (beyond advertising alone) to enhance the overall customer 'experi