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:

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Sep 13th, 2010 by Max Tokman

All existing technologies of embedding custom fonts may be classified into three major methods: Substitution of source text by flash movie or graphic image. Font is converted into some intermediate format, then JavaScript is used for rendering. CSS @font-face technology. Here are some specific services f...

Jun 29th, 2010 by Max Tokman

At OSS, Wordpress has become a big part of our production capabilities during the last year. We use it primarily for custom theme development and as a CMS for Flash. Although we don't write many plug-ins, there are a number of third party solutions we can recommend that will enhance any Wordpress powered website. Most ...